Diese Seite wurde von der Cloud Translation API übersetzt.

Containerabfragen landen in stabilen Browsern, während Polyfill ein großes Update erhält.

Una Kravets

Gerald Monaco

Jetzt neu: Containerabfragen!

Tolle Neuigkeiten: Eine der am häufigsten nachgefragten Entwicklerfunktionen ist jetzt auch in Webbrowsern verfügbar. Ab Chromium 105 und Safari 16 können Sie in diesen Browsern jetzt größenbasierte Containerabfragen erstellen und Werte für Container-Abfrageeinheiten verwenden. Um die Verwendung von größenbasierten Containerabfragen und cq-Einheiten noch einfacher zu machen, hat das Aurora-Team bei Chrome hart an der Aktualisierung von Container Query Polyfill gearbeitet, damit mehr Browser und Anwendungsfälle unterstützt werden. So können Sie diese leistungsstarke Funktion noch heute nutzen.

Was sind Containerabfragen?

Containerabfragen sind eine CSS-Funktion, mit der Sie Stillogik erstellen können, die auf Funktionen eines übergeordneten Elements ausgerichtet ist, um dessen untergeordnete Elemente zu gestalten. Sie können ein wirklich komponentenbasiertes responsives Design erstellen, indem Sie die Größe einer übergeordneten Ressource abfragen. Dies sind wesentlich detailliertere und nützlichere Informationen als Medienabfragen, die nur Größeninformationen zum Darstellungsbereich liefern.

ALT_TEXT_HERE

Mit Containerabfragen können Sie wiederverwendbare Komponenten schreiben, die je nach Position auf der Seite unterschiedlich aussehen können. Das macht sie seiten- und vorlagenübergreifend wesentlich robuster und reaktionsschneller.

Containerabfragen verwenden

Angenommen, Sie verwenden HTML:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

Wenn Sie eine Containerabfrage verwenden möchten, müssen Sie zuerst die Begrenzung für das übergeordnete Element festlegen, das Sie verfolgen möchten. Legen Sie dazu das Attribut container-type fest oder verwenden Sie das Kürzel container, um den Containertyp und den Containernamen gleichzeitig festzulegen.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

Jetzt können Sie mit der Regel @container Stile basierend auf dem nächstgelegenen übergeordneten Element festlegen. Für ein Design wie im obigen Bild, bei dem eine Karte von einer Spalte in zwei Spalten wechseln kann, schreiben Sie etwas wie:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

Geben Sie dem Container des übergeordneten Elements einen Namen, um die Übersichtlichkeit zu erhöhen:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

Schreiben Sie dann den vorherigen Code so um:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Container-Abfrageeinheiten

Um Containerabfragen noch nützlicher zu machen, können Sie auch containerbasierte Einheitenwerte verwenden. Die folgende Tabelle zeigt die möglichen Werte für Containereinheit und deren Größe:

Einheit	relativ zu
`cqw`	1% der Breite eines Abfragecontainers
`cqh`	1% der Höhe eines Abfragecontainers
`cqi`	1% der Inline-Größe eines Abfragecontainers
`cqb`	1% der Blockgröße eines Abfragecontainers
`cqmin`	Der kleinere Wert von cqi oder cqb
`cqmax`	Der größere Wert von cqi oder cqb

Ein Beispiel für die Verwendung von containerbasierten Einheiten ist die responsive Typografie. Mit den Darstellungsbereich-basierten Einheiten (z. B. vh, vb, vw und vi) kann die Größe jedes Elements auf dem Bildschirm angepasst werden.

.card h2 {
  font-size: 15cqi;
}

Mit diesem Code wird die Schriftgröße auf 15% der Inline-Größe des Containers angepasst, d. h. sie wird mit zunehmender Inline-Größe (Breite) größer oder kleiner, wenn sie kleiner wird. Sie können dies sogar noch weiterführen, indem Sie mit der Funktion clamp() Ihrer Typografie eine Mindest- und Höchstgröße zuweisen. Die Größe der Typografie wird dann entsprechend der Containergröße angepasst:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

Jetzt wird der Header nie größer als 3rem oder kleiner als .5rem werden, er nimmt aber 15% der Inline-Größe des Containers ein, irgendwo dazwischen.

Diese Demo geht noch einen Schritt weiter und aktualisiert die breiteren Karten, sodass sie einen kleineren Größenbereich haben, da sie in einer zweispaltigen Ansicht angezeigt werden.

Die Containerabfrage-Polyfill

Da Containerabfragen eine so leistungsstarke Funktion sind, möchten wir Ihnen die Möglichkeit geben, sie ohne Bedenken in Ihre Projekte zu integrieren. Dabei wissen wir, dass die Browserunterstützung ein wichtiger Teil davon ist. Aus diesem Grund haben wir daran gearbeitet, die Containerabfrage Polyfill zu verbessern. Dieser Polyfill wird allgemein unterstützt in:

Firefox 69 oder höher
Chrome 79 oder höher
Edge 79 und höher
Safari 13.4 oder höher

Die Komprimierung liegt unter 9 KB und verwendet ResizeObserver mit MutationObserver, um die vollständige @container-Abfragesyntax zu unterstützen, die derzeit in stabilen Browsern verfügbar ist:

