Mobile-first berarti menulis gaya dasar Anda untuk layar terkecil, lalu menambah kompleksitas untuk layar lebih besar dengan media queries min-width — daripada memulai dari desktop dan menghapus semuanya.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Mengapa mobile-first menang: CSS dasar tetap minimal (mobile mendapatkan hanya yang dibutuhkan — bagus untuk performa di perangkat lemah), dan Anda membentuk kompleksitas, yang lebih mudah dipahami daripada menggantinya/menghapusnya. Ini juga cocok dengan cara konten secara alami mengalir dari satu kolom ke banyak.
Media queries merespons viewport — seluruh jendela. Namun komponen yang dapat digunakan kembali (katakan kartu) mungkin muncul di area utama yang lebar atau bilah samping sempit di halaman yang sama. Lebar viewport tidak dapat memberi tahu Anda berapa banyak ruang yang sebenarnya dimiliki komponen.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Sekarang kartu yang sama secara otomatis beralih ke tata letak horizontal kapan pun containernya ≥400px — apakah itu karena layarnya besar atau karena berada di kolom lebar. Komponen menjadi benar-benar independen konteks dan dapat digunakan kembali.
Mobile-first membuat CSS responsif tetap ringan dan mudah dikelola.
Container queries adalah kemajuan besar: mereka memungkinkan komponen merespons ruang tersedia mereka sendiri, yang persis apa yang Anda butuhkan dalam arsitektur berbasis komponen (sistem desain, kartu/widget yang dapat digunakan kembali) di mana komponen yang sama muncul dalam banyak konteks.