Kueri container mulai ditempatkan di browser stabil sementara polyfill mendapatkan update besar

Una Kravets

Gerald Monaco

Kueri container telah hadir.

Kabar gembira—salah satu fitur developer yang paling banyak diminta telah mulai tersedia di browser web! Mulai Chromium 105 dan Safari 16, sekarang Anda dapat membuat kueri container berbasis ukuran dan menggunakan nilai unit kueri container dalam browser ini. Untuk mempermudah penggunaan kueri penampung berbasis ukuran dan unit cq, tim Aurora di Chrome berupaya keras memperbarui Polyfill Kueri Penampung untuk mendukung lebih banyak browser dan kasus penggunaan sehingga Anda dapat merasa percaya diri menggunakan fitur canggih ini sekarang.

Apa itu kueri container?

Kueri penampung adalah fitur CSS yang memungkinkan Anda menulis logika gaya visual yang menargetkan fitur elemen induk untuk menata gaya turunannya. Anda dapat membuat desain responsif yang benar-benar berbasis komponen dengan membuat kueri ukuran induk. Ini merupakan informasi yang jauh lebih terperinci dan berguna daripada sesuatu seperti kueri media yang hanya memberikan informasi ukuran tentang area tampilan.

Dengan kueri container, Anda dapat menulis komponen yang dapat digunakan kembali yang dapat muncul secara berbeda berdasarkan tempat komponen tersebut berada di halaman. Hal ini membuatnya jauh lebih tangguh dan responsif di seluruh halaman dan template.

Menggunakan kueri penampung

Misalnya Anda memiliki beberapa HTML:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

Untuk menggunakan kueri penampung, pertama Anda harus menetapkan pembatasan pada elemen induk yang ingin dilacak. Lakukan hal ini dengan menetapkan properti container-type, atau menggunakan singkatan container untuk menetapkan jenis penampung dan nama penampung secara bersamaan.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

Sekarang, Anda dapat menggunakan aturan @container untuk menetapkan gaya berdasarkan induk terdekat. Untuk desain seperti gambar di atas, di mana kartu mungkin berpindah dari satu kolom ke dua kolom, tulis sesuatu seperti:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

Agar lebih rapi dan eksplisit, beri nama penampung elemen induk:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

Kemudian tulis ulang kode sebelumnya sebagai:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Unit kueri penampung

Agar kueri penampung lebih berguna, Anda juga dapat menggunakan nilai unit berbasis penampung. Tabel berikut menunjukkan kemungkinan nilai unit penampung dan bagaimana nilai tersebut sesuai dengan ukuran penampung:

Salah satu contoh cara menggunakan unit berbasis container adalah tipografi responsif. Unit berbasis area pandang (seperti vh, vb, vw, dan vi) dapat digunakan untuk mengukur elemen apa pun di layar.

.card h2 {
  font-size: 15cqi;
}

Kode ini akan membuat ukuran font 15% dari ukuran inline container, yang berarti akan semakin besar saat ukuran inline (lebar) bertambah, atau semakin kecil seiring berkurangnya. Untuk lebih jauh lagi, gunakan fungsi clamp() untuk memberi tipografi Anda batas ukuran minimum dan maksimum, dan menentukan ukurannya secara responsif berdasarkan ukuran container:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

Sekarang header tidak akan pernah menjadi lebih besar dari 3rem atau lebih kecil dari .5rem, tetapi akan memakan 15% ukuran inline container.

Demo ini mengambil langkah lebih jauh dan memperbarui kartu yang lebih lebar agar memiliki rentang ukuran yang lebih kecil, karena kartu tersebut disajikan dalam tampilan 2 kolom.

Polyfill kueri container

Karena kueri container merupakan fitur yang sangat canggih, kami ingin Anda merasa nyaman saat menerapkannya ke dalam project Anda, dan mengetahui bahwa dukungan browser adalah bagian penting dari kueri tersebut. Oleh karena itu, kami terus berupaya melakukan peningkatan pada Polyfill Kueri Penampung. Polyfill ini memiliki dukungan umum dalam:

• Firefox 69+
• Chrome 79 dan yang lebih baru
• Edge 79 dan yang lebih baru
• Safari 13.4+

Ukurannya kurang dari 9 kb saat dikompresi, dan menggunakan ResizeObserver dengan MutationObserver untuk mendukung sintaksis kueri @container lengkap yang saat ini tersedia di browser stabil:

