CSS @container kuralı

Tanım ve kullanım

CSS @container Kural, konteynerın boyutu veya stili için diğer elementlere stil tanımlamak için kullanılır.

Stil ifadeleri, koşullara göre filtrelenir. Koşul doğruysa, konteynara uygulanır. Konteynerın boyutu veya stil değerleri değiştiğinde, koşul yeniden değerlendirilir.

İpucu：CSS'te, konteyner, diğer elementleri gruplamak ve stil uygulamak için kullanılan bir elementtir.

Örnek

其他元素的大小或样式 için stil tanımlayın：

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* myContainer genişliği 500px'den küçükse stiller ekleyin */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

Kişisel olarak deneyin

CSS dilbilgisi

@container containername (containerquery) {
  css declarations
}

属性值

Tarayıcı desteği

Tablo içindeki rakamlar, bu @ kuralıyı tam olarak destekleyen ilk tarayıcı sürümünü gösterir.