iShadeeds Container Queries Lab

Ahmad Shadeed fick ett tidigt hopp på containerfrågor och har en växande exempelsamling utifrån vardagliga mönster.

Och om du missade det, hans senaste inlägget om containerfrågor gör ett fantastiskt jobb som täcker hur de fungerar sedan de landade i Chrome 105 den här månaden (vi kommer att se dem i Safari 16 snart). Några valhöjdpunkter och takeaways:

• Behållare definieras med container-type fast egendom. Tidigare demos och förslag hade använts contain istället.
• Behållarfrågor påminner mycket om de mediefrågor vi har skrivit hela tiden för att rikta in visningsportens storlek. Alltså, snarare än något liknande @media (min-width: 600px) {}, vi har @container (min-width: 600px) {}. Det borde göra att konvertera många av dessa mediefrågor till containerfrågor ganska okomplicerat, minus arbetet med att ta reda på de nya brytpunktsvärdena.
• Vi kan namnge behållare för att särskilja dem i vår kod (t.ex container-name: blockquote).

Bra jobbat, Ahmad! Och tack för att du delar med dig!

Direktlänk →