機能する新しいコンテナクエリポリフィル

ゲームを変えるコンテナクエリPolyFillが到着し、ブラウザ間のシームレスな互換性を提供します。 Chromeによって開発されたこのポリフィルは、簡単な実装を保証します。ネイティブサポートが不足しているブラウザに条件付きロードし、標準のコンテナクエリの構文を使用してCSSを書き、完璧な機能を享受します。

このユーザーフレンドリーなポリフィルは、開発を大幅に簡素化し、追加のCSSやPostCSS処理を必要とするCQFillなどの以前のソリューションとは対照的です。

軽量統合のためにポリフィルをロードする方法は次のとおりです。

 //サポートテスト
const supportscontainerqueries = "container" in document.documentelement.style;

//条件付きインポート
if（！supportscontainerqueries）{
  import（ "https://cdn.skypack.dev/container-query-polyfill"）;
}

NPMは別のオプションですが、この方法は物事を合理化し続けます。

コンテナクエリを使用するには、スタイルのあるコンテンツの周りにラッパー要素が必要です。スタイリングしている要素を直接照会することはできません。たとえば、天気ウィジェットを検討してください。

<div class="weather-wrap">
  <dl>
    <div>
      <dt>日曜日</dt>
      <dd>
<b>26°</b> 7°</dd>
    </div>
    <div>
      <dt>月曜日</dt>
      <dd>
<b>34°</b> 11°</dd>
    </div>
  </dl>
</div>

ラッパーはコンテナとして定義されます。

 .weather-wrap {
  コンテナ：インラインサイズ /天気装置。
  /* または： */
  /* container-type：inline-size; */
  /*コンテナ名：Weather-Wrapper; */

  / *オプション：テスト用のサイズ変更ハンドル */
  /* sezize：両方; */
  /*オーバーフロー：非表示; */
}

その後、グローバルおよびコンテナスコープスタイルが適用されます。

 。天気 {
  ディスプレイ：Flex;
}
@Container Weather-Wrapperサイズ（Max-Width：700px）{
  。天気 {
    フレックス方向：列;
  }
}

ポリフィルをWeather Widgetで紹介するより包括的なデモが利用可能です（入力で提供されていないため、デモへのリンクが省略されます）。 Bramusのブログには、便利なカードの例もあります。

ブラウザのサポートと考慮事項：

PolyFillは、Chrome/Edge 88、Firefox 78、およびSafari 14をサポートしています。これは、 ResizeObserver 、 MutationObserver 、および:is()に依存しています。 PolyFillドキュメントの詳細はわずかな制限ですが、コアユースケースは完全にカバーされています。

CHROMEでの公式SPECドラフトステータスと舞台裏サポートにより、広範囲のブラウザサポートが予想されます。ただし、正確なタイムラインは不確かなままです。

PolyFillの小型（約2.8kb）により、パフォーマンスが無視できるオーバーヘッドになり、コンテナクエリの採用が増加する可能性があります。

非スタイルのコンテンツのフラッシュ（FOUC）：

ポリフィルの非同期性は、潜在的なFoucを導入します。これを緩和するには、レンダリング（一般的に望ましくない）を遅らせる必要がありますが、短いFoucはコンテンツの遅延よりも望ましいです。ネイティブブラウザのサポートが遍在すると、この問題はそれ自体を解決します。

この堅牢なポリフィルで、今日のコンテナクエリのパワーを受け入れてください！あなた自身のデモと経験を共有してください。

以上が機能する新しいコンテナクエリポリフィルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。