Baru-baru ini, Chris Coyier menulis postingan blog yang mengajukan pertanyaan:
Kini setelah kueri container didukung di semua mesin browser, mengapa tidak lebih banyak developer yang menggunakannya?
Postingan Chris mencantumkan sejumlah kemungkinan alasan (misalnya, kurangnya kesadaran, kebiasaan lama akan sulit dilakukan), tetapi ada satu alasan khusus yang terlihat jelas.
Beberapa developer mengatakan bahwa mereka ingin menggunakan kueri container sekarang, tetapi mereka tidak dapat melakukannya karena mereka masih harus mendukung browser lama.
Seperti yang Anda duga dari judul, kami pikir sebagian besar developer bisa saja menggunakan kueri container sekarang—dalam produksi—meskipun Anda harus mendukung browser lama. Postingan ini akan memandu Anda melakukan pendekatan yang kami rekomendasikan.
Pendekatan pragmatis
Jika Anda ingin menggunakan kueri penampung dalam kode sekarang, tetapi ingin pengalaman terlihat sama di semua browser, Anda dapat menerapkan penggantian berbasis JavaScript untuk browser yang tidak mendukung kueri penampung.
Pertanyaannya kemudian menjadi: seberapa komprehensif seharusnya penggantian tersebut?
Seperti penggantian lainnya, tantangannya adalah mencapai keseimbangan yang baik antara kegunaan dan performa. Untuk fitur CSS, sering kali tidak mungkin mendukung API lengkap (lihat mengapa tidak menggunakan polyfill). Namun, Anda dapat melakukan lebih jauh dengan mengidentifikasi kumpulan fungsi inti yang ingin digunakan oleh sebagian besar developer, lalu mengoptimalkan penggantian hanya untuk fitur tersebut.
Namun, apa yang dimaksud dengan "kumpulan fungsi inti" yang diinginkan sebagian besar developer untuk kueri container? Untuk menjawab pertanyaan itu, pertimbangkan bagaimana sebagian besar developer membangun situs responsif saat ini dengan kueri media.
Hampir semua sistem desain modern dan library komponen memiliki standar pada prinsip yang mengutamakan perangkat seluler, yang diimplementasikan menggunakan satu set titik henti sementara yang telah ditentukan sebelumnya (seperti SM, MD, LG, XL). Komponen dioptimalkan agar ditampilkan dengan baik di layar kecil secara default, lalu gaya diberi lapisan bersyarat untuk mendukung serangkaian tetap lebar layar yang lebih besar. (Lihat dokumentasi Bootstrap dan Tailwind untuk mengetahui contohnya.)
Pendekatan ini sama relevannya dengan sistem desain berbasis container seperti halnya sistem desain berbasis area pandang karena, dalam banyak kasus, yang relevan bagi desainer bukanlah seberapa besar layar atau area tampilan, melainkan seberapa banyak ruang yang tersedia untuk komponen dalam konteks tempat komponen tersebut ditempatkan. Dengan kata lain, bukan titik henti sementara yang relatif terhadap keseluruhan area pandang (dan berlaku untuk seluruh halaman), titik henti sementara akan diterapkan ke area konten tertentu, seperti sidebar, dialog modal, atau isi postingan.
Jika Anda dapat bekerja dalam batasan pendekatan berbasis titik henti sementara yang mengutamakan perangkat seluler (yang saat ini dilakukan oleh sebagian besar developer), menerapkan penggantian berbasis container untuk pendekatan tersebut secara signifikan lebih mudah daripada menerapkan dukungan penuh untuk setiap fitur kueri container tunggal.
Bagian berikutnya menjelaskan dengan tepat cara kerja semua ini, beserta panduan langkah demi langkah yang menunjukkan cara menerapkannya di situs yang sudah ada.
Cara kerjanya
Langkah 1: perbarui gaya komponen untuk menggunakan aturan @container, bukan aturan @media
Pada langkah pertama ini, identifikasi semua komponen di situs yang menurut Anda akan mendapatkan manfaat dari pengukuran berbasis penampung, bukan penentuan ukuran berdasarkan area pandang.
Sebaiknya mulai dengan satu atau dua komponen saja untuk melihat cara kerja strategi ini. Namun, jika Anda ingin mengonversi 100% komponen menjadi gaya visual berbasis container, tidak masalah. Keunggulan strategi ini adalah Anda dapat menerapkannya secara bertahap jika diperlukan.
Setelah mengidentifikasi komponen yang ingin diperbarui, Anda harus mengubah setiap aturan @media dalam komponen tersebut CSS ke aturan @container.
Berikut adalah contoh tampilan tersebut di komponen .photo-gallery yang, secara default, berupa kolom tunggal, lalu menggunakan aturan @media untuk memperbarui tata letaknya menjadi dua dan tiga kolom di titik henti sementara MD dan XL (masing-masing):
.photo-gallery {
display: grid;
grid-template-columns: 1fr;
}
/* Styles for the `MD` breakpoint */
@media (min-width: 800px) {
.photo-gallery {
grid-template-columns: 1fr 1fr;
}
}
/* Styles for the `XL` breakpoint */
@media (min-width: 1200px) {
.photo-gallery {
grid-template-columns: 1fr 1fr 1fr;
}
}
Untuk memperbarui komponen .photo-gallery agar menggunakan aturan @container, ganti string @media terlebih dahulu dengan string @container di CSS. Tata bahasa untuk kedua aturan ini cukup mirip sehingga, dalam banyak kasus, hanya inilah yang perlu Anda ubah.
Bergantung pada desain situs, Anda mungkin juga perlu memperbarui kondisi ukuran, terutama jika aturan @media situs Anda membuat asumsi tertentu tentang jumlah ruang yang akan tersedia untuk komponen tertentu pada berbagai ukuran area pandang.
Misalnya, jika gaya untuk CSS .photo-gallery di titik henti sementara MD dan XL dalam contoh sebelumnya mengasumsikan bahwa sidebar selebar 200 piksel akan ditampilkan di titik henti sementara tersebut, kondisi ukuran untuk aturan @container harus lebih kecil sekitar 200 piksel—dengan asumsi "container" untuk komponen .photo-gallery tidak akan menyertakan sidebar.
Secara keseluruhan, untuk mengonversi CSS .photo-gallery dari aturan @media menjadi aturan @container, kumpulan perubahan lengkapnya adalah sebagai berikut:
/* Before, using the original breakpoint sizes: */
@media (min-width: 800px) { /* ... */ }
@media (min-width: 1200px) { /* ... */ }
/* After, with the breakpoint sizes reduced by 200px: */
@container (min-width: 600px) { /* ... */ }
@container (min-width: 1000px) { /* ... */ }
Perhatikan bahwa Anda tidak perlu mengubah gaya apa pun dalam blok deklarasi, karena gaya tersebut mencerminkan tampilan komponen, bukan kapan gaya tertentu harus diterapkan.
Setelah memperbarui gaya komponen dari aturan @media menjadi aturan @container, langkah berikutnya adalah mengonfigurasi elemen penampung Anda.
Langkah 2: tambahkan elemen penampung ke HTML Anda
Langkah sebelumnya menentukan gaya komponen yang didasarkan pada ukuran elemen container. Langkah berikutnya adalah menentukan elemen mana di halaman Anda yang harus menjadi elemen penampung yang ukuran aturan @container akan relatif.
Anda dapat mendeklarasikan elemen apa pun sebagai elemen penampung di CSS dengan menetapkan properti container-type-nya ke size atau inline-size. Jika aturan penampung Anda berbasis lebar, biasanya inline-size adalah yang ingin Anda gunakan.
Pertimbangkan situs dengan struktur HTML dasar berikut:
<body>
<div class="sidebar">...</div>
<div class="content">...</div>
</body>
Untuk membuat elemen .sidebar dan .content di penampung situs ini, tambahkan aturan ini ke CSS Anda:
.content, .sidebar {
container-type: inline-size;
}
Untuk browser yang mendukung kueri penampung, hanya CSS ini yang Anda butuhkan untuk membuat gaya komponen yang ditentukan di langkah sebelumnya relatif terhadap area konten utama atau sidebar, tergantung pada elemen mana tempatnya berada.
Namun, untuk browser yang tidak mendukung kueri penampung, ada beberapa tugas tambahan yang harus dilakukan.
Anda perlu menambahkan beberapa kode yang mendeteksi kapan ukuran elemen penampung berubah, lalu memperbarui DOM berdasarkan perubahan tersebut dengan cara yang dapat membuat CSS Anda terhubung.
Untungnya, kode yang diperlukan untuk melakukannya tidak terlalu banyak, dan dapat diabstraksi sepenuhnya menjadi komponen bersama yang dapat Anda gunakan di situs mana pun dan di area konten mana pun.
Kode berikut menentukan elemen <responsive-container> yang dapat digunakan kembali yang otomatis memproses perubahan ukuran dan menambahkan class titik henti sementara yang dapat diberi gaya oleh CSS:
// A mapping of default breakpoint class names and min-width sizes.
// Redefine these (or add more) as needed based on your site's design.
const defaultBreakpoints = {SM: 400, MD: 600 LG: 800, XL: 1000};
// A resize observer that monitors size changes to all <responsive-container>
// elements and calls their `updateBreakpoints()` method with the updated size.
const ro = new ResizeObserver((entries) => {
entries.forEach((e) => e.target.updateBreakpoints(e.contentRect));
});
class ResponsiveContainer extends HTMLElement {
connectedCallback() {
const bps = this.getAttribute('breakpoints');
this.breakpoints = bps ? JSON.parse(bps) : defaultBreakpoints;
this.name = this.getAttribute('name') || '';
ro.observe(this);
}
disconnectedCallback() {
ro.unobserve(this);
}
updateBreakpoints(contentRect) {
for (const bp of Object.keys(this.breakpoints)) {
const minWidth = this.breakpoints[bp];
const className = this.name ? `${this.name}-${bp}` : bp;
this.classList.toggle(className, contentRect.width >= minWidth);
}
}
}
self.customElements.define('responsive-container', ResponsiveContainer);
Kode ini bekerja dengan membuat ResizeObserver yang secara otomatis memproses perubahan ukuran pada elemen <responsive-container> di DOM. Jika perubahan ukuran sesuai dengan salah satu ukuran titik henti sementara yang ditentukan, class dengan nama titik henti sementara tersebut akan ditambahkan ke elemen (dan dihapus jika kondisi tidak lagi cocok).
Misalnya, jika width dari elemen <responsive-container> berukuran antara 600 dan 800 piksel (berdasarkan nilai titik henti sementara default yang ditetapkan dalam kode), class SM dan MD akan ditambahkan, seperti ini:
<responsive-container class="SM MD">...</responsive-container>
Class ini memungkinkan Anda menentukan gaya penggantian untuk browser yang tidak mendukung kueri penampung (lihat langkah 3: menambahkan gaya penggantian ke CSS).
Untuk memperbarui kode HTML sebelumnya agar dapat menggunakan elemen penampung ini, ubah elemen <div> konten utama dan sidebar menjadi elemen <responsive-container>:
<body>
<responsive-container class="sidebar">...</responsive-container>
<responsive-container class="content">...</responsive-container>
</body>
Dalam sebagian besar situasi, Anda cukup menggunakan elemen <responsive-container> tanpa penyesuaian apa pun, tetapi jika Anda perlu menyesuaikannya, opsi berikut akan tersedia:
- Ukuran titik henti sementara kustom: Kode ini menggunakan sekumpulan nama class titik henti sementara default dan ukuran lebar min, tetapi Anda dapat mengubah setelan default ini sesuai keinginan. Anda juga dapat mengganti nilai ini per elemen menggunakan atribut
breakpoints. - Penampung bernama: Kode ini juga mendukung penampung bernama dengan meneruskan atribut
name. Hal ini dapat menjadi penting jika Anda perlu menyarangkan elemen container. Lihat bagian batasan untuk mengetahui detail selengkapnya.
Berikut adalah contoh yang menetapkan kedua opsi konfigurasi tersebut:
<responsive-container
name='sidebar'
breakpoints='{"bp4":400,"bp5":500,"bp6":600,"bp7":700,"bp8":800,"bp9":900,"bp10":1000}'>
</responsive-container>
Terakhir, saat memaketkan kode ini, pastikan Anda menggunakan deteksi fitur dan import() dinamis untuk hanya memuatnya jika browser tidak mendukung kueri container.
if (!CSS.supports('container-type: inline-size')) {
import('./path/to/responsive-container.js');
}
Langkah 3: tambahkan gaya penggantian ke CSS
Langkah terakhir dalam strategi ini adalah menambahkan gaya penggantian untuk browser yang tidak mengenali gaya yang ditentukan dalam aturan @container. Lakukan hal ini dengan menduplikasi aturan tersebut menggunakan class titik henti sementara yang ditetapkan pada elemen <responsive-container>.
Melanjutkan dengan contoh .photo-gallery dari sebelumnya, gaya penggantian untuk kedua aturan @container mungkin terlihat seperti ini:
/* Container query styles for the `MD` breakpoint. */
@container (min-width: 600px) {
.photo-gallery {
grid-template-columns: 1fr 1fr;
}
}
/* Fallback styles for the `MD` breakpoint. */
@supports not (container-type: inline-size) {
:where(responsive-container.MD) .photo-gallery {
grid-template-columns: 1fr 1fr;
}
}
/* Container query styles for the `XL` breakpoint. */
@container (min-width: 1000px) {
.photo-gallery {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* Fallback styles for the `XL` breakpoint. */
@supports not (container-type: inline-size) {
:where(responsive-container.XL) .photo-gallery {
grid-template-columns: 1fr 1fr 1fr;
}
}
Dalam kode ini, untuk setiap aturan @container, terdapat aturan setara yang cocok secara bersyarat dengan elemen <responsive-container> jika ada class titik henti sementara yang sesuai.
Bagian pemilih yang cocok dengan elemen <responsive-container> digabungkan dalam pemilih class semu fungsional :where(), untuk menjaga kekhususan pemilih penggantian setara dengan kekhususan pemilih asli dalam aturan @container.
Setiap aturan penggantian juga digabungkan dalam deklarasi @supports. Meskipun hal ini tidak mutlak diperlukan agar penggantian berfungsi, artinya browser benar-benar mengabaikan aturan ini jika mendukung kueri penampung, yang dapat meningkatkan performa pencocokan gaya secara umum. Hal ini juga berpotensi memungkinkan alat build atau CDN menghapus deklarasi tersebut jika mengetahui bahwa browser mendukung kueri container dan tidak memerlukan gaya penggantian tersebut.
Kelemahan utama dari strategi penggantian ini adalah mengharuskan Anda mengulangi deklarasi gaya dua kali, yang menjemukan dan rentan error. Namun, jika menggunakan praprosesor CSS, Anda dapat memisahkannya menjadi mixin yang menghasilkan aturan @container dan kode penggantian untuk Anda. Berikut adalah contoh yang menggunakan Sass:
@use 'sass:map';
$breakpoints: (
'SM': 400px,
'MD': 600px,
'LG': 800px,
'XL': 1000px,
);
@mixin breakpoint($breakpoint) {
@container (min-width: #{map.get($breakpoints, $breakpoint)}) {
@content();
}
@supports not (container-type: inline-size) {
:where(responsive-container.#{$breakpoint}) & {
@content();
}
}
}
Kemudian, setelah memiliki mixin ini, Anda dapat memperbarui gaya komponen .photo-gallery asli menjadi sesuatu seperti ini, yang akan menghilangkan duplikasi sepenuhnya:
.photo-gallery {
display: grid;
grid-template-columns: 1fr;
@include breakpoint('MD') {
grid-template-columns: 1fr 1fr;
}
@include breakpoint('XL') {
grid-template-columns: 1fr 1fr 1fr;
}
}
Dan hanya itu yang tersedia!
Rekap
Jadi, ringkasan, berikut cara memperbarui kode untuk menggunakan kueri container sekarang dengan penggantian lintas browser.
- Komponen identitas yang ingin Anda beri gaya relatif terhadap penampungnya, dan perbarui aturan
@mediadi CSS-nya untuk menggunakan aturan@container. Selain itu (jika belum), standarkan kumpulan nama titik henti sementara agar sesuai dengan kondisi ukuran dalam aturan penampung Anda. - Tambahkan JavaScript yang mendukung elemen
<responsive-container>kustom, lalu tambahkan elemen<responsive-container>ke area konten mana pun di halaman yang Anda inginkan untuk dihubungkan dengan komponen. - Untuk mendukung browser lama, tambahkan gaya penggantian ke CSS yang sesuai dengan class titik henti sementara yang otomatis ditambahkan ke elemen
<responsive-container>di HTML Anda. Idealnya, gunakan mixin praprosesor CSS untuk menghindari keharusan menulis gaya yang sama dua kali.
Keunggulan strategi ini adalah adanya biaya penyiapan satu kali, tetapi setelah itu tidak perlu upaya tambahan untuk menambahkan komponen baru dan menentukan gaya container-relatif untuk komponen tersebut.
Melihat cara kerjanya
Mungkin cara terbaik untuk memahami kesesuaian semua langkah ini adalah dengan melihat demo penerapannya.
Demo ini adalah versi terbaru situs yang dibuat pada tahun 2019 (sebelum ada kueri container) untuk membantu menggambarkan mengapa kueri container sangat penting untuk membuat library komponen yang benar-benar responsif.
Karena situs ini sudah memiliki gaya yang ditentukan untuk sekumpulan "komponen responsif", situs ini sangat cocok untuk menguji strategi yang diperkenalkan di sini di situs yang tidak umum. Ternyata, pembaruan tersebut sebenarnya cukup mudah dan hampir tidak memerlukan perubahan pada gaya situs asli.
Anda dapat melihat kode sumber demo lengkap di GitHub, dan pastikan untuk melihat secara khusus CSS komponen demo guna melihat cara menentukan gaya fallback. Jika Anda hanya ingin menguji perilaku penggantian, ada demo khusus penggantian yang menyertakan hanya varian tersebut—bahkan di browser yang mendukung kueri container.
Batasan dan potensi perbaikan
Seperti yang disebutkan di awal postingan ini, strategi yang diuraikan di sini berfungsi dengan baik untuk sebagian besar kasus penggunaan yang sebenarnya menjadi perhatian developer saat mengambil kueri container.
Meskipun demikian, ada beberapa kasus penggunaan lanjutan yang sengaja tidak didukung oleh strategi ini, yang akan dibahas selanjutnya:
Unit kueri penampung
Spesifikasi untuk kueri penampung menentukan sejumlah unit baru, yang semuanya bergantung pada ukuran penampung. Meskipun berpotensi berguna dalam beberapa kasus, sebagian besar desain responsif mungkin dapat dicapai melalui cara yang ada, seperti persentase atau menggunakan tata letak kisi atau fleksibel.
Meskipun demikian, jika Anda perlu menggunakan unit kueri container, Anda dapat dengan mudah menambahkan dukungan untuk unit tersebut menggunakan properti kustom. Khususnya, dengan menentukan properti khusus untuk setiap unit yang digunakan pada elemen penampung, seperti ini:
responsive-container {
--cqw: 1cqw;
--cqh: 1cqh;
}
Kemudian, setiap kali Anda perlu mengakses unit kueri container, gunakan properti tersebut, bukan menggunakan unit itu sendiri:
.photo-gallery {
font-size: calc(10 * var(--cqw));
}
Kemudian, untuk mendukung browser lama, tetapkan nilai untuk properti khusus tersebut pada elemen container dalam callback ResizeObserver.
class ResponsiveContainer extends HTMLElement {
// ...
updateBreakpoints(contentRect) {
this.style.setProperty('--cqw', `${contentRect.width / 100}px`);
this.style.setProperty('--cqh', `${contentRect.height / 100}px`);
// ...
}
}
Hal ini secara efektif
memungkinkan Anda “lulus” nilai tersebut dari JavaScript ke CSS, lalu Anda memiliki kemampuan penuh CSS (misalnya, calc(), min(), max(), clamp()) untuk memanipulasinya sesuai kebutuhan.
Dukungan properti logis dan mode penulisan
Anda mungkin telah melihat penggunaan inline-size daripada width dalam deklarasi @container di beberapa contoh CSS ini. Anda mungkin juga sudah melihat unit cqi dan cqb baru (untuk ukuran inline dan blok). Fitur-fitur baru ini mencerminkan peralihan CSS ke properti dan nilai logis, bukan fisik atau terarah.
Sayangnya, API seperti Resize Observer masih melaporkan nilai dalam width dan height, jadi jika desain Anda memerlukan fleksibilitas properti logis, Anda harus mencari tahu sendiri.
Meskipun ada kemungkinan untuk mendapatkan mode penulisan menggunakan sesuatu seperti getComputedStyle() yang meneruskan elemen container, melakukan hal tersebut memerlukan biaya, dan sebenarnya tidak ada cara yang baik untuk mendeteksi apakah mode penulisan berubah.
Oleh karena itu, pendekatan terbaik adalah membuat elemen <responsive-container> itu sendiri menerima properti mode penulisan yang dapat ditetapkan (dan diperbarui) oleh pemilik situs sesuai kebutuhan. Untuk menerapkannya, Anda dapat mengikuti pendekatan yang sama dengan yang ditunjukkan di bagian sebelumnya, dan menukar width dan height sesuai kebutuhan.
Penampung bertingkat
Properti container-name memungkinkan Anda memberi nama penampung, yang kemudian dapat Anda referensikan dalam aturan @container. Penampung bernama berguna jika Anda memiliki penampung yang disusun bertingkat di dalam penampung dan Anda memerlukan aturan tertentu agar hanya cocok dengan penampung tertentu (bukan hanya penampung ancestor terdekat).
Strategi penggantian yang diuraikan di sini menggunakan kombinator turunan untuk menata gaya elemen yang cocok dengan class titik henti sementara tertentu. Error ini dapat terjadi jika Anda memiliki penampung bertingkat, karena sejumlah class titik henti sementara dari beberapa ancestor elemen container dapat cocok dengan komponen tertentu secara bersamaan.
Misalnya, di sini ada dua elemen <responsive-container> yang menggabungkan komponen .photo-gallery, tetapi karena penampung luar lebih besar dari penampung bagian dalam, class tersebut menambahkan class titik henti sementara yang berbeda.
<responsive-container class="SM MD LG">
...
<responsive-container class="SM">
...
<div class="photo-gallery">...</div class="photo-gallery">
</responsive-container>
</responsive-container>
Dalam contoh ini, class MD dan LG di penampung luar akan memengaruhi aturan gaya yang cocok dengan komponen .photo-gallery, yang tidak cocok dengan perilaku kueri container (karena keduanya hanya cocok dengan container ancestor terdekat).
Untuk mengatasi hal ini:
- Pastikan Anda selalu memberi nama container apa pun yang disarangkan, lalu pastikan class titik henti sementara diawali dengan nama container tersebut untuk menghindari bentrok.
- Gunakan kombinator turunan, bukan kombinator turunan dalam pemilih penggantian Anda (yang sedikit lebih membatasi).
Bagian penampung bertingkat di situs demo memiliki contoh fungsi ini menggunakan container bernama, beserta Sass mixin yang digunakan dalam kode untuk menghasilkan gaya penggantian bagi aturan @container yang bernama dan tidak diberi nama.
Bagaimana dengan browser yang tidak mendukung :where(), Elemen Kustom, atau Resize Observer?
Meskipun API ini mungkin tampak relatif baru, semuanya telah didukung di semua browser selama lebih dari tiga tahun, dan semuanya merupakan bagian dari Baseline yang tersedia secara luas.
Jadi, kecuali Anda memiliki data yang menunjukkan bahwa sebagian besar pengunjung situs Anda menggunakan browser yang tidak mendukung salah satu fitur ini, tidak ada alasan untuk tidak menggunakannya secara bebas tanpa penggantian.
Meski begitu, untuk kasus penggunaan khusus ini, hal terburuk yang dapat terjadi adalah penggantian tidak akan berfungsi untuk sebagian kecil pengguna, yang berarti mereka akan melihat tampilan default, bukan tampilan yang dioptimalkan untuk ukuran container.
Fungsi situs tetap dapat berfungsi, dan itulah hal yang benar-benar penting.
Mengapa tidak menggunakan polyfill kueri container?
Fitur CSS terkenal sulit untuk di-polyfill, dan umumnya memerlukan penerapan ulang seluruh parser CSS brower dan logika berjenjang di JavaScript. Akibatnya, penulis polyfill CSS harus melakukan banyak kompromi yang hampir selalu disertai dengan berbagai keterbatasan fitur serta overhead performa yang signifikan.
Karena alasan ini, kami biasanya tidak merekomendasikan penggunaan polyfill CSS dalam produksi, termasuk container-query-polyfill dari Google Chrome Labs, yang tidak lagi dikelola (dan terutama ditujukan untuk tujuan demo).
Strategi penggantian yang dibahas di sini memiliki batasan yang lebih sedikit, memerlukan kode yang jauh lebih sedikit, dan akan berperforma jauh lebih baik daripada polyfill kueri container apa pun.
Apakah Anda bahkan perlu menerapkan penggantian untuk browser lama?
Jika Anda khawatir dengan salah satu batasan yang disebutkan di sini, ada baiknya bertanya pada diri sendiri apakah Anda benar-benar perlu mengimplementasikan penggantian sejak awal. Lagi pula, cara termudah untuk menghindari batasan ini adalah dengan menggunakan fitur tersebut tanpa fallback. Sejujurnya, dalam banyak kasus, pilihan tersebut mungkin adalah pilihan yang sangat wajar.
Menurut caniuse.com, kueri container didukung oleh 90% pengguna internet global, dan bagi banyak orang yang membaca postingan ini, jumlah ini mungkin sedikit lebih tinggi untuk basis pengguna mereka. Jadi, penting untuk diingat bahwa sebagian besar pengguna akan melihat versi kueri container dari UI Anda. Dan bagi 10% pengguna yang tidak mengalaminya, mereka tidak akan mengalami pengalaman buruk. Saat mengikuti strategi ini, dalam kasus terburuk, pengguna ini akan melihat setelan default atau "seluler" {i>layout<i} untuk beberapa komponen, yang bukanlah akhir dari dunia.
Saat melakukan kompromi, sebaiknya optimalkan sebagian besar pengguna Anda—daripada secara default menggunakan pendekatan denominator umum terendah yang memberikan pengalaman yang konsisten, tetapi di bawah standar kepada semua pengguna.
Jadi sebelum Anda berasumsi bahwa Anda tidak dapat menggunakan kueri container karena kurangnya dukungan browser, sebenarnya luangkan waktu untuk mempertimbangkan seperti apa pengalaman tersebut jika Anda memilih untuk mengadopsinya. Imbal baliknya mungkin sepadan, bahkan tanpa penggantian apa pun.
Harapan ke depan
Semoga postingan ini dapat meyakinkan Anda bahwa kueri container dapat digunakan di lingkungan production sekarang, dan Anda tidak perlu menunggu bertahun-tahun sampai semua browser yang tidak mendukung sepenuhnya menghilang.
Meskipun strategi yang diuraikan di sini membutuhkan sedikit upaya ekstra, strategi tersebut harus sederhana dan cukup lugas sehingga sebagian besar orang dapat menerapkannya di situs mereka. Meskipun demikian, tentu ada ruang untuk membuatnya lebih mudah digunakan. Salah satu idenya adalah mengonsolidasikan banyak bagian yang berbeda menjadi satu komponen—dioptimalkan untuk framework atau stack tertentu—yang menangani semua pekerjaan lem untuk Anda. Jika Anda membuat aplikasi seperti ini, beri tahu kami dan kami dapat membantu mempromosikannya.
Terakhir, selain kueri kontainer, ada begitu banyak fitur CSS dan UI yang luar biasa yang kini dapat dioperasikan bersama di semua mesin browser utama. Sebagai komunitas, mari kita cari tahu cara menggunakan fitur tersebut sekarang, sehingga pengguna bisa mendapatkan manfaat.
Pembaruan (25 Juli 2024): awalnya merupakan panduan pada "Langkah 1" menyarankan bahwa kueri media dan kueri penampung dapat menggunakan kondisi ukuran yang sama. Hal ini sering kali benar, tetapi tidak selalu (karena beberapa alasan telah ditunjukkan dengan benar). Panduan yang diperbarui ini sekarang mengklarifikasi hal ini dan menawarkan contoh kasus saat kondisi ukuran mungkin perlu diubah.
Pembaruan (2 Juli 2024): awalnya semua contoh kode CSS menggunakan Sass (agar konsisten dengan rekomendasi akhir). Berdasarkan masukan dari pembaca, beberapa CSS pertama telah diperbarui menjadi CSS biasa, dan Sass hanya digunakan dalam contoh kode yang memerlukan penggunaan mixin.