Sinds de opkomst van responsive webdesign vragen ontwikkelaars om de mogelijkheid om DOM-elementen te stylen op basis van hun werkelijke grootte in plaats van de grootte van het browservenster (met behulp van mediaqueries ). Sterker nog, containerqueries (oorspronkelijk elementqueries) zijn waarschijnlijk de meest gevraagde CSS-functie die browsers nog steeds missen .
Er zijn al vele , vele , vele berichten die precies uitleggen waarom containerquery's moeilijk te implementeren zijn in CSS en waarom browserfabrikanten aarzelen om ze te implementeren. Als je er nu van wilt genieten, kan een beetje JavaScript helpen:
c51c33e1533e68c3f8fd24633700789f
Het geheel ziet er dan zo uit:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
De breekpunten, selector en de stijl attributen kunnen worden gebruikt om de verschillende breekpunten, de automatische selector en de aard van de klassen toegevoegd definiëren. Als u het script gebruikt, kunt u de nieuw gegenereerde klassen als volgt adresseren::
c51c33e1533e68c3f8fd24633700789f
Het gebruik van containerquery's is vooral de moeite waard voor elementen in overlays, pop-ups, zijbalken of aangepaste elementen - zelfs nu bijvoorbeeld met het bovenstaande script.