Diskrete Abfragen (width: 300px und min-width: 300px)
Bereichsabfragen (200px < width < 400px und width < 400px).
Einheiten der relativen Länge des Containers (cqw, cqh, cqi, cqb, cqmin und cqmax) in Eigenschaften und Keyframes.

Polyfill für die Containerabfrage verwenden

Um Polyfill zu verwenden, füge dieses Skript-Tag in die Kopfzeile deines Dokuments ein:

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

Sie können auch einen Dienst nutzen, um den Polyfill auf der Grundlage von User-Agent bedingt bereitzustellen, oder ihn selbst hosten.

Für eine optimale Nutzererfahrung wird empfohlen, den Polyfill zu Beginn nur für Inhalte „below the fold“ zu verwenden und ihn mithilfe von @supports-Anfragen vorübergehend durch eine Ladeanzeige zu ersetzen, bis der Polyfill für die Anzeige bereit ist:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

Bei ausreichend schnellen Netzwerken und Geräten oder auf Geräten, die Containerabfragen nativ unterstützen, wird diese Ladeanzeige nie angezeigt.

Neue Polyfill-Funktionen

Das aktualisierte Polyfill unterstützt:

@container Regeln sind verschachtelte Regeln.
Das Verschachteln von @container-Regeln in @supports- und @media-Abfragen wird unterstützt und umgekehrt.
Bedingte CSS wie @supports (container-type: inline-size) werden übergeben, nachdem der Polyfill geladen wurde.
Vollständige CSS-Syntaxunterstützung (es gibt keine Probleme mehr mit der Platzierung von Kommentaren an beliebigen Stellen, an denen sie syntaktisch gültig sind).
Vertikale Schreibmodi (über den Schreibmodus)
Relative Containereinheiten (cqw, cqh usw.) werden in Abfragebedingungen, Eigenschaftsdeklarationen und Animations-Keyframes unterstützt. rem und em werden in Abfragebedingungen unterstützt.
Abfragesyntax für erweiterten Container:
- Bereichssyntax (z. B. (200px < width < 400px)).
- Gleichheitsabfragen (z. B. (width = 200px))
Pseudoelemente wie ::before und ::after.
Browser ohne :is(...)/:where(...) werden durch eine optionale Problemumgehung unterstützt
Die Funktionsabfragen orientation und aspect-ratio.
Das korrekte Filtern von Abfragen basierend auf Funktionen (z. B. ist das Abfragen von height in container: inline-size im horizontalen Schreibmodus korrekt unzulässig).
DOM-Mutation (z. B. <style>- und <link>-Elemente, die zur Laufzeit entfernt werden)

Hinweis:Der aktualisierte Polyfill für Containerabfragen unterstützt nicht mehr die Abfragesyntax für veraltete Legacy-Größen, bei der Nutzer Größenabfragen in size() zusammenfassen müssen (z.B. size(width >= 200px)).

Einschränkungen und Warnungen für Polyfill-Daten

Wenn Sie die Polyfill-Funktion für Containerabfragen verwenden, gibt es einige fehlende Funktionen, auf die Sie achten sollten:

Das Shadow DOM wird noch nicht unterstützt.
Relative Containereinheiten (z. B. cqw und cqh) werden in @media-Abfragebedingungen nicht unterstützt.
- Safari: Relative Containereinheiten werden in Animations-Keyframes vor Version 15.4 nicht unterstützt.
calc(), min(), max() oder andere mathematische Funktionen werden in Abfragebedingungen noch nicht unterstützt.
Dieser Polyfill funktioniert nur mit Inline- und CSS-Code mit demselben Ursprung. Ursprungsübergreifende Stylesheets und Stylesheets in iFrames werden nicht unterstützt (es sei denn, ein Polyfill wird manuell geladen).
Die Begrenzungen layout und style erfordern eine zugrunde liegende Browserunterstützung:
- Safari 15.4 oder höher
- Firefox unterstützt derzeit keine Stilbegrenzung. Wir arbeiten jedoch daran.

Warnungen

Um Auswirkungen auf FID und CLS zu vermeiden, übernimmt Polyfill keine Garantie dafür, wann das erste Layout auftritt, auch wenn es synchron geladen wird. Es wird lediglich versucht, eine unangemessene Verzögerung des LCP zu vermeiden. Mit anderen Worten: Sie sollten sich bei der Erstmalung nie darauf verlassen.
Generiert ResizeObserver Loop Errors. Der Original-Polyfill macht das auch, aber es lohnt sich. Dies liegt daran, dass sich die Blockgröße eines container-type: inline-size-Objekts nach der Auswertung einer Abfrage wahrscheinlich ändert, ResizeObserver aber nicht erkennen kann, dass Änderungen an der Blockgröße für uns unwichtig sind.
Dieses Polyfill wurde anhand von Webplattform-Tests getestet und hat 70% erreicht, da bestimmte Funktionen wie JavaScript APIs nicht mit Polyfills versehen sind und die Erfolgsquote absichtlich nahe an 70 % liegt.
Die :where()-Problemumgehung ist für 2,23% der Nutzer von Browsern erforderlich, die älter sind als:
- Safari 14
- Chromium 88
- Edge 88
- Samsung Internet 15
- Firefox 78