CSS-containerquery's zijn de nieuwe CSS-functie waar webontwikkelaars enthousiast over zijn. Het kan een revolutie in webontwerp teweegbrengen: van paginagebaseerd responsief ontwerp naar containergebaseerd responsief ontwerp .
Chrome DevTools is er om u te helpen nieuwe lay-outontwerppatronen te gebruiken en op de hoogte te blijven van de nieuwste trends. Met de ondersteuning van deze CSS-functie kunt u nu uw containerquery's in DevTools inspecteren en fouten opsporen.
De video hierboven geeft u een overzicht van containerquery's, hun syntaxis en hoe u deze in DevTools kunt inspecteren.
Je kunt nu containerelementen en hun afstammelingen ontdekken met de bijbehorende badge die een stippellijn-overlay in- of uitschakelt.
Inspecteer @container regels die worden toegepast op afstammelingen wanneer containers voldoen aan de queryvoorwaarden.
Zie CSS-containerquery's inspecteren en fouten opsporen voor meer informatie over de ondersteuning van containerquery's in DevTools.