Cara Menggunakan Kueri Kontainer di CSS

Untuk waktu yang lama, kueri media adalah satu-satunya cara untuk membuat desain UI responsif pada ukuran layar yang berbeda. Tetapi bahkan itu memiliki keterbatasan. Salah satu masalah terbesar dalam menggunakan kueri media adalah Anda hanya dapat menata gaya elemen sebagai respons terhadap perubahan ukuran layar, bukan elemen penampung terdekatnya.

Kueri kontainer diperkenalkan untuk mengatasi masalah ini. Mereka juga melonjak dengan popularitas kerangka kerja seperti React dan Vue.js yang bekerja dengan membuat "komponen" UI modular. Pelajari cara menggunakan kueri penampung untuk membuat elemen responsif di CSS Anda.

Kode yang digunakan dalam artikel ini tersedia di sini repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.

Mengapa Anda Harus Menggunakan Kueri Wadah CSS?

Untuk memahami pentingnya kueri kontainer, mari gunakan contoh yang mempermudah pemahaman konsep. Tapi pertama-tama, Anda perlu mengkloning kode awal dari ini

repositori GitHub.

Setelah Anda berhasil mengkloning repo, jalankan kodenya. Anda akan menemukan halaman web yang mirip dengan gambar berikut:

Di sini Anda memiliki tata letak kisi yang terdiri dari dua kolom: bagian utama dan bilah samping. Bagian utama terlihat baik-baik saja, tetapi sidebar (yang jauh lebih kecil dari konten utama) terlihat sedikit terjepit.

Tata letaknya responsif. Saat Anda mengecilkan browser, Anda dapat melihat bahwa kartu berubah menjadi kolom vertikal:

Dengan kata lain, saat konten mulai tidak dapat dibaca, tata letak berubah menjadi kolom vertikal tempat gambar ditumpuk di atas konten. Efek ini muncul sebagai hasil dari kueri media, yang merupakan satu-satunya cara untuk menentukan ukuran elemen berdasarkan ukuran keseluruhan layar Anda.

Dalam hal ini, setiap kali layar Anda kurang dari 800px, Anda menumpuk semuanya menggunakan Penyelarasan kotak fleksibel. Di layar yang lebih besar, kami menempatkan konten secara berdampingan:

@media(lebar-maks: 800px) {
.kartu {
flex-direction: kolom;
 }
.card-header { 
lebar: 100%;
 }
}

Untuk waktu yang lama, kueri media telah menjadi salah satu yang utama prinsip desain web untuk membuat tata letak responsif dengan CSS (dan sudah cukup baik untuk banyak hal). Tetapi Anda pasti akan mengalami skenario di mana kueri media tidak akan cukup, atau setidaknya tidak akan menjadi solusi yang nyaman.

Salah satu skenario tersebut adalah ketika Anda memiliki sidebar (seperti yang kita lakukan pada contoh di atas). Dalam kasus di mana Anda memiliki sidebar, Anda harus langsung memilih kartu sidebar dan mencoba membuatnya lebih kecil:

.sidebar.kartu {
/* Membuat kartu sidebar lebih kecil */
}
@media(lebar-maks: 800px) {
/* Style halaman saat layar lebih sempit dari 800px */
}

Ini bisa sangat rumit jika Anda bekerja dengan banyak elemen karena Anda harus memilih semua elemen secara manual dan mengubah ukurannya. Anda akan mendapatkan lebih banyak kode dan kerumitan ekstra.

Di sinilah kueri kontainer dapat berguna. Alih-alih dipaksa untuk menggunakan viewport sebagai ukuran Anda, Anda dapat menggunakan elemen apa pun di halaman Anda sebagai wadah. Kemudian penampung itu dapat memiliki lebarnya sendiri yang menjadi dasar kueri media Anda.

Cara Membuat Kueri Kontainer

Untuk membuat kueri penampung, Anda akan mulai dengan menargetkan elemen yang ingin Anda gunakan sebagai penampung (dalam hal ini, bagian utama dan sidebar). Di dalam blok, Anda perlu mengatur tipe kontainer ke ukuran sebaris:

utama, .sidebar {
tipe kontainer: ukuran sebaris
}

