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

Una Kravets

Gerald Monaco

Kueri container telah hadir.

Kabar menarik—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 telah bekerja keras untuk mengupdate Polyfill Kueri Penampung guna mendukung lebih banyak browser dan kasus penggunaan sehingga Anda dapat merasa yakin menggunakan fitur canggih ini sekarang.

Catatan: Kueri container adalah bagian dari spesifikasi css-contain-3. Spesifikasi ini mencakup nilai unit baru serta jenis penampung ukuran dan gaya, meskipun browser awalnya diluncurkan hanya dengan dukungan pembatasan ukuran. Oleh karena itu, kita akan berfokus pada pembatasan ukuran dalam artikel ini.

Apa yang dimaksud dengan kueri penampung?

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

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 membuat aplikasi menjadi 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, Anda harus menetapkan pembatasan pada elemen induk yang ingin dilacak terlebih dahulu. Lakukan 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, dengan kartu yang 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:

satuan	dibandingkan dengan
cqw	1% dari lebar penampung kueri
cqh	1% dari tinggi penampung kueri
cqi	1% dari ukuran inline penampung kueri
cqb	1% dari ukuran blok penampung kueri
cqmin	Nilai cqi atau cqb yang lebih kecil
cqmax	Nilai cqi atau cqb yang lebih besar

Salah satu contoh cara menggunakan unit berbasis penampung adalah tipografi responsif. Unit berbasis tampilan yang terlihat (seperti vh, vb, vw, dan vi) dapat digunakan untuk menentukan ukuran 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 meningkatkannya, gunakan fungsi clamp() untuk memberi tipografi Anda batas ukuran minimum dan maksimum, dan ukurannya secara responsif berdasarkan ukuran penampung:

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

Sekarang header tidak akan pernah lebih besar dari 3rem atau lebih kecil dari .5rem, tetapi akan menggunakan 15% ukuran inline penampung di antara keduanya.

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

Polyfill kueri penampung

Karena kueri penampung adalah fitur yang sangat canggih, kami ingin Anda merasa nyaman untuk menggabungkannya ke dalam project Anda, dan mengetahui bahwa dukungan browser adalah bagian besar dari hal tersebut. Oleh karena itu, kami telah berupaya meningkatkan Polyfill Kueri Penampung. Polyfill ini memiliki dukungan umum dalam:

• Firefox 69+
• Chrome 79 dan yang lebih baru
• Edge 79+
• 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).
• Satuan 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 bersyarat berdasarkan User-Agent, atau menghostingnya sendiri di origin Anda sendiri.

Catatan: Semua browser memiliki dukungan untuk kueri penampung yang dirilis atau ada dalam roadmap mereka, jadi sebaiknya Anda tidak menggabungkan polyfill dengan kode lainnya.

Untuk pengalaman pengguna yang terbaik, sebaiknya Anda awalnya hanya menggunakan polyfill untuk konten di bawah lipatan 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.

Catatan: Perlu diingat bahwa teknik ini secara efektif menukar LCP dengan lebih sedikit jank selama pemuatan awal, sehingga Anda mungkin melihat regresi pada yang pertama, terutama di perangkat kelas bawah.

Fitur Polyfill Baru

Polyfill yang diperbarui mendukung:

• Aturan @container bertingkat.
• Menempatkan aturan @container dalam kueri @supports dan @media, dan sebaliknya, didukung.
• CSS bersyarat seperti @supports (container-type: inline-size) akan lulus 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 writing-mode).
• 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).

Catatan: Polyfill kueri penampung yang diperbarui tidak lagi mendukung sintaksis kueri ukuran lama yang sudah tidak digunakan lagi, yang mengharuskan pengguna menggabungkan kueri ukuran dalam size() (yaitu size(width >= 200px)).

Batasan dan peringatan Polyfill

Jika Anda menggunakan polyfill kueri penampung, ada beberapa fitur yang tidak ada yang perlu 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 dengan origin yang sama. Stylesheet lintas origin, dan stylesheet dalam iframe (kecuali jika polyfill dimuat secara manual) tidak didukung.
• Pembatasan layout dan style memerlukan dukungan browser dasar:
  • Safari 15.4+
  • Firefox saat ini tidak mendukung pembatasan gaya, tetapi sedang mengusahakannya.

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 perlu disebutkan. Hal ini terjadi karena ukuran blok container-type: inline-size kemungkinan akan berubah setelah mengevaluasi kueri, tetapi ResizeObserver tidak dapat memberi tahu bahwa kita tidak peduli dengan perubahan ukuran blok.
• Polyfill ini diuji terhadap Pengujian Platform Web dan mencapai 70% kelulusan karena fitur tertentu seperti JavaScript API tidak di-polyfill, sehingga rasio kelulusan sengaja lebih dekat ke 70%.
• Solusi :where() diperlukan untuk 2,23% pengguna browser yang lebih lama dari:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78