Kapsayıcı sorguları ve :has(), duyarlı bir şekilde oluşturulmuş bir eşleşmedir. Neyse ki bu özelliklerin ikisi de Chromium 105'te bir arada kullanıma sunuluyor. Bu, duyarlı arayüzler için çok istenen iki özelliğe sahip büyük bir sürüm!
Kapsayıcı Sorguları: hızlı bir özet
Kapsayıcı sorguları, geliştiricilerin, üst seçiciyi boyut ve stil bilgileri için sorgulamasına olanak tanır. Böylece, bir alt öğenin, web sayfasının neresinde olursa olsun, duyarlı stil mantığına sahip olması mümkün olur.
Geliştiriciler, kullanılabilir alan gibi stil girişleri için görüntü alanına güvenmek yerine artık sayfa içi öğelerin boyutunu da 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, stil mantığı ona bağlı olduğundan bileşeni çok daha esnek hale getirir.
Kapsayıcı sorgularını kullanma
Kapsayıcı sorgularıyla derlemek için önce bir üst öğede kapsayıcılığı ayarlamanız gerekir. Bunu, üst kapsayıcıda bir container-type ayarlayarak yapın. Aşağıdaki gibi görünen resim ve metin içeriği içeren bir kartınız olabilir:
Kapsayıcı sorgusu oluşturmak için kart kapsayıcıda container-type ayarını yapın:
.card-container {
container-type: inline-size;
}
container-type öğesinin inline-size olarak ayarlanması, üst öğenin satır içi yönünü sorgular. İngilizce gibi Latin dillerinde, metin soldan sağa doğru satır içinde aktığı için kartın genişliği bu değerde olur.
Şimdi, bu kapsayıcıyı @container kullanarak alt öğelerine 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çici
CSS :has() sözde sınıfı, geliştiricilerin bir üst öğenin belirli parametrelere sahip alt öğeler içerip içermediğini kontrol etmesini sağlar.
Örneğin p:has(span), içinde span bulunan bir paragraf (p) seçiciyi gösterir. Bunu, üst paragrafın stilini belirlemek veya içindeki herhangi bir öğenin stilini belirlemek için kullanabilirsiniz. Başlık içeren figure öğesinin stilini belirlemek için figure:has(figcaption) yararlı bir örnektir. Jhey Tompkins tarafından hazırlanan bu makalede :has() ile ilgili daha fazla bilgi bulabilirsiniz.
Kapsayıcı sorguları ve :has()
Gerçekten dinamik bazı içsel stiller oluşturmak için :has() öğesinin üst öğe seçme güçlerini kapsayıcı sorgularının üst sorgulama güçleriyle birleştirebilirsiniz.
Roket kartıyla ilk örneği inceleyelim. Resimsiz bir kartınız olsaydı ne olurdu? Belki başlığın boyutunu artırmak ve ızgara düzenini tek sütunlu olacak şekilde ayarlayarak resim olmadan daha kullanışlı bir görünüm elde etmek isteyebilirsiniz.
Bu örnekte, resim içeren kartta iki sütunlu bir ızgara şablonu varken, resim içermeyen kartta tek sütunlu bir düzen vardır. 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. Başka bir düzgün CSS işlevi ise :not(). Bu, :has() ile aynı spesifikasyondadır ancak çok daha uzun süredir kullanılmaktadır ve daha iyi tarayıcı desteğine sahiptir. Aşağıdaki gibi :has() ve :not() özelliklerini de birleştirebilirsiniz:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Yukarıdaki kodda, visual sınıfı içermeyen bir kartta h1 biçimlendiren bir seçici yazıyorsunuz. Yazı tipi boyutunu bu şekilde çok net bir şekilde ayarlayabilirsiniz.
Tüm unsurların birleşimi
Yukarıdaki demoda :has(), :not() ve @container öğelerinin bir kombinasyonu gösterilmektedir ancak kapsayıcı sorguları, aynı öğenin birden fazla yerde kullanıldığını gördüğünüzde gerçekten başarılıdır. Bu kartları biraz da stil ekleyerek bir ızgarada yan yana gösterelim.
Artık modern CSS'nin gücünü gerçekten görebilirsiniz. Mantığa ek olarak mantık geliştiren ve gerçekten sağlam bileşenler oluşturan hedeflenmiş stiller kullanarak net stiller yazabiliyoruz. Chromium 105'te kullanıma sunulan bu iki güçlü özellik ile tarayıcılar arası destek artışıyla birlikte, kullanıcı arayüzü geliştiricisi olmanın tam zamanı.