container-type dan container-name

Kueri wadah memungkinkan CSS menerapkan gaya berdasarkan ukuran wadah induk, bukan area pandang. Dengan demikian, desain responsif yang benar-benar berbasis komponen dapat dibuat, sehingga komponen menyesuaikan diri di mana pun komponen tersebut ditempatkan.

Dengan kueri media, komponen kartu di bilah sisi selebar 300px tidak dapat mengetahui bahwa ukurannya kecil — komponen tersebut hanya mengetahui bahwa area pandangnya lebar. Kueri wadah memungkinkan komponen bereaksi terhadap ukuran wadahnya sendiri, bukan area pandang global.

Untuk membuat kueri terhadap sebuah wadah, deklarasikan terlebih dahulu wadah tersebut sebagai wadah kueri menggunakan container-type:

Nilai yang tersedia:

• inline-size — mengaktifkan kueri pada dimensi sebaris wadah, yaitu lebar dalam penulisan horizontal
• size — mengaktifkan kueri pada dimensi sebaris dan blok, yaitu lebar dan tinggi
• normal — default, tanpa kueri ukuran, tetapi kueri gaya tetap dapat digunakan

Beri nama pada wadah agar dapat dirujuk dalam kueri. Hal ini diperlukan jika terdapat wadah bertingkat dan Anda ingin membuat kueri terhadap leluhur tertentu:

Singkatan container menetapkan nama dan jenis sekaligus:

Wadah tanpa nama tetap dapat dibuat kuerinya — aturan @container secara default akan menargetkan leluhur wadah terdekat. Nama hanya diperlukan jika Anda ingin melewati leluhur tertentu.

Setiap elemen jenis wadah mendapatkan isolasi tata letaknya sendiri. Artinya, perubahan ukuran di dalam wadah tidak memengaruhi leluhur, sehingga meningkatkan performa. Peramban tidak perlu menghitung ulang seluruh halaman saat wadah berubah.

Mengatur container-type: inline-size secara implisit menetapkan contain: inline-size layout style pada elemen. Hal ini mencegah ukuran wadah memengaruhi tata letaknya sendiri, yang diperlukan agar kueri ukuran dapat berfungsi.

Penyiapan kueri wadah lengkap:

Gunakan wadah untuk: penyesuaian tingkat komponen, komponen yang dapat digunakan ulang dalam konteks tata letak yang berbeda, serta kartu atau widget di lokasi yang tidak diketahui. Gunakan kueri media untuk: perubahan tata letak global, penskalaan tipografi, serta menampilkan atau menyembunyikan bagian besar.

container-type: inline-size mendefinisikan elemen sebagai wadah kueri berdasarkan lebarnya. Gunakan container-name untuk memberi nama pada wadah agar penargetan dapat dilakukan secara selektif. Singkatan container menetapkan keduanya. Kueri wadah menyelesaikan masalah komponen dalam konteks yang tidak diketahui, yang tidak dapat ditangani oleh kueri media berdasarkan area pandang.