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. Stil mantığı sayfanın neresinde görünürse görünsün ona bağlı olduğundan bu yöntem 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 makaleden 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.
Tüm unsurların birleşimi
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 dikkat çeker. Ş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ı!