@supports selector（）

@supportsルールのセレクターサポートを確認する機能は、驚くほど堅牢です！ property: valueペアの互換性のテストによく使用されますが、 selector()関数はセレクターサポートを評価する機能を拡張します。これは、セレクターを括弧内に配置するだけで行われます。

 @supports selector（：nth-​​child（1 of .foo））{
  / *セレクターがサポートされている場合に適用されるスタイル */
}

:nth-child(n of .foo)セレクター、「セレクターリスト引数」と互換性のある:nth-childファミリーセレクターは、良い例として機能します。現在、Safariのみがこの特定のセレクターをサポートしています。

セパレーターとシマウマの縞模様を使用してリストをスタイリングする必要があるシナリオを考えてみましょう。理想的には、このようなセレクターを使用して、セパレーターを無視しながらゼブラ縞模様を実現するでしょう。

 li：nth-​​child（odd of .list-item）{
  背景：Lightgoldenrodylower;
}

ただし、ブラウザのサポートが限られているため、 @supportsを使用してこのスタイルを条件付きで適用できます。

 @supports selector（：nth-​​child（1 of .foo））{
  li {
    パディング：0.25em;
  }
  li：nth-​​child（odd of .list-item）{
    背景：Lightgoldenrodylower;
  }
  li.separator {
    リストスタイル：なし;
    マージン：0.25em 0;
  }
}
@supports not selector（：nth-​​child（1 of .foo））{
  li.separator {
    高さ：1px;
    リストスタイル：なし;
    ボーダートップ：1pxダッシュパープル。
    マージン：0.25em 0;
  }
}

これにより、高度なセレクターのサポートがないブラウザにフォールバックスタイルが提供されます。 @whenと@elseを使用する可能性がある改良された構文は、これを簡素化する可能性があります。

 / *仮説的な将来の構文 */
@when supports（selector（：nth-​​child（1 of .foo）））{
  / *ブラウザをサポートするためのスタイル */
} @それ以外 {
  / *フォールバックスタイル */
}

JavaScript APIは、セレクターサポートをテストするために存在します。

 css.supports（ "selector（：nth-​​child（1 of .foo））"）

この方法は、Safariでtrueを返し、Chromeではfalse （執筆時点で）を返します。

@supportsルールは強力ですが、一貫性のないクロスブラウザーサポートを備えたCSSセレクターの数と、それらのセレクターに@supports必要とするユースケースの数は比較的少ないです。以前に問題があった多くのセレクター、 ::markerやケース非感受性属性セレクターなど、幅広いサポートを享受できます。 :fullscreenまたは:-webkit-full-screenのようなセレクターは、iOS Safariでのサポートが独自のサポートを欠いていないため、興味深い便利なアプリケーションを提供する場合があります。

以上が@supports selector（）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。