Lab Kueri Kontainer iShadeed

Ahmad Shadeed mendapat lompatan awal pada permintaan kontainer dan memiliki koleksi contoh yang berkembang berdasarkan pola sehari-hari.

Dan, jika Anda melewatkannya, miliknya posting terbaru tentang permintaan kontainer melakukan pekerjaan luar biasa yang mencakup cara kerjanya sejak mendarat di Chrome 105 bulan ini (kita akan segera melihatnya di Safari 16). Beberapa sorotan dan takeaways pilihan:

• Wadah didefinisikan dengan container-type Properti. Demo dan proposal sebelumnya telah menggunakan contain sebagai gantinya.
• Kueri penampung sangat mirip dengan kueri media yang telah kami tulis selama ini untuk menargetkan ukuran area pandang. Jadi, daripada sesuatu seperti @media (min-width: 600px) {}, kita punya @container (min-width: 600px) {}. Itu seharusnya membuat konversi banyak kueri media tersebut menjadi kueri penampung cukup mudah, dikurangi pekerjaan untuk mencari tahu nilai titik henti sementara yang baru.
• Kami dapat memberi nama wadah untuk membantu membedakannya dalam kode kami (mis container-name: blockquote).

Kerja bagus, Ahmad! Dan terima kasih telah berbagi!

Tautan Langsung →