Duyarlı web tasarımı olduğundan beri, geliştiriciler DOM öğelerini tarayıcıdaki görüntü alanının boyutuna ( medya sorgularının yardımıyla) göre değil, gerçek boyutlarına göre tasarlama olasılığını soruyorlar. Aslında, kapsayıcı sorguları (başlangıçta öğe sorguları) muhtemelen tarayıcıların hala sahip olmadığı en çok istenen CSS işlevidir.
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ın kullanımı, özellikle bindirmeler, açılır pencereler, kenar çubukları veya özel öğelerdeki öğeler için faydalıdır - şimdi bile, örneğin yukarıdaki komut dosyasıyla.