Sinds er responsive webdesign is, vragen ontwikkelaars naar de mogelijkheid om DOM-elementen te ontwerpen op basis van hun werkelijke grootte en niet op de grootte van de viewport in de browser (met behulp van mediaquery's ). In feite zijn containerquery's (aanvankelijk elementquery's) waarschijnlijk de meest gevraagde CSS-functie die browsers nog steeds niet hebben .
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 met name de moeite waard voor elementen in overlays, pop-ups, zijbalken of aangepaste elementen - zelfs nu bijvoorbeeld met het bovenstaande script.