• Kueri diskret (width: 300px dan min-width: 300px).
• Kueri rentang (200px < width < 400px dan width < 400px).
• Unit panjang relatif penampung (cqw, cqh, cqi, cqb, cqmin, dancqmax) dalam properti dan keyframe.

Menggunakan polyfill kueri container

Untuk menggunakan polyfill, tambahkan tag skrip ini ke bagian head dokumen Anda: :

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

Anda juga dapat menggunakan layanan untuk mengirimkan polyfill secara kondisional berdasarkan User-Agent, atau menghostingnya sendiri di asal Anda sendiri.

Untuk pengalaman pengguna terbaik, sebaiknya Anda pada awalnya hanya menggunakan polyfill untuk konten paruh bawah dan menggunakan kueri @supports untuk menggantinya sementara dengan indikator pemuatan hingga polyfill siap menampilkannya:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

Pada jaringan dan perangkat yang cukup cepat, atau perangkat yang secara native mendukung kueri container, indikator pemuatan ini tidak akan pernah ditampilkan.

Fitur Polyfill Baru

Polyfill yang diperbarui mendukung:

• Aturan @container bertingkat.
• Mendukung aturan @container bertingkat dalam kueri @supports dan @media dan sebaliknya.
• CSS bersyarat seperti @supports (container-type: inline-size) akan diteruskan setelah polyfill dimuat.
• Dukungan sintaksis CSS penuh (tidak ada lagi masalah terkait penempatan komentar di mana pun komentar tersebut valid secara sintaksis).
• Mode penulisan vertikal (melalui mode tulis).
• Unit Relatif Penampung (cqw, cqh, dll.) didukung dalam kondisi kueri, deklarasi properti, dan keyframe animasi. rem dan em didukung dalam kondisi kueri.
• Sintaksis kueri penampung yang diperluas:
  • Sintaksis rentang (misalnya, (200px < width < 400px)).
  • Kueri kesetaraan (misalnya, (width = 200px)).
• Elemen semu seperti ::before dan ::after.
• Browser tanpa :is(...)/:where(...) didukung melalui solusi opsional
• Kueri fitur orientation dan aspect-ratio.
• Memfilter kueri dengan benar berdasarkan fitur (misalnya, membuat kueri height di container: inline-size tidak diizinkan dengan mode penulisan horizontal).
• Mutasi DOM (misalnya, elemen <style> dan <link> dihapus saat runtime).

Batasan dan peringatan Polyfill

Jika Anda menggunakan polyfill kueri container, ada beberapa fitur yang hilang yang harus diperhatikan:

• Shadow DOM belum didukung.
• Unit Relatif Penampung (misalnya, cqw dan cqh) tidak didukung dalam kondisi kueri @media.
  • Safari: Unit Relatif Container tidak didukung dalam keyframe animasi sebelum 15.4.
• calc(), min(), max(), atau fungsi matematika lainnya belum didukung dalam kondisi kueri.
• Polyfill ini hanya berfungsi dengan CSS inline dan CSS yang sama. Stylesheet lintas origin, dan stylesheet dalam iframe (kecuali polyfill dimuat secara manual) tidak didukung.
• Pembatasan layout dan style memerlukan dukungan browser dasar:
  • Safari 15.4+
  • Saat ini Firefox tidak mendukung pembatasan gaya, tetapi sedang mengerjakannya.

Peringatan

• Agar tidak memengaruhi FID dan CLS, polyfill tidak memberikan jaminan tentang kapan tata letak pertama akan terjadi, meskipun tata letak dimuat secara sinkron, kecuali bahwa tata letak tersebut akan mencoba menghindari penundaan LCP secara tidak wajar. Dengan kata lain, Anda tidak boleh mengandalkannya untuk cat pertama.
• Menghasilkan ResizeObserver Loop Errors. Polyfill asli juga melakukan hal ini, tetapi layak untuk disoroti. Hal ini terjadi karena ukuran blok container-type: inline-size kemungkinan akan berubah setelah mengevaluasi kueri, tetapi ResizeObserver tidak dapat memastikan bahwa kita tidak peduli dengan perubahan ukuran blok.
• Polyfill ini diuji terhadap Pengujian Platform Web dan mencapai 70% lulus karena fitur tertentu seperti JavaScript API tidak di-polyfill, sehingga tingkat kelulusan sengaja mendekati 70%.
• Solusi :where() diperlukan untuk 2,23% pengguna browser yang berusia lebih dari:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78