Az iShadeed Container Queries Lab

Ahmad Shadeed korán ugrott a konténerlekérdezések terén, és rendelkezik a növekvő példagyűjtemény mindennapi minták alapján.

És ha lemaradtál róla, az övé legutóbbi bejegyzés a konténerlekérdezésekről csodálatos munkát végez, és bemutatja, hogyan működnek, mióta ebben a hónapban a Chrome 105-ben landolt (hamarosan a Safari 16-ban is láthatjuk őket). Néhány kiemelés és elvitel:

• A konténereket a container-type ingatlan. A korábbi demókat és javaslatokat használták contain helyette.
• A tárolólekérdezések nagyon hasonlítanak azokhoz a médialekérdezésekhez, amelyeket végig írtunk a nézetablak méretének megcélzása érdekében. Tehát inkább, mint valami hasonlót @media (min-width: 600px) {}, nekünk van @container (min-width: 600px) {}. Ez meglehetősen egyszerűvé teszi a médialekérdezések nagy részének konténerlekérdezésekké való konvertálását, leszámítva az új töréspont-értékek kiderítését.
• A konténereket elnevezhetjük, hogy segítsük megkülönböztetni őket a kódunkban (pl container-name: blockquote).

Remek munka, Ahmad! És köszönöm a megosztásokat!

Közvetlen link →