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

Una Kravets

Gerald Monaco

Kueri penampung telah hadir!

Kabar gembira—salah satu fitur developer yang paling banyak diminta kini mulai hadir di browser web! Mulai dari Chromium 105 dan Safari 16, Anda kini dapat membuat kueri container berbasis ukuran dan menggunakan nilai unit kueri penampung di browser ini. Untuk semakin mempermudah penggunaan kueri penampung berbasis ukuran dan unit cq, tim Aurora di Chrome telah bekerja keras memperbarui Polyfill Kueri Container untuk mendukung lebih banyak browser dan kasus penggunaan sehingga Anda dapat merasa yakin menggunakan fitur canggih ini saat ini.

Apa itu kueri penampung?

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 untuk ukuran induk. Ini adalah informasi yang jauh lebih terperinci dan berguna daripada kueri media yang hanya memberikan informasi ukuran tentang area pandang.

Dengan kueri penampung, 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 kode HTML:

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

Untuk menggunakan kueri penampung, Anda harus terlebih dahulu 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 dapat beralih 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 container lebih bermanfaat, Anda juga dapat menggunakan nilai unit berbasis container. Tabel berikut menunjukkan kemungkinan nilai unit penampung dan bagaimana nilai tersebut sesuai dengan ukuran penampung:

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

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

Kode ini akan membuat ukuran font menjadi 15% dari ukuran inline container, artinya ukuran akan semakin besar saat ukuran inline (lebar) bertambah, atau semakin kecil saat ukurannya berkurang. Untuk melangkah lebih jauh, gunakan fungsi clamp() untuk memberikan batas ukuran minimum dan maksimum pada tipografi, lalu tentukan ukurannya secara responsif berdasarkan ukuran penampung:

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

Header tidak akan pernah menjadi lebih besar dari 3rem atau lebih kecil dari .5rem, tetapi akan memerlukan 15% ukuran inline penampung di mana saja.

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

Polyfill kueri container

Karena kueri penampung adalah fitur yang hebat, kami ingin Anda dapat merasa nyaman memasukkannya ke dalam project Anda, dan mengetahui bahwa dukungan browser adalah bagian penting dari hal itu. Oleh karena itu, kami berupaya melakukan peningkatan pada Polyfill Kueri Container. Polyfill ini memiliki dukungan umum di:

• Firefox 69+
• Chrome 79+
• Edge 79+
• Safari 13.4+

Ukurannya di bawah 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 berdasarkan User-Agent secara bersyarat, atau menghostingnya sendiri di origin Anda sendiri.

Untuk pengalaman pengguna terbaik, sebaiknya pada awalnya Anda hanya menggunakan polyfill untuk konten paruh bawah dan menggunakan kueri @supports untuk menggantinya sementara dengan indikator pemuatan hingga polyfill siap untuk 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 penampung, indikator pemuatan ini tidak akan pernah ditampilkan.

Fitur Polyfill Baru

Polyfill yang diperbarui mendukung:

• Aturan @container bertingkat.
• Aturan @container yang disusun bertingkat pada kueri @supports dan @media dan sebaliknya didukung.
• CSS bersyarat seperti @supports (container-type: inline-size) akan diteruskan setelah polyfill dimuat.
• Dukungan sintaksis CSS penuh (tidak ada lagi masalah dengan menempatkan komentar di mana pun yang sintaksisnya valid secara sintaksis).
• Mode penulisan vertikal (melalui mode tulis).
• Unit Relatif Container (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 pseudo 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 benar 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 Container (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 origin yang sama. Stylesheet lintas origin dan stylesheet di iframe (kecuali jika 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 dimuat secara sinkron, hanya saja polyfill akan mencoba menghindari penundaan LCP yang tidak wajar. Dengan kata lain, Anda tidak boleh mengandalkannya untuk cat pertama.
• Menghasilkan ResizeObserver Loop Errors. Polyfill asli juga melakukan hal ini, tetapi perlu diperhatikan. Hal ini terjadi karena ukuran blok container-type: inline-size kemungkinan akan berubah setelah mengevaluasi kueri, tetapi ResizeObserver tidak dapat memberitahukan bahwa kita tidak peduli dengan perubahan ukuran blok.
• Polyfill ini diuji terhadap Web Platform Test dan mencapai 70% lulus karena fitur tertentu seperti JavaScript API tidak di-polyfill, sehingga kecepatan pass sengaja mendekati 70%.
• Solusi :where() diperlukan untuk 2,23% pengguna browser yang lebih lama dari:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78