jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose Container-Query-Snippet-Generator

Generiere CSS-Container-Query-Regeln für komponentenbasiertes responsives Design.

Tool wird geladen...

Was ist Container-Query-Snippet-Generator?

Container Queries ermöglichen es Ihnen, CSS-Stile basierend auf der Größe eines Elterncontainers statt des Viewports anzuwenden. Dies unterscheidet sich von Media Queries, die auf das Browserfenster reagieren. Für wiederverwendbare Komponenten bedeutet dies, dass dieselbe Komponente in einer schmalen Sidebar und einem breiten Hauptinhaltsbereich korrekt dargestellt werden kann, ohne Styles zu duplizieren.

Kurze Antwort

Verwenden Sie Container Queries, um ein Element basierend auf der Größe seines Elterncontainers statt des Viewports zu stylen. Sie sind das komponentenbasierte Äquivalent von Media Queries und nützlich für wiederverwendbare Widget-Layouts.

Last updated: 2026-05-25

Einschränkungen

  • Container Queries erfordern Chrome 105+, Edge 105+, Firefox 110+ und Safari 16+. Ältere Browser ignorieren die Funktion vollständig.
  • Die container-name-Eigenschaft muss einen container-type-Vorfahren im DOM referenzieren.
  • Container-Query-Einheiten (cqw, cqh, cqi, cqb, cqmin, cqmax) sind nur innerhalb eines @container-Blocks sinnvoll.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Legen Sie einen container-type und optionalen container-name für das Elternelement fest, das die Abfragereferenz darstellt.
  2. Wählen Sie eine Breakpoint-Bedingung wie min-width, max-width oder einen inline-size-Bereich.
  3. Schreiben Sie die CSS-Regeln, die angewendet werden sollen, wenn die Bedingung erfüllt ist.
  4. Kopieren Sie den generierten @container-Block und platzieren Sie ihn in Ihrem Komponenten-Stylesheet.

Wofür du es nutzen kannst

  • Eine Kartenkomponente von horizontalem auf vertikales Layout umschalten lassen, wenn ihr Container schrumpft.
  • Eine Formularzeile bauen, die Felder in schmalen Containern stapelt und in breiten inline anordnet.
  • Ein Widget erstellen, das seine Schriftgröße und Abstände basierend auf der Containerbreite anpasst.

Anwendungsfalle

Praxisbeispiele

Beispiel

Kartenkomponente in Sidebar und Hauptinhalt

Eine wiederverwendbare Karte wird sowohl in einer schmalen Sidebar als auch in einer breiten Hauptspalte platziert. Mit Container Queries verwendet die Karte ein gestapeltes Layout in der Sidebar und ein horizontales Layout im Hauptinhalt.

Beispiel

Formularzeile passt sich verfügbarem Platz an

Ein Formular mit Name-, E-Mail- und Telefonfeldern verwendet eine Container Query auf dem fieldset. Bei Containern breiter als 500px stehen die Felder inline. Darunter stapelt jedes Feld in eine eigene Zeile.

Haufige Fehler

  • Container Queries auf ein Element anwenden, ohne container-type auf einem Elternelement zu setzen, wodurch kein Container-Kontext etabliert wird.
  • Verwendung von Viewport-Einheiten wie vw oder vh innerhalb einer Container Query, die immer noch den Viewport referenzieren.
  • Sich vollständig auf Container Queries ohne Fallback-Layout verlassen, was die Komponente in Browsern ohne Unterstützung ungestylt lässt.

Überprüfung

  1. Ändern Sie die Größe des Container-Elements in den DevTools und überprüfen Sie, ob Kind-Elemente auf Größenänderungen des Containers reagieren.
  2. Überprüfen Sie Fallback-Stile in nicht unterstützten Browsern, indem Sie Basis-Stile außerhalb des @container-Blocks setzen.

FAQ

Fragen zu Container-Query-Snippet-Generator

Welche Browser unterstützen Container Queries?

Container Queries werden in allen modernen Browsern ab Chrome 105, Firefox 110, Safari 16 und Edge 105 unterstützt. Für ältere Browser ein Fallback-Layout bereitstellen.

Was ist der Unterschied zwischen inline-size und size für container-type?

inline-size erstellt einen Query-Container, der nur auf die Inline-Dimension reagiert (Breite in horizontalen Schreibmodi). size erstellt einen Container, der auf Breite und Höhe reagiert, erfordert aber contain: layout style.

Wie unterscheiden sich Container Queries von Media Queries?

Media Queries reagieren auf die Viewport-Größe. Container Queries reagieren auf die Größe eines Elterncontainers. Eine Komponente passt sich so ihrem Container an, egal wo sie platziert ist.

Was passiert, wenn ich @container verwende, ohne container-type auf dem Elternelement zu setzen?

Die @container-Regel hat keine Wirkung und die enthaltenen Stile werden nie angewendet. Der Browser sucht in der Vorfahrenkette nach dem nächsten Container-Kontext.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren