Latihan 1: Container Queries — CSS

Latihan 1 dari materi Container Queries di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

.wrapper membungkus .card. Jadikan .wrapper sebuah container, langkah pertama sebelum @container bisa dipakai:

Di dalam aturan .wrapper { } yang sudah ada, tulis container-type: inline-size;

Belum perlu menulis @container. Latihan ini cuma mengecek container-nya.

Hint

@container cuma bisa menanyai elemen yang sudah ditandai sebagai container. Di sini yang perlu ditandai adalah pembungkusnya, .wrapper, bukan .card.
Properti yang menandainya adalah container-type. Nilai inline-size artinya container ini diukur dari lebarnya.
.wrapper { container-type: inline-size; }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Container Queries — CSS

Hint

Memperbarui Aplikasi