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. Diese Informationen sind wesentlich detaillierter und nützlicher als Medienabfragen, die nur Größeninformationen über den Darstellungsbereich liefern.

Mit Containerabfragen können Sie wiederverwendbare Komponenten schreiben, die je nachdem, wo sie sich auf der Seite befinden, unterschiedlich aussehen können. Dadurch sind sie seiten- und vorlagenübergreifend robuster und reaktionsschneller.

Containerabfragen verwenden

Angenommen, Sie haben 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 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 die Regel @container verwenden, um Stile basierend auf dem nächstgelegenen übergeordneten Element festzulegen. 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;
  }
}

Geben Sie dem Container des übergeordneten Elements einen Namen, um es übersichtlicher und expliziter zu gestalten:

.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 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. In der folgenden Tabelle sehen Sie die möglichen Werte für die Containereinheit und deren Entsprechung in der Größe eines Containers:

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. Das heißt, sie wird mit zunehmender Inline-Größe (Breite) größer oder kleiner, wenn sie abnimmt. Um dies noch weiter auszubauen, können Sie mit der Funktion clamp() für Ihre Typografie eine Mindest- und Höchstgröße festlegen. Die Größe der Typografie richtet sich nach der Containergröße:

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

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

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

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

Die komprimierte Version beträgt weniger als 9 KB und nutzt 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 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 Geräten oder Geräten, die Containerabfragen nativ unterstützen, wird diese Ladeanzeige 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 wie @supports (container-type: inline-size) werden nach dem Laden des Polyfills übergeben.
• Vollständige Unterstützung der CSS-Syntax (es gibt keine Probleme mehr beim Platzieren von Kommentaren, wenn sie syntaktisch gültig sind).
• Vertikale Schreibmodi (über den Schreibmodus).
• Relative Containereinheiten (cqw, cqh usw.) werden innerhalb von Abfragebedingungen, Eigenschaftsdeklarationen und Animations-Keyframes unterstützt. rem und em werden in Abfragebedingungen unterstützt.
• Erweiterte Containerabfragesyntax: <ph type="x-smartling-placeholder">
  </ph>
  • 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 Funktionsabfragen orientation und aspect-ratio.
• Das korrekte Filtern von Abfragen anhand von Funktionen (z. B. ist die Abfrage von height auf container: inline-size im horizontalen Schreibmodus korrekterweise nicht zulässig).
• DOM-Mutation (z. B. die Elemente <style> und <link>, die zur Laufzeit entfernt werden)

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 @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 Same-Origin-CSS. Cross-Origin-Style Sheets und Style Sheets in iFrames (es sei denn, ein Polyfill wird manuell geladen) werden nicht unterstützt.
• Die Begrenzung von layout und style erfordert zugrunde liegende Browserunterstützung: <ph type="x-smartling-placeholder">
  </ph>
  • Safari 15.4 oder höher
  • Die Stilbegrenzung wird derzeit von 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 unangemessene Verzögerung des LCP zu vermeiden. Mit anderen Worten: Sie sollten sich bei First Paint niemals darauf verlassen.
• Generiert ResizeObserver Loop Errors. Auch beim ursprünglichen Polyfill ist dies der Fall, aber es lohnt sich, darauf hinzuweisen. 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 :where()-Problemumgehung ist für 2,23% der Browser erforderlich, die älter sind als: <ph type="x-smartling-placeholder">
  </ph>
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78