Eine benannte Container-Abfrage bauen und die Vorschau ziehen

Benennen Sie den Container, wählen Sie container-type und eine Breitenbedingung und ziehen Sie an der Vorschau: die Anzeige nennt die Inhaltsbreite und ob die Abfrage gerade zutrifft, der Export ist die vollständige @container-Regel. Bereiche behalten die eingegebenen Zahlen — liegt das Minimum über dem Maximum, trifft nichts zu, und die Anzeige sagt das.

Läuft lokal in deinem Browser

Kategorie ansehen: Frontend & Design (34)

· container-type · container-name · @container

ABFRAGE-STEUERUNG

container-type

min-width (px)

max-width (px)

620px

GRÖSSEN-VORSCHAU

01API-Vertrag

02Build-Ausgabe

03Laufzeitprüfung

04Versionshinweise

CSS EXPORTIEREN

So bauen und prüfen Sie eine Container-Abfrage

Benennen Sie den Container, wählen Sie container-type und eine Breitenbedingung und ziehen Sie an der Vorschau: die Anzeige nennt die Inhaltsbreite des Containers und ob die Abfrage gerade zutrifft. Das Exportfeld enthält das vollständige CSS — die .component-shell-Deklaration mit container-type und container-name plus den @container-Block, der das Raster auf die gewählte Spaltenzahl umschaltet.

Alle Angaben hier wurden beim Testen gemessen: die Anzeige stimmte in allen 11 Tastaturzuständen mit dem gerenderten Raster überein, die acht Vorgaben sind card-shell / inline-size / min / 480 / 760 / 620 px / 3 Spalten / 16 px, und die Schaltfläche „CSS kopieren“ schrieb genau den angezeigten Text (über die Zwischenablage verglichen).

Geben Sie einen Containernamen ein (bis 32 Zeichen) und wählen Sie container-type: inline-size oder size. Der Name wird kleingeschrieben, Leerzeichen und Zeichen werden zu -, eine führende Ziffer bekommt das Präfix x-.

Wählen Sie die Bedingung — Mindestbreite, Maximalbreite oder Breitenbereich — und tragen Sie die min-width- / max-width-Werte ein, die in der Regel stehen sollen.

Ziehen Sie die Vorschaubreite zwischen 220 und 900 px. Die Anzeige folgt beim Ziehen: „Trifft zu“ heißt, die Rasterregel gilt in der Vorschau, „Trifft nicht zu“ heißt, sie gilt nicht.

Stellen Sie Spalten bei Treffer (1–4) und Abstand (0–64 px) ein. Beide Werte werden in Vorschau und exportiertem CSS auf diese Bereiche begrenzt.

Klicken Sie auf „CSS kopieren“ und fügen Sie das Ergebnis ein; „Zurücksetzen“ stellt card-shell, inline-size, min, 480, 760, 620 px, 3 Spalten und 16 px wieder her.

Was die Vorschau misst, welche Zahlen das CSS behält und was das Werkzeug nicht abdeckt

Was die Vorschau misst

Die Anzeige zählt die Inhaltsbox des Containers: die 13 px Innenabstand je Seite bleiben außen vor, eine 620 px breite Vorschau meldet also 620px. Die Container-Abfrage misst dieselbe Box, deshalb passen beide zusammen. „Trifft zu“ schaltet die vier Karten auf die gewählte Spaltenzahl, „Trifft nicht zu“ lässt sie in einer Spalte.

Die Bühne begrenzt die Vorschau zusätzlich: in einem 1360 px breiten Fenster reicht der Regler bis 900, die Vorschau endet aber bei 878 px, und die Anzeige nennt 878px statt des angeforderten Werts. container-type: size behält die bisherige Höhe (204 px in einer Zeile, 352 px gestapelt), damit die Demo unter der Größenkapselung nicht zusammenfällt.

Die eingegebenen Zahlen sind die ausgegebenen

Die beiden Breitenfelder sind unabhängig. Ein Bereich exportiert beide Werte unverändert: min 1000 mit max 300 schreibt (min-width: 1000px) and (max-width: 300px), was nie zutrifft, und die Anzeige sagt „Trifft nicht zu“, statt die Regel still umzuschreiben. Der Maximalmodus nutzt nur das Max-Feld, min-width fließt nicht mehr hinein.

Spalten und Abstand werden auf das begrenzt, was die Bedienelemente zulassen: 7 eingetippte Spalten ergeben repeat(4, minmax(0, 1fr)), 80 px ergeben gap: 64px — dieselben Werte, die die Vorschau rendert. „CSS kopieren“ legt genau diesen Text in die Zwischenablage, „Zurücksetzen“ stellt die acht Vorgaben wieder her.

Was das Werkzeug nicht leistet

Es deckt einen benannten Container und nur Breitenbedingungen ab: min-width, max-width oder einen Bereich. Es gibt keine Style-Queries, keine Scroll-State-Queries, keine reinen Höhenabfragen und keinen zweiten Container; das ausgegebene CSS ist Beispielgerüst — .component-shell und .component-grid — zum Umbenennen im eigenen Markup.

Nichts verlässt die Seite. Während beim Testen die Regler bewegt und das CSS kopiert wurden, hat der Browser keine einzige Anfrage gesendet; die Leiste sagt das zu. Die Wörter der Anzeige sind in allen sechs Sprachen übersetzt, einschließlich des französischen Correspond / Ne correspond pas und des japanischen 一致 / 一致しない.