Entwicklertools-Tipps: CSS-Containerabfragen prüfen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
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.
Die Chrome-Entwicklertools helfen Ihnen dabei, neue Layout-Designmuster zu verwenden und auf dem Laufenden zu bleiben. 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 aktiviert 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.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2022-06-30 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2022-06-30 (UTC)."],[],[]]
