CSS Container Query
Generator
Erstellen Sie visuell CSS @container-Abfragen mit einer GUI. Inklusive container-type-Einstellungen, Breakpoints, 6 Vorlagen und Medienabfrage-Konverter.
Container-Einstellungen
Vorlagen
Breakpoints
Live-Vorschau
Generierter Code
🔄 Media Query → Container Query
Das könnte dir auch gefallen
Über den CSS Container Query Generator
Der CSS Container Query Generator ist ein Entwicklertool, mit dem Sie "Container-Abfragen", den neuen Standard im responsiven Design, visuell mit einer GUI erstellen können. Während Media Queries von der Viewport-Breite abhängen, basieren Container Queries auf der Breite des übergeordneten Elements, was flexible Layouts pro Komponente ermöglicht.
Dieses Tool verarbeitet Container-Einstellungen, das Hinzufügen von Breakpoints und Live-Vorschauen nahtlos. Es bietet außerdem eine Funktion zur Massenkonvertierung bestehender Media Queries, was den Übergang zum neuen Standard erleichtert. Alles läuft sicher in Ihrem Browser ab.
Verwendung
Container konfigurieren
Legen Sie den Container-Selektor und den container-type fest. Fügen Sie Breakpoints hinzu und definieren Sie CSS-Stile.
Live-Vorschau
Ziehen Sie am rechten Rand der Vorschau, um den Container in der Größe zu ändern und die Stile zu testen.
Code exportieren
Kopieren Sie den CSS-Code oder nutzen Sie den Konverter für bestehende Media Queries.
Container Query Glossar
- Container Query (@container)
- CSS-Funktion zur Änderung von Stilen basierend auf der Größe eines übergeordneten Elements (Containers) anstatt des Viewports.
- container-type
- Eigenschaft, die ein Element als Abfragecontainer definiert. inline-size zielt auf die horizontale Achse ab; size auf beide Achsen.
- container-name
- Eigenschaft zur expliziten Benennung eines Containers, nützlich, wenn mehrere Container verschachtelt sind.
- Containment
- Ein für Container-Abfragen erforderliches Konzept, das die Layout-/Stilberechnungen eines Elements vom Rest des DOMs isoliert.
- Inline-axis (Inline-Achse)
- Die Achse, entlang der Text fließt. In horizontaler Schreibweise entspricht dies der Breite.
- Media Query (@media)
- Traditionelle CSS-Funktion, die Stile basierend auf der Viewport-Größe oder Geräteeigenschaften anwendet.
- cqw / cqh / cqi / cqb
- Relative Einheiten für Container-Abfragen, die 1 % der Containergröße repräsentieren, ähnlich wie vw/vh.
Häufig gestellte Fragen
- Q.Werden Daten an Server gesendet?
- Nein, dieses Tool läuft komplett lokal in Ihrem Browser.
- Q.Media Queries oder Container Queries?
- Media Queries für das Seitenlayout (Makro), Container Queries für Komponenten (Mikro).
- Q.Wie sieht die Browser-Unterstützung aus?
- Unterstützt in allen modernen Browsern seit 2023 (Chrome 105+, Safari 16+).
- Q.Gibt es Vorbehalte bei der Verwendung von container-type: size?
- Bei der Verwendung von size wird die Blockachse (Höhe) eingeschränkt. Wenn Sie keine explizite Höhe festlegen, kann das Element auf eine Höhe von Null zusammenfallen. Es wird generell empfohlen, inline-size zu verwenden.
- Q.Wie wird mein HTML isoliert?
- Wir verwenden das Shadow DOM, um CSS-Konflikte zu vermeiden.
Anwendungsfälle
Wiederverwendbare Karten
Karten, die sich ihrem Container anpassen.
CMS-Integration
WordPress-Blöcke, die sich automatisch anpassen.
Komplexe Dashboard-UIs
Ideal für die dynamische Optimierung der Platzierung von Diagrammen und Statistiken in größenverstellbaren Dashboard-Panels.
Code-Modernisierung
Alte Media Queries einfach umwandeln.
Technische Dokumentation
Container-Abfragen werden durch die Kombination der @container-Regel und der Eigenschaft container-type realisiert.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.