CSS-Containerabfragen sind die neue CSS-Funktion, auf die Webentwickler schon lange gewartet haben. Dies könnte eine Revolution im Webdesign auslösen – vom seitenbasierten responsiven Design zum containerbasierten responsiven Design.
Mit den Chrome-Entwicklertools können Sie neue Layout-Designmuster einführen und auf dem Laufenden bleiben, was die neuesten Trends angeht. Mit dieser CSS-Funktion können Sie Ihre Containerabfragen jetzt in den DevTools prüfen und beheben.
Im Video oben erhalten Sie einen Überblick über Containerabfragen, ihre Syntax und die Möglichkeit, sie in den DevTools zu prüfen.
Containerelemente und ihre untergeordneten Elemente sind jetzt durch ein entsprechendes Symbol gekennzeichnet, über das ein gepunktetes Linien-Overlay eingeblendet wird.
Prüfen Sie @container-Regeln, die auf Nachkommen angewendet werden, wenn Container Abfragebedingungen erfüllen.
Weitere Informationen zur Unterstützung von Containerabfragen in DevTools finden Sie unter CSS-Containerabfragen prüfen und beheben.