Ända sedan det har varit responsiv webbdesign har utvecklare frågat om möjligheten att designa DOM -element baserat på deras faktiska storlek och inte på storleken på visningsporten i webbläsaren (med hjälp av mediefrågor ). Faktum är att containerfrågor (ursprungligen elementfrågor) förmodligen är den mest efterfrågade CSS -funktionen som webbläsare fortfarande inte har .
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 behållarfrå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.