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!

Es gibt gute Neuigkeiten: Eine der am meisten gefragten Entwicklerfunktionen ist jetzt 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 Containerabfrageeinheiten verwenden. Um die Verwendung größenbasierter Containerabfragen und cq-Einheiten noch einfacher zu machen, hat das Aurora-Team bei Chrome hart daran gearbeitet, die Containerabfrage-Polyfill so zu aktualisieren, dass mehr Browser und Anwendungsfälle unterstützt werden. So können Sie diese leistungsstarke Funktion sofort verwenden.

Was sind Containerabfragen?

Containerabfragen sind eine CSS-Funktion, mit der Sie eine Stillogik schreiben können, die auf Elemente eines übergeordneten Elements ausgerichtet ist, um die entsprechenden untergeordneten Elemente zu gestalten. Sie können ein echtes komponentenbasiertes responsives Design erstellen, indem Sie die Größe eines Elternteils abfragen. Das sind viel detailliertere und nützlichere Informationen als beispielsweise Media-Queries, 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. Dadurch sind sie seiten- und vorlagenübergreifend robuster und reaktionsschneller.

Containerabfragen verwenden

Angenommen, Sie haben folgenden HTML-Code:

<!-- 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 erfassen 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 @container-Regel Stile basierend auf dem übergeordneten Element festlegen. Schreiben Sie für ein Design wie das obige Bild, bei dem eine Karte von einer Spalte in zwei Spalten übergehen könnte, etwa so:

@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;
  }
}

Für mehr Übersichtlichkeit und Klarheit sollten Sie dem übergeordneten Element einen Namen geben:

.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 den vorherigen Code dann so um:

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

Container-Abfrageeinheiten

Containerabfragen lassen sich noch nützlicher machen, wenn Sie auch containerbasierte Einheitswerte verwenden. In der folgenden Tabelle sind die möglichen Werte für die Containereinheit und ihre Entsprechung in der Größe eines Containers aufgeführt:

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 containerbasierter Einheiten ist die responsive Typografie. Mit den auf dem Darstellungsbereich basierenden Einheiten (z. B. vh, vb, vw und vi) kann die Größe eines beliebigen 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 abnimmt. Mit der Funktion clamp() können Sie Ihrer Typografie ein Mindest- und Höchstmaß festlegen und sie dann basierend auf der Containergröße responsive anpassen:

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

Die Überschrift wird jetzt nie größer als 3rem oder kleiner als .5rem sein, nimmt aber zwischen diesen Werten 15 % der Inline-Größe des Containers ein.

In dieser Demo gehen wir noch einen Schritt weiter und aktualisieren die breiteren Karten, damit sie in einer Ansicht mit zwei Spalten kleiner erscheinen.

Polyfill für Containerabfrage

Da Containerabfragen eine so leistungsstarke Funktion sind, möchten wir, dass Sie sich damit vertraut machen können, sie in Ihre Projekte zu integrieren. Dabei ist die Browserunterstützung ein wesentlicher Teil davon. Aus diesem Grund haben wir Verbesserungen an Containerabfrage-Polyfill erarbeitet. Diese Polyfill wird allgemein unterstützt in:

Firefox (ab Version 69)
Chrome (ab Version 79)
Edge 79 und höher
Safari 13.4 oder höher

Sie hat nach der Komprimierung eine Größe von weniger als 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)
Bereichsanfragen (200px < width < 400px und width < 400px)
Einheiten der relativen Containerlänge (cqw, cqh, cqi, cqb, cqmin und cqmax) in Properties und Keyframes.

Polyfill für Containerabfrage verwenden

Um den Polyfill zu verwenden, fügen Sie folgendes Skript-Tag in den head-Abschnitt Ihres 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 einen Dienst auch verwenden, um den Polyfill basierend auf User-Agent bedingt bereitzustellen, oder ihn auf Ihrem eigenen Ursprung selbst hosten zu lassen.

