Containerabfragen

Mit Media Queries können Sie Layouts an die Größe des Darstellungsbereichs oder den verwendeten Gerätetyp anpassen. Mit Containerabfragen können Sie Elemente basierend auf der Größe und dem Status ihrer übergeordneten Elemente oder Container genauer anpassen.

Angenommen, Sie haben ein Newsletter-Anmeldeformular, das in verschiedenen Kontexten auf Ihrer Website verwendet werden soll. Auf einer Registrierungsseite soll sie vielleicht die gesamte Breite der Seite einnehmen, auf einer Seite mit anderem Content aber in einer geteilten Spalte angezeigt werden.

Wie in dieser Demo zu sehen ist, können Sie mit Containerabfragen Eigenschaften wie Schriftgröße, Padding und Layout des Elements basierend auf Attributen des nächstgelegenen Containers anpassen – unabhängig von der Viewportgröße.

Containerabfrage einrichten

Im Gegensatz zu Media-Queries werden Container-Queries in zwei Teilen festgelegt:

1. Definieren Sie einen Container.
2. Schreiben Sie Stile für ein untergeordnetes Element, die angewendet werden sollen, wenn ein übergeordneter Container den Bedingungen der Abfrage entspricht.

Container definieren

Mit der Property container-type können Sie einen Container definieren.

.my-container-element {
  container-type: inline-size;
}

Mit einer container-type von inline-size können Sie die Inline-Achse des Containers abfragen.

Wenn Sie sowohl die inline- als auch die block-Achse abfragen möchten, verwenden Sie container-type: size.

main,
.my-component {
  container-type: size;
}

Bei beiden Werten von container-type werden unterschiedliche Arten der Größenbegrenzung angewendet. Die Inline-size-Einschließung für ein Element verhindert, dass sich seine Nachfolger auf seine Inline-Größe auswirken.

Ein Element mit size-Containment verhindert, dass sich seine untergeordneten Elemente sowohl auf der Block- als auch auf der Inline-Achse auf seine Größe auswirken.

In diesem Beispiel sehen Sie, wie sich die Größenbegrenzung auf das Element auswirken kann, auf das sie angewendet wird.

Da die Größe des Containers nicht auf der Grundlage der Größe seiner untergeordneten Elemente (des <p>-Elements) festgelegt wird, wird der Container minimiert, sofern keine explizite Größe durch Festlegen seiner Abmessungen (inline-size, block-size, aspect-ratio) angegeben oder er in ein Layout mit expliziter Größe eingefügt wird.

Bedingungen für Containerabfragen

Sobald ein Container eingerichtet ist, können Sie eine in Klammern eingeschlossene Bedingung hinzufügen, die erfüllt sein muss, damit die Stile innerhalb der Containerabfrage angewendet werden. Bei Anfragen zur Containergröße, die auf den Dimensionen von übergeordneten Elementen basieren, besteht die Bedingung aus Folgendem:

• ein Größenattribut: width, height, inline-size, block-size, aspect-ratio oder orientation,
• ein Vergleichsoperator (>, <, =, >=)
• und einen Längenwert.

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

Bedingungen für Größen-Features können auch mit einem Doppelpunkt und einem einzelnen zu testenden Wert geschrieben werden.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

Sie können auch mehrere Bedingungen mit Schlüsselwörtern wie and und or kombinieren oder mehrere Bedingungen mit Operatoren verketten.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

Container benennen

Wenn Sie bestimmte Container ausrichten möchten, auch wenn sie nicht der nächste übergeordnete Container sind, können Sie Container mit der Eigenschaft container-name benennen. Anschließend können Sie vor dem Definieren der Bedingungen auf den Containernamen verweisen, den Sie abfragen möchten.

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

Der benannte Container muss weiterhin ein übergeordnetes Element der zu formatierenden Elemente sein.

Kurzschreibweise mit dem Attribut container verwenden

Mit der Property container können Sie eine Kurzschreibweise verwenden, um sowohl einen Container zu definieren als auch den Containertyp anzugeben.

.sidebar {
  container: main-sidebar / inline-size;
}

Der Name des Containers steht vor dem Schrägstrich und der Containertyp danach.

Einheiten für Containerabfragen

In Containern haben Sie auch Zugriff auf relative Längeneinheiten. Das bietet mehr Flexibilität für Komponenten, die in verschiedenen Containern vorhanden sein können, da sich die relativen Längen je nach den Abmessungen des Containers anpassen.

Hier wird die Containerlängeneinheit cqi (1% der Inline-Größe eines Abfragecontainers) für das Padding der Schaltfläche verwendet.

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

Für beide Schaltflächen werden dieselben relativen Einheiten verwendet. Da die Einheiten jedoch relativ zur Größe des Containers sind, hat die zweite Schaltfläche aufgrund ihres größeren Containers mehr Padding.

Containerabfragen verschachteln

Sie können Containerabfragen in Selektoren verschachteln.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

Oder Sie verschachteln sie in anderen Containerabfragen oder @-Regeln.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

Wissen testen