iShadeeds Container Queries Lab

Ahmad Shadeed fik et tidligt spring på containerforespørgsler og har en voksende samling af eksempler baseret på hverdagsmønstre.

Og hvis du gik glip af det, hans seneste indlæg om containerforespørgsler gør et vidunderligt stykke arbejde med at dække, hvordan de fungerer, siden de landede i Chrome 105 i denne måned (vi ser dem snart i Safari 16). Nogle udvalgte højdepunkter og takeaways:

• Containere er defineret med container-type ejendom. Tidligere demoer og forslag havde været brugt contain i stedet.
• Containerforespørgsler minder meget om de medieforespørgsler, vi hele tiden har skrevet for at målrette visningsportens størrelse. Så hellere end noget lignende @media (min-width: 600px) {}, vi har @container (min-width: 600px) {}. Det burde gøre konvertering af mange af disse medieforespørgsler til containerforespørgsler ret ligetil, minus arbejdet med at finde ud af de nye breakpoint-værdier.
• Vi kan navngive containere for at hjælpe med at skelne dem i vores kode (f.eks container-name: blockquote).

Godt arbejde, Ahmad! Og tak fordi du deler!

Direkte link →