Kapsayıcı sorguları

Medya sorgularıyla, düzenleri görüntü alanının boyutuna veya kullanılan cihazın türüne göre ayarlayabilirsiniz. Kapsayıcı sorguları, öğelerde atalarının veya kapsayıcılarının boyutuna ve durumuna göre daha ayrıntılı ayarlamalar yapmanıza olanak tanır.

Sitenizde çeşitli bağlamlarda kullanılmak üzere tasarlanmış bir bülten kayıt formu olduğunu düşünün. Bir kayıt sayfasında sayfanın tam genişliğini kaplamasını, diğer içeriklerin bulunduğu bir sayfada ise bölünmüş bir sütuna gitmesini isteyebilirsiniz.

Bu demoda gösterildiği gibi, kapsayıcı sorgularıyla öğenin özelliklerini (ör. yazı tipi boyutu, dolgu ve düzen) en yakın kapsayıcısının özelliklerine göre, görüntü alanı boyutundan bağımsız olarak ayarlayabilirsiniz.

Kapsayıcı sorgusu oluşturma

Medya sorgularının aksine, kapsayıcı sorguları iki bölümden oluşur:

1. Kapsayıcı tanımlayın.
2. Bir üst kapsayıcı, sorgunun koşullarıyla eşleştiğinde uygulanacak bir alt öğe için stil yazın.

Kapsayıcı tanımlama

container-type özelliğini kullanarak bir kapsayıcı tanımlayabilirsiniz.

.my-container-element {
  container-type: inline-size;
}

inline-size container-type, kapsayıcının satır içi eksenini sorgulamanıza olanak tanır.

Hem inline hem de block eksenlerine karşı sorgu oluşturmak için container-type: size kullanın.

main,
.my-component {
  container-type: size;
}

container-type değerlerinin her ikisi de farklı türlerde boyut sınırlaması uygular. Bir öğedeki Inline-size kapsama, alt öğelerinin satır içi boyutunu etkilemesini önler.

size kapsama özelliğine sahip bir öğe, alt öğelerinin hem blok hem de satır içi eksenlerde boyutunu etkilemesini engeller.

Bu örnekte, boyut sınırlamanın uygulandığı öğeyi etkileyebileceğini görebilirsiniz.

Alt öğelerinin (<p> öğesi) boyutuna göre boyutlandırılmayacağından, boyutları (yani inline-size, block-size, aspect-ratio) ayarlanarak veya açıkça boyutlandırılmış bir düzene yerleştirilerek açık bir boyut verilmediği sürece kapsayıcı daralır.

Kapsayıcı sorgu koşulları

Bir kapsayıcı oluşturulduktan sonra, kapsayıcı sorgusunun içindeki stillerin uygulanması için doğru olması gereken, parantez içine alınmış bir koşul ekleyebilirsiniz. Üst öğelerin boyutlarına dayalı olan kapsayıcı boyutu sorgularında koşul şu öğelerden oluşur:

• Beden özelliği: width, height, inline-size, block-size, aspect-ratio veya orientation,
• bir karşılaştırma operatörü (ör. >, <, =, >=),
• ve uzunluk değeri.

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

Boyut özelliği koşulları, test edilecek tek bir değer ve iki nokta üst üste işaretiyle de yazılabilir.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

Ayrıca, and ve or gibi anahtar kelimeler kullanarak veya operatörlerle birden fazla koşulu birbirine bağlayarak da koşulları birleştirebilirsiniz.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

Kapsayıcıları adlandırma

En yakın üst öğe olmasalar bile belirli kapsayıcıları hedeflemek için kapsayıcılara container-name özelliğiyle ad verebilirsiniz. Ardından, koşullarınızı tanımlamadan önce sorgulamak istediğiniz kapsayıcı adına başvurabilirsiniz.

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

Adlandırılmış kapsayıcı, stil verilen öğelerin üst öğesi olmaya devam etmelidir.

container özelliğiyle kısa biçimi kullanma

container özelliği, hem kapsayıcıyı tanımlamak hem de kapsayıcı türünü belirtmek için kısa bir söz dizimi kullanmanıza olanak tanır.

.sidebar {
  container: main-sidebar / inline-size;
}

Kapsayıcının adı eğik çizgiden önce, kapsayıcının türü ise sonra gelir.

Kapsayıcı sorgu birimleri

Kapsayıcılarda, kapsayıcı göreceli uzunluk birimlerine de erişebilirsiniz. Bu sayede, göreli uzunluklar kapsayıcının boyutlarına göre ayarlanacağından farklı kapsayıcılarda bulunabilen bileşenler için daha fazla esneklik sağlanır.

Burada, düğmenin dolgusu için kapsayıcı uzunluğu birimi cqi (sorgu kapsayıcısının satır içi boyutunun% 1'i) kullanılıyor.

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

Her iki düğmeye de aynı göreli birimler uygulanır. Ancak birimler kapsayıcının boyutuna göreli olduğundan, ikinci düğme daha büyük kapsayıcısı nedeniyle daha fazla dolguya sahiptir.

Kapsayıcı sorgularını iç içe yerleştirme

Kapsayıcı sorgularını seçicilerin içine yerleştirebilirsiniz.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

Veya bunları diğer kapsayıcı sorgularının ya da @ kurallarının içine yerleştirebilirsiniz.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

Anlayıp anlamadığınızı kontrol etme