Für eine optimale Nutzererfahrung wird empfohlen, das Polyfill anfangs nur für „below the fold“-Inhalte zu verwenden und @supports-Abfragen zu verwenden, um es vorübergehend durch eine Ladeanzeige zu ersetzen, bis das Polyfill zur Darstellung bereit ist:

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

  .loader {
    display: flex;
  }
}

In ausreichend schnellen Netzwerken und auf Geräten, die Containerabfragen nativ unterstützen, wird dieser Ladebalken nie angezeigt.

Neue Polyfill-Funktionen

Der aktualisierte Polyfill unterstützt:

Verschachtelte @container-Regeln.
Das Verschachteln von @container-Regeln unter @supports- und @media-Abfragen und umgekehrt wird unterstützt.
Bedingte CSS-Anweisungen wie @supports (container-type: inline-size) werden erst nach dem Laden der Polyfill-Funktion ausgeführt.
Vollständige Unterstützung der CSS-Syntax (es gibt keine Probleme mehr, wenn Kommentare an syntaktisch gültigen Kommentaren platziert werden).
Vertikale Schreibmodi (über „writing-mode“).
Containerbezogene Einheiten (cqw, cqh usw.) werden in Abfragebedingungen, Property-Deklarationen und Animations-Keyframes unterstützt. rem und em werden in Abfragebedingungen unterstützt.
Erweiterte Containerabfragesyntax:
- Bereichssyntax (z. B. (200px < width < 400px))
- Gleichheitsabfragen, z. B. (width = 200px).
Pseudoelemente wie ::before und ::after
Browser ohne :is(...)/:where(...) werden über eine optionale Problemumgehung unterstützt
Die Abfragen orientation und aspect-ratio
Abfragen werden korrekt anhand von Funktionen gefiltert. Beispiel: Die Abfrage von height nach container: inline-size ist im horizontalen Schreibmodus korrekterweise nicht zulässig.
DOM-Mutation (z. B. die Elemente <style> und <link>, die zur Laufzeit entfernt werden)

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

Einschränkungen und Warnungen für Polyfill

Wenn Sie das Polyfill für Containerabfragen verwenden, müssen Sie auf einige fehlende Funktionen achten:

Das Shadow DOM wird noch nicht unterstützt.
Relative Containereinheiten (z. B. cqw und cqh) werden in Abfragebedingungen vom Typ @media 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 Same-Origin-CSS. Cross-Origin Style Sheets und Style Sheets in iFrames (es sei denn, manuell ein Polyfill wird geladen) werden nicht unterstützt.
Die Begrenzung von layout und style erfordert zugrunde liegende Browserunterstützung:
- Safari 15.4 und höher
- Die Stilbegrenzung wird derzeit in Firefox nicht unterstützt. Wir arbeiten jedoch daran.

Warnungen

Damit FID und CLS nicht beeinträchtigt werden, gibt der Polyfill keine Garantien dafür, wann das erste Layout auftritt, auch wenn es synchron geladen wird. Der Polyfill wird lediglich versuchen, eine übermäßige Verzögerung des LCP zu vermeiden. Mit anderen Worten: Sie sollten sich bei First Paint niemals darauf verlassen.
Er generiert ResizeObserver Loop Errors. Das tut auch die ursprüngliche polyfill, aber es ist erwähnenswert. Dies liegt daran, dass sich die Blockgröße eines container-type: inline-size nach der Auswertung einer Abfrage wahrscheinlich ändert. ResizeObserver kann jedoch nicht mitteilen, dass Änderungen der Blockgröße keine Rolle spielen.
Dieses Polyfill wurde anhand von Webplattform-Tests getestet und wurde zu 70% bestanden, da bestimmte Funktionen wie JavaScript-APIs nicht mit Polyfills gefüllt sind. Daher liegt die Erfolgsquote absichtlich näher an 70%.
Die Behelfslösung für :where() ist für 2,23% der Browser erforderlich, die älter sind als:
- Safari 14
- Chromium 88
- Edge 88
- Samsung Internet 15
- Firefox 78