Aturan @container CSS

Definisi dan penggunaan

CSS @container Aturan digunakan untuk mendefinisikan gaya untuk elemen lain berdasarkan ukuran atau gaya kontainer.

Deklarasi gaya akan disaring berdasarkan kondisi, dan akan diterapkan jika kondisi ini benar. Kondisi akan diukur kembali jika ukuran atau nilai gaya kontainer berubah.

Panduan:Dalam CSS, kontainer adalah elemen yang mengelilingi elemen lain, digunakan untuk mengelompokkan elemen untuk pengaturan gaya.

Contoh

Definiskan gaya untuk elemen lain berdasarkan ukuran atau gaya kontainer lainnya:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Tambahkan gaya jika lebar myContainer kurang dari 500px */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

Coba sendiri

Sintaks CSS

@container containername (containerquery) {
  deklarasi css
}

Nilai atribut

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang sepenuhnya mendukung @ aturan ini.