Ein neuer Container -Abfrage -Polyfill, der gerade funktioniert

Eine bahnbrechende Container-Query-Polyfill ist eingetroffen, die eine nahtlose Kompatibilität in den Browsern bietet. Diese von Chrome entwickelte Polyfill sorgt für eine einfache Implementierung: Laden Sie sie bedingt für Browser ohne native Unterstützung, schreiben Sie Ihr CSS mit Standard -Container -Abfragensyntaxen und genießen Sie makellose Funktionen.

Diese benutzerfreundliche Polyfill vereinfacht die Entwicklung erheblich und im Gegensatz zu früheren Lösungen wie CQFILL, die zusätzliche CSS- und Postcss-Verarbeitung erforderten.

So laden Sie die Polyfill für die leichte Integration:

 // Support -Test
const SupportScontainerQueries = "Container" in document.documentElement.style;

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

NPM ist eine andere Option, aber diese Methode hält die Dinge optimiert.

Die Verwendung von Containerabfragen erfordert ein Wrapper -Element um den gestalteten Inhalt. Sie können das Element, das Sie stylen, nicht direkt abfragen. Betrachten Sie zum Beispiel ein Wetter -Widget:

<div class="weather-wrap">
  <dl>
    <div>
      <dt>Sonntag</dt>
      <dd>
<b>26 °</b> 7 °</dd>
    </div>
    <div>
      <dt>Montag</dt>
      <dd>
<b>34 °</b> 11 °</dd>
    </div>
  </dl>
</div>

Der Wrapper wird als Container definiert:

 .Weather-Wrap {
  Container: Inline-Größe / Wetter-Wrapper;
  /* oder: */
  /* Container-Typ: Inline-Größe; */
  /* Container-Namen: Wetter-Drapper; */

  / * Optional: Größengeschwindigkeitsgriff zum Testen *//
  /* Größenänderung: beides; */
  /* Überlauf: versteckt; */
}

Anschließend werden Global- und Container-Scoped-Stile angewendet:

 .Wetter {
  Anzeige: Flex;
}
@Container Weather-Wrapper-Größe (max. Width: 700px) {
  .Wetter {
    Flex-Richtung: Säule;
  }
}

Eine umfassendere Demo, die die Polyfill mit einem Wetter -Widget zeigt (Link zu Demo weggelassen, da sie nicht in der Eingabe bereitgestellt wird). Bramus 'Blog bietet auch ein nützliches Kartenbeispiel.

Browser -Unterstützung und Überlegungen:

Die Polyfill unterstützt Chrom/Rand 88, Firefox 78 und Safari 14 aufgrund ihrer Abhängigkeit von ResizeObserver , MutationObserver und :is() . Während die Polyfill -Dokumentation geringfügige Einschränkungen beschreibt, werden die Kernwendungsfälle vollständig behandelt.

Mit dem offiziellen Status des Spezifikums und der Unterstützung hinter der Flagge in Chrome wird eine weit verbreitete Browserunterstützung erwartet. Die genaue Zeitleiste bleibt jedoch ungewiss.

Die geringe Größe des Polyfills (ungefähr 2,8 KB) macht es zu einer vernachlässigbaren Leistungsaufwand, die möglicherweise die Akzeptanz von erhöhten Containerfragen erhöht.

Blitz von unstypischen Inhalten (Fouc):

Die asynchrone Natur des Polyfills führt einen potenziellen Fouc ein. Während die Minderung dies erfordert, dass das Rendering (im Allgemeinen unerwünscht) verzögert wird, ist der kurze Fouc für Inhaltsverzögerungen vorzuziehen. Das Problem wird sich selbst lösen, sobald der native Browserunterstützung allgegenwärtig wird.

Umfassen Sie die Kraft von Container -Abfragen heute mit dieser robusten Polyfill! Teilen Sie Ihre eigenen Demos und Erfahrungen.

Das obige ist der detaillierte Inhalt vonEin neuer Container -Abfrage -Polyfill, der gerade funktioniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!