Saat Anda menyimpan file CSS, tidak ada yang berubah di halaman. Tapi sekarang Anda bisa menggunakan kueri wadah untuk mengubah ukuran dan menata ulang kartu yang bersarang di dalam bagian utama dan bagian sidebar. Dalam kueri penampung berikut, Anda mengubah kartu menjadi kolom vertikal pada layar dengan lebar 500px atau kurang:

@wadah(lebar-maks: 500px) {
.kartu {
flex-direction: kolom;
 }
.card-header {
lebar: 100%;
 }
}

Ini akan berfungsi sebagai kueri media normal. Tapi alih-alih mengukur ukuran layar Anda, Anda mengukur ukuran wadah Anda (bagian utama dan sidebar). Jadi sekarang ketika wadah Anda berukuran 500px atau lebih, Anda menggunakan tampilan horizontal. Jika tidak, Anda menggunakan vertikal (default untuk flexbox).

Dari gambar di atas, Anda dapat melihat bahwa sidebar berbentuk vertikal karena lebih kecil dari 500px. Sedangkan konten utama mempertahankan tata letak horizontalnya karena lebih besar dari 500px. Jika Anda mengecilkan browser, sidebar dan konten utama Anda akan menggunakan perataan vertikal saat mencapai 500px atau kurang.

Kueri penampung sangat kuat karena memungkinkan Anda untuk mengubah ukuran sesuatu berdasarkan penampung, bukan lebar keseluruhan browser. Ini sangat berguna ketika berhadapan dengan komponen (seperti di React atau Vue).

Dengan kueri penampung, Anda dapat dengan mudah mengubah ukuran komponen UI berdasarkan penampungnya, memungkinkan Anda membuat komponen yang sepenuhnya mandiri.

Penamaan Kontainer

Ketika Anda membuat @wadah kueri, pertama kali mencari penampung elemen yang Anda targetkan dalam kueri. Dalam kasus kami, ini akan menjadi wadah utama dan wadah sidebar.

Dan bahkan jika kartu berada di dalam wadah lain, itu hanya akan mengabaikan wadah lain dan hanya memilih wadah yang paling dekat dengan dirinya sendiri. Ini adalah bagian dari yang lebih luas Konsep CSS dikenal sebagai pemilih CSS.

Dalam contoh berikut, kami telah mengubah elemen body menjadi wadah:

tubuh {
tipe kontainer: ukuran sebaris;
}

Sekarang kita memiliki tiga container terpisah: body, main, dan side section. Secara default, kartu yang kami targetkan dalam kueri penampung lebih dekat ke bagian utama atau sidebar daripada ke badan. Jadi ia menggunakan bagian utama dan sidebar sebagai wadah untuk kueri wadah.

Untuk mengesampingkan perilaku ini, Anda perlu melakukan dua hal. Pertama, Anda perlu memberi nama wadah pada elemen tubuh Anda:

tubuh {
tipe kontainer: ukuran sebaris;
nama-wadah: tubuh;
}

Kemudian, saat Anda membuat kueri penampung, Anda harus menentukan nama penampung setelahnya @wadah.

@wadah tubuh (lebar maks:1000px){
/* aturan CSS yang menargetkan body container */
}

Ini berguna jika Anda ingin menggunakan elemen tertentu sebagai penampung daripada penampung terdekat dengan elemen yang Anda targetkan. Dengan kata lain, Anda dapat memilih wadah tertentu dan menyempurnakan tata letak Anda.

Unit Kontainer

Fitur hebat lainnya tentang wadah adalah Anda dapat menggunakan unit wadah. Unit-unit ini berfungsi seperti unit viewport (mereka semua memiliki tipe unit yang sama persis). Namun, unit kontainer digunakan cqw (untuk mengatur lebar) dan cqh (untuk mengatur ketinggian). Unit-unit ini menentukan lebar dan tinggi yang tepat dari wadah Anda.

Kueri penampung CSS memungkinkan Anda menggunakan elemen tertentu sebagai titik referensi untuk kueri media Anda. Teknik ini sangat berguna untuk membuat elemen modular mandiri yang dapat berdiri sendiri terlepas dari wadahnya. Tetapi kueri kontainer menggunakan prinsip yang sama dengan kueri media, dan ini adalah sesuatu yang harus Anda kuasai jika ingin menjadi pengembang CSS satu persen teratas.