Kueri penampung telah hadir!
Kabar menarik—salah satu fitur developer yang paling banyak diminta telah mulai tersedia di browser web. Mulai Chromium 105 dan Safari 16, Anda kini dapat membuat kueri penampung berbasis ukuran dan menggunakan nilai unit kueri penampung di 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.
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 berbasis komponen yang benar-benar dengan membuat kueri untuk 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 penampung, Anda dapat menulis komponen yang dapat digunakan kembali yang dapat muncul secara berbeda berdasarkan tempatnya 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-tama 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 container
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 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 penampung, yang berarti ukuran font akan semakin besar seiring dengan bertambahnya ukuran inline (lebar), atau semakin kecil seiring dengan berkurangnya ukuran inline. 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 jauh dan memperbarui kartu yang lebih luas 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 di:
- 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
danmin-width: 300px
). - Kueri rentang (
200px < width < 400px
danwidth < 400px
). - Unit panjang relatif penampung (
cqw
,cqh
,cqi
,cqb
,cqmin
, dancqmax
) dalam properti dan keyframe.
Menggunakan polyfill kueri penampung
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.
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 sampai 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
danem
didukung dalam kondisi kueri. - Sintaksis kueri penampung yang diperluas:
- Sintaksis rentang (misalnya
(200px < width < 400px)
). - Kueri kesetaraan (misalnya,
(width = 200px)
).
- Sintaksis rentang (misalnya
- Elemen pseudo seperti
::before
dan::after
. - Browser tanpa
:is(...)
/:where(...)
didukung melalui solusi opsional - Kueri fitur
orientation
danaspect-ratio
. - Memfilter kueri dengan benar berdasarkan fitur (misalnya, kueri
height
dicontainer: 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 penampung, ada beberapa fitur yang tidak ada yang perlu diperhatikan:
- Shadow DOM belum didukung.
- Unit Relatif Penampung (misalnya,
cqw
dancqh
) tidak didukung dalam kondisi kueri@media
.- Safari: Unit Relatif Penampung tidak didukung di 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 jika polyfill dimuat secara manual) tidak didukung.
- Pembatasan
layout
danstyle
memerlukan dukungan browser yang mendasarinya:- Safari 15.4+
- Firefox saat ini tidak mendukung pembatasan gaya, tetapi sedang mengusahakannya.
Peringatan
- Untuk mencegah dampak pada FID dan CLS, polyfill tidak memberikan jaminan tentang kapan tata letak pertama akan terjadi, meskipun dimuat secara sinkron, kecuali bahwa polyfill akan mencoba menghindari penundaan LCP yang tidak wajar. Dengan kata lain, Anda tidak boleh mengandalkannya untuk proses render pertama.
- Menghasilkan
ResizeObserver Loop Errors
. Polyfill asli juga melakukan hal ini, tetapi perlu disebutkan. Hal ini terjadi karena ukuran blokcontainer-type: inline-size
kemungkinan akan berubah setelah mengevaluasi kueri, tetapiResizeObserver
tidak dapat memastikan bahwa kita tidak memedulikan 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 lebih lama dari:- Safari 14
- Chromium 88
- Edge 88
- Samsung Internet 15
- Firefox 78