"Enter"a basıp içeriğe geçin

Javascript Media Query Nedir ve Nasıl Kullanılır?

Last updated on 23 Ekim 2020

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?

Javascript Ortamında Media Query ile Çalışma 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? 🧐

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.

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.

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.

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.

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

Javascript matchMedia Demo

resize Olayı Demo

Javascript resize 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

matchMedia


Tarayıcı Desteği


📚 Benzer Makaleler


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.

İlk Yorumu Siz Yapın

    Bir Cevap Yazın

    %d blogcu bunu beğendi: