CSS-Container-Abfrage-Builder

• Visual Container Query Builder: Erstellen Sie CSS-Containerabfragen visuell mit unserem interaktiven Container Query Builder. Legen Sie den Containertyp fest (Inline-Größe, Größe oder Normal), fügen Sie Abfragebedingungen mit benutzerdefinierten Operatoren und Einheiten hinzu und definieren Sie reaktionsfähige Stile – und das alles, ohne eine einzige CSS-Zeile von Hand schreiben zu müssen.
• Privat – Kein Server-Upload erforderlich: Der Container-Abfrage-Builder wird vollständig in Ihrem Browser ausgeführt. Ihre Containerkonfigurationen, Abfragebedingungen und Reaktionsstile verlassen niemals Ihr Gerät. Die gesamte CSS-Generierung erfolgt zu 100 % clientseitig, ohne Daten-Uploads.
• Live-Vorschau mit Steuerelementen zur Größenänderung: Sehen Sie mit einem Live-Vorschaufenster mit veränderbarer Größe genau, wie sich Ihre Containerabfrage verhält. Verwenden Sie die Schaltflächen für die voreingestellte Breite (320 Pixel bis 1024 Pixel) oder den interaktiven Schieberegler, um Ihre Abfrage bei jeder Containerbreite zu testen. Die Vorschau wird sofort aktualisiert und zeigt an, ob die Abfrage zutrifft.
• Gebrauchsfertige CSS-Ausgabe: Kopieren Sie die generierte @container-Regel, Containerdeklaration oder Abfragebedingungszeichenfolge mit einem Klick. Der Container-Abfrage-Builder erstellt produktionsbereites CSS mit korrekter Escapezeichenfolge für Containernamen und korrekt formatierter Medienabfragesyntax.

• Reaktionsfähigkeit von React-Komponenten: React-Entwickler verwenden den Container-Abfrage-Builder, um wirklich reaktionsfähige Komponenten zu erstellen, die sich an ihren übergeordneten Container und nicht an das Ansichtsfenster anpassen. Erstellen Sie Karten-, Seitenleisten- und Dashboard-Komponenten, die ihr Layout basierend auf der verfügbaren Containerbreite neu organisieren – wichtig für wiederverwendbare Komponentenbibliotheken, in denen dieselbe Komponente in Containern unterschiedlicher Breite angezeigt wird.
• Moderne Responsive Layouts: Webdesigner verwenden den Container Query Builder, um Layouts zu erstellen, die auf ihr enthaltendes Element und nicht auf das Ansichtsfenster reagieren. Dies ist besonders leistungsstark für Dashboard-Raster, Widget-Bereiche und verschachtelte Layouts, in denen Elemente in mehreren Kontexten in unterschiedlichen Größen angezeigt werden – Containerabfragen passen sich auf natürliche Weise an, ohne dass Medienabfragen dupliziert werden.
• Adaptive Widget- und Panel-Systeme: Erstellen Sie Widget-Systeme und Seitenpanels, die ihr internes Layout anpassen, wenn der Benutzer ihre Größe ändert. Der Container-Abfrage-Builder hilft bei der Erstellung reaktionsfähiger Seitenleisten-Widgets, Chat-Panels und Einstellungsschubladen, die Inhalte neu organisieren und von gestapelten zu nebeneinander liegenden Layouts basierend auf der Containerbreite und nicht auf der Bildschirmbreite wechseln.
• CMS- und Page Builder-Inhalte: Inhaltsredakteure, die WordPress, Drupal oder Seitenersteller wie Elementor verwenden, können den Container-Abfrage-Builder verwenden, um Inhaltsblöcke zu erstellen, die auf ihre Spaltenbreite reagieren. Ein zweispaltiges Layout auf dem Desktop wird zu einer einzelnen Spalte auf Mobilgeräten – aber derselbe Inhaltsblock passt sich unterschiedlich an, je nachdem, ob er sich in voller Breite oder in der Seitenleiste befindet.
• Adaptivität von Designsystemkomponenten: Designsystemarchitekten verwenden den Container-Abfrage-Builder, um reaktionsfähige Varianten von Designsystemkomponenten zu definieren – Karten, Tabellen, Navigationsleisten und Formularlayouts, die sich basierend auf ihrem übergeordneten Container anpassen. Containerabfragen machen spröde, reaktionsfähige Requisiten überflüssig und ermöglichen wirklich autonome Komponenten.
• E-Commerce-Produktkartenraster: E-Commerce-Entwickler verwenden den Container-Abfrage-Builder, um Produktkarten zu erstellen, die nahtlos zwischen Raster- und Listenansichten wechseln, wenn sich die Containerbreite ändert. Produktbilder, Titel, Preise und Schaltflächen zum Hinzufügen zum Warenkorb werden automatisch neu angeordnet, wenn der Benutzer die Anzahl der Spalten in einem Produktraster anpasst.

Mit CSS-Containerabfragen (Teil der CSS-Containment-Modul-Level-3-Spezifikation) können Sie Stile auf ein Element anwenden, basierend auf der Größe seines enthaltenden Elements (Containers) und nicht auf der Grundlage des Ansichtsfensters. Dies ist eine grundlegende Abkehr von Medienabfragen, die auf die Größe des Ansichtsfensters reagieren. Mit Containerabfragen kann eine Komponente ihr Layout, ihre Typografie und ihr Erscheinungsbild basierend darauf anpassen, wie viel Platz ihr übergeordneter Container bietet – wodurch die Komponente wirklich auf Container reagiert. Unser Container-Abfrage-Builder hilft Ihnen, diese Regeln visuell zu erstellen, ohne sich die genaue Syntax merken zu müssen.

1. Definieren Sie den Container: Legen Sie einen Containernamen und einen Containertyp fest. Der gebräuchlichste Typ ist inline-size , wodurch das Element zu einem Abfragecontainer wird, der auf Breitenänderungen reagiert. Verwenden Sie size, wenn Sie sowohl Breite als auch Höhe abfragen müssen. Verwenden Sie „Normal“ für die Eindämmung ohne Abfragefunktionalität.
2. Abfragebedingungen hinzufügen: Fügen Sie eine oder mehrere Bedingungen hinzu, indem Sie Eigenschaften wie width , height , inline-size oder side-ratio mit Min- oder Max-Präfixen verwenden. Mehrere Bedingungen werden mit und verbunden. Der Container-Abfrage-Builder unterstützt Standard-CSS-Einheiten (px, em, rem) sowie Container-Abfrageeinheiten (cqw, cqi, cqh).
3. Definieren Sie Responsive Styles und Vorschau: Fügen Sie CSS-Deklarationen hinzu, die gelten sollen, wenn die Abfrage übereinstimmt. Verwenden Sie die Stilvorgaben (Kompaktkarte, Erweiterte Karte usw.) als Ausgangspunkte oder geben Sie benutzerdefinierte Eigenschafts-Wert-Paare ein. Ändern Sie die Größe der Live-Vorschau, um genau zu sehen, wann Ihre Abfragebedingungen erfüllt sind.

• Scoping: Medienabfragen reagieren auf die Viewport-Größe – die Breite des Browserfensters. Containerabfragen reagieren auf die Größe eines bestimmten übergeordneten Elements. Dies macht Containerabfragen ideal für wiederverwendbare Komponenten, die in unterschiedlichen Kontexten erscheinen.
• Wiederverwendbarkeit: Eine Komponente mit Containerabfragen funktioniert ordnungsgemäß, unabhängig davon, ob sie in einer schmalen Seitenleiste (300 Pixel), einem Hauptinhaltsbereich (800 Pixel) oder einem Heldenabschnitt in voller Breite (1200 Pixel) angezeigt wird. Bei Medienabfragen müsste die Komponente ihren Ansichtsfensterkontext kennen.
• Browserunterstützung: CSS-Containerabfragen werden in Chrome 105+, Firefox 110+, Safari 16+ und Edge 105+ unterstützt. Sie sind jetzt in allen modernen Browsern stabil und produktionsbereit. Verwenden Sie den Container-Abfrage-Builder, um progressive Erweiterungsstile zu generieren.
• Leistung: Containerabfragen können hinsichtlich der Reaktionsfähigkeit auf Komponentenebene leistungsfähiger sein als Medienabfragen, da sie Stilneuberechnungen auf die Container-Unterstruktur und nicht auf das gesamte Dokument beschränken.

CSS-Containerabfragen führen neue relative Einheiten ein, die auf der Grundlage der Containerabmessungen berechnet werden: cqw (1 % der Containerbreite), cqi (1 % der Inline-Größe des Containers), cqh (1 % der Containerhöhe), cqb (1 % der Containerblockgröße), cqmin (der kleinere von cqi und cqb) und cqmax (der größere von cqi und cqb). Diese Einheiten sind besonders nützlich für flüssige Typografie und Abstände, die mit dem Container und nicht mit dem Ansichtsfenster skaliert werden. Beispielsweise skaliert „font-size: clamp(0.875rem, 2cqi, 1.5rem)“ die Schriftgröße gleichmäßig zwischen 0,875rem und 1,5rem, während der Container von etwa 44 Pixel auf 75 Pixel inline-Größe wächst.