Kueri penampung

Dengan kueri media, Anda dapat menyesuaikan tata letak berdasarkan ukuran area pandang atau jenis perangkat yang digunakan. Kueri penampung memungkinkan Anda melakukan penyesuaian yang lebih spesifik pada elemen berdasarkan ukuran dan status ancestor, atau penampungnya.

Bayangkan Anda memiliki formulir pendaftaran newsletter yang dimaksudkan untuk digunakan dalam beberapa konteks di situs Anda. Anda mungkin ingin agar tombol tersebut mencakup lebar penuh halaman di halaman pendaftaran, tetapi masuk ke kolom terpisah di halaman dengan konten lain.

Seperti yang ditunjukkan dalam demo ini, dengan kueri penampung, Anda dapat menyesuaikan properti seperti ukuran font, padding, dan tata letak elemen berdasarkan atribut penampung terdekatnya, terlepas dari ukuran area tampilan.

Menyiapkan kueri penampung

Tidak seperti kueri media, kueri penampung ditetapkan dalam dua bagian:

1. Tentukan penampung.
2. Tulis gaya untuk elemen turunan yang akan diterapkan saat penampung induk cocok dengan kondisi kueri.

Menentukan container

Anda dapat menentukan penampung menggunakan properti container-type.

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

container-type inline-size memungkinkan Anda membuat kueri sumbu inline penampung.

Untuk membuat kueri terhadap sumbu inline dan block, gunakan container-type: size.

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

Kedua nilai container-type menerapkan berbagai jenis penampungan ukuran. Pembatasan Inline-size pada elemen mencegah turunannya memengaruhi ukuran sebarisnya.

Elemen dengan penampungan size mencegah turunannya memengaruhi ukurannya di sumbu blok dan inline.

Dalam contoh ini, Anda dapat melihat bahwa penampungan ukuran dapat memengaruhi elemen tempatnya diterapkan.

Karena tidak akan diukur berdasarkan ukuran turunannya (elemen <p>), penampung akan menciut kecuali jika diberi ukuran eksplisit dengan menyetel dimensinya (yaitu, inline-size, block-size, aspect-ratio) atau menempatkannya ke dalam tata letak berukuran eksplisit.

Kondisi kueri penampung

Setelah container dibuat, Anda dapat menambahkan kondisi, yang diapit dalam tanda kurung, yang harus benar agar gaya di dalam kueri container diterapkan. Untuk kueri ukuran penampung, yang didasarkan pada dimensi elemen induk, kondisi terdiri dari berikut ini:

• fitur ukuran: width, height, inline-size, block-size, aspect-ratio, atau orientation,
• operator perbandingan (yaitu, >, <, =, >=),
• dan nilai panjang.

.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 */
  }
}

Kondisi fitur ukuran juga dapat ditulis dengan titik dua dan satu nilai untuk diuji.

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

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

Anda juga dapat menggabungkan beberapa kondisi dengan menggunakan kata kunci seperti and dan or, atau merangkai beberapa kondisi dengan operator.

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

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

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

Memberi nama container

Untuk menargetkan penampung tertentu, meskipun bukan induk terdekat, Anda dapat memberi nama penampung dengan properti container-name. Kemudian, Anda dapat mereferensikan nama penampung yang ingin dikueri sebelum menentukan kondisi.

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

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

Penampung bernama harus tetap menjadi ancestor elemen yang diberi gaya.

Menggunakan singkatan dengan properti container

Properti container memungkinkan Anda menggunakan sintaksis singkat untuk menentukan penampung dan jenis penampung.

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

Nama penampung berada sebelum garis miring dan jenis penampung berada setelahnya.

Unit kueri penampung

Dalam penampung, Anda juga memiliki akses ke unit panjang relatif penampung. Hal ini memberikan lebih banyak fleksibilitas untuk komponen yang dapat ada di berbagai penampung, karena panjang relatif akan disesuaikan bergantung pada dimensi penampung.

Di sini, unit panjang penampung cqi (1% dari ukuran inline penampung kueri) digunakan untuk padding tombol.

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

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

Kedua tombol memiliki satuan relatif yang sama, tetapi karena satuan tersebut relatif terhadap ukuran penampung, tombol kedua memiliki lebih banyak padding karena penampungnya lebih besar.

Menyematkan kueri container

Anda dapat menyarangkan kueri penampung di dalam pemilih.

.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 */
  }
}

Atau, tempatkan di dalam kueri penampung atau aturan @ lainnya.

@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 */
    }
  }
}

Periksa pemahaman Anda