Kapsayıcı sorguları ve :has(), duyarlı cennette yapılan bir eşleşmedir. Neyse ki bu özelliklerin ikisi de Chromium 105'te birlikte geliyor. Bu, duyarlı arayüzler için yoğun talep gören iki özelliğe sahip büyük bir sürümdür.
Kapsayıcı Sorguları: kısa bir özet
Kapsayıcı sorguları, geliştiricilerin boyut ve stil bilgileri için bir üst seçiciyi sorgulamalarına olanak tanır. Böylece, bir alt öğe, web sayfasının neresinde olursa olsun duyarlı stil mantığına sahip olabilir.
Geliştiriciler artık kullanılabilir alan gibi stil özellikleri için görüntü alanına güvenmek yerine sayfa içi öğelerin boyutunu sorgulayabilirler. Bu özellik, bir bileşenin duyarlı stil mantığına sahip olduğu anlamına gelir. Bu, sayfanın neresinde görünürse görünsün bileşene stil mantığı bağlı olduğundan bileşeni çok daha dayanıklı hale getirir.
Kapsayıcı sorgularını kullanma
Kapsayıcı sorgularıyla derlemek için önce kapsayıcıyı bir üst öğede ayarlamanız gerekir. Bunu, üst kapsayıcıda bir container-type ayarlayarak yapın. Aşağıdaki gibi görünen bir resim ve metin içeriği içeren bir kartınız olabilir:
Kapsayıcı sorgusu oluşturmak için kart kapsayıcısında container-type değerini ayarlayın:
.card-container {
container-type: inline-size;
}
container-type değerinin inline-size olarak ayarlanması, üst öğenin satır içi boyutunu sorgular. İngilizce gibi Latin dillerinde metin, satır içinde soldan sağa doğru ilerlediğinden bu, kartın genişliğidir.
Artık bu kapsayıcıyı, @container kullanarak alt öğelerden herhangi birine stil uygulamak için kullanabiliriz:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
:has() üst seçicisi
CSS :has() sözde sınıfı, geliştiricilerin bir üst öğenin belirli parametrelere sahip alt öğeler içerip içermediğini kontrol etmesine olanak tanır.
Örneğin p:has(span), içinde span bulunan bir paragraf (p) seçiciyi gösterir. Üst paragrafın stilini belirlemek veya içindeki herhangi bir öğeyi biçimlendirmek için bunu kullanabilirsiniz. Başlık içeren bir figure öğesini biçimlendirmek için figure:has(figcaption) kullanışlı bir örnektir. :has() hakkında daha fazla bilgiye Jhey Tompkins tarafından hazırlanan bu makalede ulaşabilirsiniz.
Kapsayıcı sorguları ve :has()
Gerçekten dinamik bazı doğal stiller oluşturmak için :has() öğesinin üst seçim güçlerini, kapsayıcı sorgularının üst sorgulama güçleriyle birleştirebilirsiniz.
İlk örneği roket kartı ile açıklayalım. Resimsiz bir kartınız olsaydı ne olurdu? Başlık boyutunu artırmak ve ızgara düzenini resim olmadan daha bilinçli görünmesi için tek sütuna ayarlamak isteyebilirsiniz.
Bu örnekte, resim içeren kart iki sütunlu bir ızgara şablonuna sahipken resim içermeyen kart tek sütunlu bir düzene sahiptir. Ayrıca, resim içermeyen kartın başlığı daha büyüktür. Bunu :has() kullanarak yazmak için aşağıdaki CSS'yi kullanın.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Yukarıdaki iki sütunlu stili uygulamak için visual sınıfına sahip bir öğe arıyorsunuz. Diğer bir kullanışlı CSS işlevi de :not(). Bu, :has() ile aynı spesifikasyonun bir parçasıdır, ancak çok daha uzun süredir kullanılıyor ve daha iyi tarayıcı desteğine sahip. :has() ile :not() değerlerini bile birleştirebilirsiniz. Örneğin:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Yukarıdaki kodda, visual sınıfı içermeyen bir kartta h1 stilini gösteren bir seçici yazıyorsunuz. Yazı tipi boyutunu net bir şekilde bu şekilde ayarlayabilirsiniz.
Özet
Yukarıdaki demoda :has(), :not() ve @container kombinasyonu gösterilmektedir. Ancak aynı öğenin birden fazla yerde kullanıldığını gördüğünüzde kapsayıcı sorguları gerçekten daha iyi sonuç verecektir. Şimdi biraz stil ekleyelim ve bu kartları birlikte bir ızgarada gösterelim.
Artık modern CSS'nin gücünü gerçekten görebilirsiniz. Mantığın üstüne mantık ekleyen ve son derece sağlam bileşenler oluşturan, hedeflenmiş stiller kullanarak net stiller yazabiliyoruz. Chromium 105'te kullanıma sunulan bu iki güçlü özellik ve tarayıcılar arası destekte ivme kazanmasıyla, kullanıcı arayüzü geliştiricisi olmanın tam zamanı!