iShadeed's Container Queries Lab

Ahmad Shadeed je zgodaj skočil na poizvedbe za kontejnerje in ima naraščajoča zbirka primerov temelji na vsakdanjih vzorcih.

In, če ste zamudili, njegovo najnovejša objava o poizvedbah vsebnikov odlično pokriva, kako delujejo, odkar so ta mesec pristali v Chromu 105 (kmalu jih bomo videli v Safariju 16). Nekaj ​​izbirnih poudarkov in zaključkov:

• Vsebniki so definirani z container-type premoženje. Prejšnje predstavitve in predlogi so bili uporabljeni contain namesto tega.
• Vsebniške poizvedbe so zelo podobne medijskim poizvedbam, ki smo jih ves čas pisali za ciljanje velikosti vidnega polja. Torej, raje kot nekaj podobnega @media (min-width: 600px) {}, imamo @container (min-width: 600px) {}. To bi moralo narediti pretvorbo mnogih teh medijskih poizvedb v vsebniške poizvedbe dokaj enostavne, brez dela ugotavljanja novih vrednosti prelomnih točk.
• Vsebnike lahko poimenujemo, da jih lažje razlikujemo v naši kodi (npr container-name: blockquote).

Odlično opravljeno, Ahmad! In hvala za deljenje!

Neposredna povezava →