Sedan responsiv webbdesign kom till stånd har utvecklare efterfrågat möjligheten att utforma DOM-element baserat på deras faktiska storlek snarare än webbläsarens viewportstorlek (med hjälp av mediafrågor ). Faktum är att containerfrågor (ursprungligen elementfrågor) förmodligen är den mest efterfrågade CSS-funktionen som webbläsare fortfarande saknar .
Det finns redan många , många , många inlägg som förklarar exakt varför containerfrågor är svåra att implementera i CSS och varför webbläsartillverkare tvekar att implementera dem. Om du vill njuta av det nu kan lite JavaScript hjälpa:
c51c33e1533e68c3f8fd24633700789f
Det hela ser då ut så här:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Brytpunkterna, attributen selector och stil kan användas för att definiera de olika brytpunkter, den automatiska väljaren och den typ av klasser sattes. Om du använder skriptet kan du ta itu med de nyskapade klasserna enligt följande:
c51c33e1533e68c3f8fd24633700789f
Användningen av containerfrågor är särskilt värdefull för element i överlägg, popup-fönster, sidofält eller anpassade element - även nu, till exempel, med skriptet ovan.