@container ve :has(): Chromium 105'e çıkan iki güçlü yeni ve duyarlı API

Una Kravets

Kapsayıcı sorguları ve :has() işlevi, duyarlılığın zirvesinde bir eşleşmedir. Neyse ki bu iki özellik de Chromium 105'te birlikte kullanıma sunuluyor. Bu, duyarlı arayüzler için çok istenen iki özelliğin yer aldığı büyük bir sürümdür.

Container Sorguları: kısa bir özet

Kapsayıcı sorguları, geliştiricilerin bir üst öğe seçiciyi boyut ve stil bilgileri için sorgulamasına olanak tanır. Böylece, bir alt öğe, web sayfasında nerede olursa olsun duyarlı stil mantığının sahibi olabilir.

Geliştiriciler artık kullanılabilir alan gibi stil girişleri için görüntü alanına güvenmek yerine sayfa içi öğelerin boyutunu da sorgulayabilir. Bu özellik, 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 oluşturmak için önce bir üst öğede kapsayıcıyı ayarlamanız gerekir. Bunu, üst kapsayıcıya bir container-type ayarlayarak yapabilirsiniz. Aşağıdaki gibi görünen bir resim ve metin içeriği içeren bir kartınız olabilir:

Tek sütunlu iki kart.

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 soldan sağa doğru satır içi olarak aktığı için bu, kartın genişliği olur.

Artık bu kapsayıcıyı kullanarak @container ile alt öğelerinden herhangi birine stil uygulayabiliriz:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}
göz atın.

: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. Bunu, üst paragrafın kendisini biçimlendirmek için veya içindeki herhangi bir öğeyi biçimlendirmek için kullanabilirsiniz. Altyazı içeren bir figure öğesine stil uygulamak için figure:has(figcaption) kullanabilirsiniz. :has() hakkında daha fazla bilgiyi Jhey Tompkins'in bu makalesinde bulabilirsiniz.

Container sorguları ve :has()

Gerçekten dinamik bazı doğal stiller oluşturmak için :has()'ün üst öğe seçim özelliklerini kapsayıcı sorgularının üst öğe sorgulama özellikleriyle birleştirebilirsiniz.

Roket kartını içeren ilk örneği daha ayrıntılı inceleyelim. Kartınızda resim yoksa ne olur? Resim olmadan daha amaçlı görünmesi için başlığın boyutunu büyütebilir ve ızgara düzenini tek sütunlu olarak ayarlayabilirsiniz.

Kartta resim olmadan daha büyük metin ve sütun halinde gösterilir.

Bu örnekte, resimli kartın iki sütunlu bir ızgara şablonu, resimsiz kartın ise tek sütunlu bir düzeni vardır. Ayrıca, resim içermeyen kartta daha büyük bir başlık bulunur. 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. :not() de kullanışlı bir CSS işlevidir. Bu, :has() ile aynı spesifikasyonun bir parçasıdır ancak çok daha uzun süredir kullanılmaktadır ve daha iyi tarayıcı desteğine sahiptir. Hatta :has() ve :not()'yi aşağıdaki gibi birleştirebilirsiniz:

.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. Bu sayede yazı tipi boyutunu ç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 işe yarar. Bu kartlara biraz stil katıp yan yana bir ızgara içinde gösterelim.

adlı kaleme bakın.

Artık modern CSS'nin gücünü gerçekten görebilirsiniz. Mantığın üzerine mantık kuran ve gerçekten sağlam bileşenler oluşturan hedeflenmiş stiller kullanarak net stiller yazabiliriz. Bu iki güçlü özelliğin Chromium 105'te kullanıma sunulması ve tarayıcılar arası destek momentumu kazanması, kullanıcı arayüzü geliştiricisi olmak için çok heyecan verici bir zaman.