Entwicklertools-Tipps: CSS-Containerabfragen prüfen

Sofia Emelianova
Sofia Emelianova

CSS-Containerabfragen sind die neue CSS-Funktion, die Webentwicklern begeistert. Es kann eine Revolution im Webdesign auslösen – vom seitenbasierten responsiven Design bis zum containerbasierten responsiven Design.

Die Chrome-Entwicklertools unterstützen Sie dabei, neue Layoutdesignmuster zu übernehmen und über die neuesten Trends auf dem Laufenden zu bleiben. Mit der Unterstützung dieser CSS-Funktion können Sie jetzt Ihre Containerabfragen in den Entwicklertools untersuchen und Fehler beheben.

Im Video oben erhalten Sie einen Überblick über Containerabfragen, ihre Syntax und darüber, wie sie in den Entwicklertools überprüft werden.

Sie können jetzt Containerelemente und ihre Nachfolger über das entsprechende Badge finden, mit dem sich ein Overlay mit gepunkteter Linie ein-/ausblenden lässt.

Container-Badge.

Es werden @container-Regeln geprüft, die auf untergeordnete Elemente angewendet werden, wenn Container die Abfragebedingungen erfüllen.

@container-Regel.

Weitere Informationen zur Unterstützung von Containerabfragen in den Entwicklertools finden Sie unter CSS-Containerabfragen prüfen und debuggen.