Ein neues Container-Query-Polyfill, das einfach funktioniert

Es gibt jetzt ein Polyfill für Container Queries, das sich so perfekt verhält, wie ein Polyfill sein sollte

1. Sie laden es bedingt, wenn Sie feststellen, dass der Browser keine Container Queries unterstützt.
2. Sie schreiben CSS wie gewohnt, einschließlich des aktuellen, spezifikationskonformen Container-Queries-Syntaxcodes.
3. Es funktioniert einfach.

Es ist ziemlich großartig, ein so einfach zu bedienendes Container-Query-Polyfill zu haben, und das von Chrome selbst, den Vorreitern bei frühen Testimplementierungen. Es sieht so aus, als hätte Surma es zusammengestellt – danke, Surma!

Es gab ein Container-Query-Polyfill von Jonathan Neal namens cqfill, das dem hier vorausging. Ich bin mir nicht sicher, ob es offiziell veraltet ist, aber es erforderte zusätzliche, nicht-spezifikationskonforme CSS, um zu funktionieren, sowie PostCSS-Verarbeitung, daher würde ich es zugunsten dieses neueren Polyfills als veraltet betrachten.

Das Laden des Polyfills ist so

// Support Test
const supportsContainerQueries = "container" in document.documentElement.style;

// Conditional Import
if (!supportsContainerQueries) {
  import("https://cdn.skypack.dev/container-query-polyfill");
}

Sie können es von npm beziehen oder als <script> verwenden, aber diese Methode erscheint mir am besten, um die Dinge leicht und einfach zu halten.

Dann können Sie die Syntax für eine Container-Abfrage in CSS verwenden. Nehmen wir an, Sie haben ein Wetter-Widget in HTML. Sie benötigen ein zusätzliches Wrapper-Element für Ihre Abfragen. Das ist einfach die Regel: _Sie können nicht das Ding abfragen, das Sie stylen_.

<div class="weather-wrap">
  <dl class="weather">
    <div>
      <dt>Sunday</dt>
      <dd>
        <b>26°</b> 7°
      </dd>
    </div>
    <div>
      <dt>Monday</dt>
      <dd>
        <b>34°</b> 11°
      </dd>
    </div>
    <!-- etc -->
  </dl>
</div>

Der Wrapper wird als Container instanziiert

.weather-wrap {
  container: inline-size / weather-wrapper;
  /* Shorthand for: */
  /* container-type: inline-size; */
  /* container-name: weather-wrapper; */

  /* For quick testing, do this to get a resize handle on desktop: */
  /* resize: both; */
  /* overflow: hidden; */
}

Dann schreiben Sie globale Stile für diese Komponente sowie Container-Query-spezifische Stile

.weather {
  display: flex;
}
@container weather-wrapper size(max-width: 700px) {
  .weather {
    flex-direction: column;
  }
}

Beispiel für ein Container-Query-Polyfill

Hier ist diese etwas detailliertere Demo des Container-Query-Polyfills mit einem tatsächlichen Wetter-Widget

Ich habe das zuerst auf Bramus' Blog gesehen, und er hat eine klassische Karten-Demo mit diesem Container-Query-Polyfill. Scrollen Sie nach oben und unten. Sie sehen eine Reihe von Bärenkarten oben (wenn Ihr Browserfenster breit genug ist) und dann ähnliche Bärenkarten in verschiedenen Layout-Positionen darunter, die sich in schönere Formate verwandeln, wenn sie können, basierend auf der Container-Abfrage.

Browserunterstützung für Container-Query-Polyfill

Die Dokumentation des Polyfills besagt

Das Polyfill basiert auf ResizeObserver, MutationObserver und :is(). Daher sollte es in allen modernen Browsern funktionieren, insbesondere in Chrome/Edge 88+, Firefox 78+ und Safari 14+.

In dieser Dokumentation werden alle möglichen anderen kleineren Einschränkungen behandelt, einschließlich dessen, was unterstützt wird und was nicht. Es scheint mir hauptsächlich Nischenmaterial zu sein – die Haupt-/typischen Anwendungsfälle werden abgedeckt.

Ein Game Changer?

Während ich schreibe, haben wir hinter den Kulissen Unterstützung für Container Queries in Chrome gesehen, und es ist jetzt ein offizieller Spezifikationsentwurf

Heutige CSSWG-Besprechung

🥳 Erster öffentlicher Arbeitsentwurf für Contain Level 3 (Container Queries)
🥳 FPWD von Cascade Level 6 (Scope)

Das bedeutet, dass die Vorschläge zu offiziellen Spezifikationen im Arbeitsprozess aufgestiegen sind. Es ist noch viel zu tun, bevor die Browser sie unterstützen, aber es ist ein großer Schritt!

— Mia, on Bass (@TerribleMia) 8. Dezember 2021

Das ist extrem aufregend und deutet stark darauf hin, dass Browser Container Queries tatsächlich unterstützen werden, auch wenn sich die Syntax auf dem Weg noch ein wenig ändert (sie hat sich bereits mehrmals geändert). Aber natürlich haben wir keine Ahnung, ob/wann Container Queries erscheinen werden – und wenn diese magische Schwelle überschritten ist, wissen wir auch nicht, wo wir sie ohne große Sorgen einsetzen können, so wie wir es jetzt mit Flexbox und Grid tun können.

Das Datum "einfach benutzen" ist wahrscheinlich noch ein gutes Stück entfernt, aber wenn Sie die Idee des Polyfillings und des vorsichtigen Umgangs mit progressiver Verbesserung mögen, würde ich sagen, dass das Datum für die Verwendung von Container Queries ungefähr jetzt sein könnte. Das Polyfill-Skript kommt meiner Meinung nach mit 2,8 KB über die Leitung, was für etwas so Wichtiges ziemlich trivial ist.

Ich vermute, dieses Polyfill wird die Nutzung von Container Queries im kommenden Jahr sprunghaft ansteigen lassen.

FOUC?

Die Tatsache, dass Ihre Stile erst nach dem Herunterladen und Ausführen einer JavaScript-Datei korrekt angewendet werden, versetzt Websites in den Bereich Flash of Unstyled Content (FOUC). Hier ist eine Videoaufnahme, in der ich es auf meiner eigenen Demo sehen kann. Ich bin mir nicht sicher, ob es einen Weg gibt, dies zu umgehen, außer das Rendern absichtlich zu verzögern, was im Allgemeinen als No-Go gilt. Ähnlich wie beim Laden von Web-Schriften ist FOUC wahrscheinlich eine gute Sache, da es bedeutet, dass Ihr Inhalt niemals versteckt oder verzögert wird, auch wenn die Verschiebungen nicht ideal sind. Der FOUC sollte verschwinden, sobald die Browserunterstützung eintrifft und das Polyfill überhaupt nicht mehr geladen wird.

Viel Spaß beim Polyfilling von Container Queries! Ich würde gerne mehr Demos davon sehen.