Duyarlı web tasarımının ortaya çıkışından bu yana, geliştiriciler DOM öğelerini tarayıcı görüntüleme alanı boyutuna göre değil, gerçek boyutlarına göre biçimlendirme yeteneği ( medya sorguları kullanarak) talep ediyorlar. Aslında, kapsayıcı sorguları (başlangıçta öğe sorguları), tarayıcıların hala sahip olmadığı en çok talep edilen CSS özelliğidir.
Kapsayıcı sorgularının CSS'de uygulanmasının neden zor olduğunu ve tarayıcı üreticilerinin bunları uygulamakta neden tereddüt ettiğini tam olarak açıklayan çok , çok , çok sayıda gönderi var. Şimdi tadını çıkarmak istiyorsanız, biraz JavaScript yardımcı olabilir:
c51c33e1533e68c3f8fd24633700789f
O zaman her şey böyle görünüyor:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Kesme noktaları , seçici ve stil nitelikleri, çeşitli kesme noktalarını, otomatik seçiciyi ve eklenen sınıfların türünü tanımlamak için kullanılabilir. Eğer script kullanıyorsanız yeni oluşturulan sınıfları aşağıdaki gibi adresleyebilirsiniz.:
c51c33e1533e68c3f8fd24633700789f
Kapsayıcı sorguların kullanımı özellikle kaplamalardaki, açılır pencerelerdeki, kenar çubuklarındaki veya özel öğelerdeki öğeler için (örneğin, yukarıdaki komut dosyasıyla şimdi bile) faydalıdır.