Siden fremkomsten af responsivt webdesign har udviklere efterspurgt muligheden for at style DOM-elementer baseret på deres faktiske størrelse i stedet for browserens viewport-størrelse (ved hjælp af media queries ). Faktisk er container queries (oprindeligt element queries) nok den mest efterspurgte CSS-funktion, som browsere stadig mangler .
Der er allerede mange , mange , mange indlæg, der præcist forklarer, hvorfor containerforespørgsler er svære at implementere i CSS, og hvorfor browserproducenter tøver med at implementere dem. Hvis du vil nyde det nu, kan lidt JavaScript hjælpe:
c51c33e1533e68c3f8fd24633700789f
Det hele ser da sådan ud:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Brudpunkterne, vælgeren og stil attributter kan anvendes til at definere de forskellige breakpoints, den automatiske vælgeren og typen af klasser tilsat. Hvis du bruger scriptet, kan du adressere de nyligt genererede klasser som følger:
c51c33e1533e68c3f8fd24633700789f
Brugen af containerforespørgsler er især værd for elementer i overlejringer, popups, sidebjælker eller brugerdefinerede elementer - også nu, for eksempel med scriptet ovenfor.