Aslında media query dediğimizde aklımıza gelen ilk şey css’de kullandığımız @media keyword’leri olmaktadır. Bu keyword’ler ile tanımladığımız kuralları artık javascript tarafında da tanımlayıp kullanabiliyoruz. Web dünyası hız kesmeden gelişmeye devam ediyor. Tabi bu gelişme sadece javascript dünyası ile sınırlı değil. CSS ve HTML dünyasında da sürekli bir geliştirme durumu söz konusu ama asıl konumuz olan javascript tarafında media query’lerin nasıl kullanılabildiğine bu makalede cevap vereceğiz.
Javascript Media Query Nedir ve Nasıl Kullanılır?
Figure: Media Queries – Author: Seobility
CSS dünyasında örnek bir media query paylaşsak hiçte yabancı gelmeyecektir. Alttaki ufak css media query örneği çok sık rastladığımız ve bildiğimiz standart bir media query tanımıdır değil mi? 🧐
1 2 3 4 5 6 7 8 9 10 | body { background-color: red; color: white; } @media (min-width: 768px) { body { background-color: white; color: red; } } |
CSS media query ile neler yapabiliyorduk özetle hatırlamak gerekirse şunları söyleyebiliriz;
- Sistem renk şemasına göre sayfanızın dark/light geçişlerini yönetebilirsiniz.
- Farklı stillerinizi farklı çözünürlüklere göre uygulayabilirsiniz.
- TV, Projector, Printer v.b. bir çok farklı cihaz türüne özel css stil tanımlarınızı yapabilirsiniz.
Peki şimdi media query sorgularınızı javascript dünyasında kullanabileceğinizi söylesek 😮
matchMedia() Kullanımı
Yukarıdaki css örneğimizde yer alan “min-width: 768px” kuralını matchMedia fonksiyonuna parametre olarak geçerek javascript tarafında media query sorgusunu tanımlamış olursunuz. Altta örneğini görebilirsiniz.
1 2 | // media query sorgusunu js'de tanımlama. const mediaQuery = window.matchMedia('(min-width: 768px)') |
Peki sorgumuzu tanımladık ama sorgunun nasıl çalıştığını ve ekran çözünürlüğü değişimlerinden nasıl haberdar olacağız.🤔 Şöyle ki eğer sorgunuzun sonucunu hemen almak istiyorsanız alttaki gibi matches özelliğinden media query sorgumuzun kurala uyup uymadığını tek seferlik kontrol edebiliyoruz. Altta tek seferlik kontrol için kod örneğine göz atabilirsin.
1 2 3 4 5 6 7 | // En az 768px çözünürlüğünde olan ekran kontrolünü yapmak için sorgumuzu matchMedia fonksiyonuna parametre olarak geçiyoruz. const mediaQuery = window.matchMedia('(min-width: 768px)') // Sorgu sonunucu kontrol etmek ve eşleşmenin sağlanıp sağlanmadığını kontrol etmek için matches özelliğini kullanıyoruz. if (mediaQuery.matches) { // Eğer sorgu sonucu olumlu ise işlemlerinizi burada yapabilirsiniz. alert('Media Query Eşleşti!') } |
Tek seferlik kontrol ihtiyacını karşılamıyorsa yada çözünürlük değişimlerini sürekli takip etmek ve çözünürlük değişimi sonrası sadece kurala uyulduğunda ilgili fonksiyonunuzun tetiklenmesini istiyorsanız addEventListener fonksiyonundan faydalanıp çözünürlük değişimi eğer kuralınız ile eşleşirse belirlediğiniz fonksiyonun çalışması sağlanır. Alttaki kod örneğinde tam olarak bu event listener konusuna cevap bulacaksınız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Eğer viewport 768px ve üstü olduğunda handleTableChange adlı fonksiyonun çalışmasını sağlıyoruz. const mediaQuery = window.matchMedia('(min-width: 768px)') function tabletDegisiminiAlgila(e) { // Kural kontrolünü yapıyoruz if (e.matches) { // Eğer kuralımız olumlu ile yapacağımız işlemleri burada yapıyoruz. console.log('Media Query Kuralımız Eşleşti!') } } // Ekran çözünürlüğü değişimlerini dinlemek için addListener fonksiyonu ile register işlemini yapıyoruz. mediaQuery.addListener(tabletDegisiminiAlgila) // İlk kontrolü manual yapıyoruz tabletDegisiminiAlgila(mediaQuery) |
Peki şimdi aklımızda bir soru vardır herhalde. O soru da matchMedia olmadan javascript tarafında ihtiyacı nasıl karşılıyorduk yani ekran çözünürlüğü değişimlerini nasıl algılıyorduk. Aslında her web geliştiricinin farklı sebeplerden ihtiyaç duyduğu yöntemlerden biri olan window.resize olayının dinlenmesi ve en ufak pixel değişiminde bile tetiklenmesi sonucu işlemlerimizi bu resize olayı içerisinde yapıyorduk. Bu işlemde eğer belli kontroller sağlamadığınızda ciddi performans sorununa ve hatta yaptığınız işlemin boyutuna göre tarayıcının kilitlenmesine ve cevap vermemesine kadar sorunlara yol açabiliyoruz. Sorunun ortaya çıkış sebebini özetlersek pencere boyutunda her bir pixel değişimi sonrası resize olayı tetiklendiğinden tarayıcı genişliğinden 200px bir küçültme sağladığınızda 200 defa resize olayının tetiklenmesini sağlıyorsunuz. Peki resize olayını nasıl kullanıyorduk hemen ona göz atalım.
1 2 3 4 5 6 7 8 9 10 | function resizeKontrolu() { // Eğer window genişliği 768px üstü ise kurala uyguduğunu varsayıyoruz. if (window.innerWidth > 768) { // Kurala uyduktan sonra yapacağımız işlemler console.log('Kural sağlandı!') } } // window nesnesi yani pencerede yaşanacak boyut değişikliklerinin diinlenmesini sağlıyoruz window.addEventListener('resize', resizeKontrolu); |
Bu fazladan tetiklenme sorunu matchMedia ile kullandığımızda bir sorun teşkil etmiyor mu? Hayır sorun teşkil etmiyor çünkü belirttiğimiz fonksiyonun sadece kurala uyduğunda 1 defa çalışmasını sağlıyor. Tekrar çalışması ancak kural dışına çıkıp sonrasında kurala uyması için gerekli çözünürlük değişimini yaptığınızda mümkün oluyor. resize olayı ve matchMedia konusunu gif olarak altta canlı canlı sonucunu görebilirsiniz. Her iki örnekte de console çıktısına dikkat edin lütfen.
Demolar
matchMedia Demo
resize Olayı Demo
Her iki demo sonucunda da görüldüğü üzere matchMedia örneğinde belirlediğimiz fonksiyonun 1 defa çalıştığını ama resize olayında 112px büyütme ve küçültme işlemlerimiz sonucu ilgili fonksiyonun çalışması sağlandı aslında 112 değil belki 300-400 defa çalıştı fakat if kontrolü ile 768px ve üstünde ilgili kodlarımız çalışsın dediğimiz için ben 112 sayısını dikkate alıyorum ama bir if kontrolümüz olmasaydı ve her resize değişiminde ilgili kodlarımız çalışsaydı 300-400 defa çalışacaktı. Bu durum da ciddi performans sorunlarına yol açacaktır. Resize kullanmadan önce bir daha düşünün 😵
Yukarıdaki demo kodlarımız ise şu şekildedir.
Demo Örnek Kodları
resize
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> function checkMediaQuery() { // If the inner width of the window is greater then 768px if (window.innerWidth > 768) { // Then log this message to the console console.log("Media Query Matched!"); } } // Add a listener for when the window resizes window.addEventListener("resize", checkMediaQuery); </script> </head> <body> <h1>resize olayı Örnek Kullanımı ve Sonucu</h1> </body> </html> |
matchMedia
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> // Eğer viewport 768px ve üstü olduğunda handleTableChange adlı fonksiyonun çalışmasını sağlıyoruz. const mediaQuery = window.matchMedia("(min-width: 768px)"); function tabletDegisiminiAlgila(e) { // Kural kontrolünü yapıyoruz if (e.matches) { // Eğer kuralımız olumlu ile yapacağımız işlemleri burada yapıyoruz. console.log("Media Query Kuralımız Eşleşti!"); } } // Ekran çözünürlüğü değişimlerini dinlemek için addListener fonksiyonu ile register işlemini yapıyoruz. mediaQuery.addListener(tabletDegisiminiAlgila); // İlk kontrolü manual yapıyoruz tabletDegisiminiAlgila(mediaQuery); </script> </head> <body> <h1>matchMedia Örnek Kullanımı ve Sonucu</h1> </body> </html> |
Tarayıcı Desteği ✅
📚 Benzer Makaleler
- CSS Uppercase Türkçe Karakter Problemi
- Internet Explorer 6-7-8 Sürümlerine HTML5 Ve Responsive Media Query Özelliği Kazandırma
✍ Lütfen Javascript Media Query Nedir ve Nasıl Kullanılır? makalesi ile ilgili olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından Javascript Media Query Nedir ve Nasıl Kullanılır? makalesini paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
1 Response
[…] Javascript Media Query Nedir ve Nasıl Kullanılır? […]