CSS @supportsルール（機能クエリ）の紹介

キーテイクアウト

• CSSの@Supportsルールにより、開発者は機能検出を実装し、ブラウザが特定のCSSプロパティ/値ペアをサポートしているかどうかを確認し、それに応じてスタイルを適用することができます。これは、高度なテクノロジーの不均一なブラウザのサポートを処理するためのプログレッシブエンハンスメントアプローチの一部です。
• javaScriptは、CSSインターフェイスとsupports（）関数を使用して、CSS機能クエリと組み合わせて使用​​できます。この関数は、ブラウザが特定のCSSプロパティをサポートするかどうかを示すブール値を返します。
ほとんどの最新のブラウザは@Supportsルールをサポートしていますが、Internet Explorer 11とOpera Miniはそうではありません。したがって、開発者は、すべてのターゲットブラウザが処理できるベーススタイルを定義し、@Supportsを使用して、新しい機能を処理できるブラウザでこれらのスタイルをオーバーライドおよび補完する必要があります。
ブラウザの最新のテクノロジーに対する不均一なサポートに取り組むための2つの一般的なアプローチは、優雅な劣化と進歩的な強化です。
• 優雅な劣化は、高度なテクノロジーを活用して、洗練されたユーザーエクスペリエンスと機能を設計します。あまり能力の低いブラウザのユーザーは、まだウェブサイトにアクセスすることができますが、機能のレベルの低下と閲覧エクスペリエンスを享受します。
進行性の強化により、開発者はほとんどのブラウザーがサポートできるユーザーエクスペリエンスのレベルを設計することにより、ベースラインを確立します。それらのアプリケーションは、ブラウザの機能の組み込み検出を提供します。これを使用して、より高度な機能を利用できるようにし、それに応じて豊富なブラウジングエクスペリエンスを提供します。

プログレッシブエンハンスメントアプローチで最も広く採用されているツールは、Modernizr JavaScriptライブラリです。

Modernizrは、ブラウザが次世代のWebテクノロジーをサポートしているかどうかをプログラムでチェックし、それに応じてTrueまたはFalseを返します。この知識で武装して、あなたはブラウザのサポートにおいて新機能を活用できますが、古いブラウザーまたは非競争的なブラウザに対応する信頼できる手段があります。

これが聞こえるのと同じように、さらに良いことはしばらくの間醸造されてきました。 @supportsルールを使用して、ネイティブCSS機能クエリを使用して機能検出を実行できます。 この投稿では、@Supportsとそれに関連するJavaScript APIをさらに掘り下げます。 でブラウザ機能を検出します メディアクエリを使用すると、ビューポートの幅や高さなどの表示機能を検出できますが、 @supportsを使用すると、CSSプロパティ/値ペアのブラウザサポートを確認できます。

基本的な例を考慮すると、WebページにCSSブレンドを使用して強化したいアートワークが表示されているとしましょう。事実、CSSブレンドモードは、非サポートブラウザーで優雅に劣化しています。ただし、そのような場合にブラウザがデフォルトで表示するものの代わりに、等しく特別なものを等しく壮観ではないにしても、非サポートブラウザーのユーザーを喜ばせることができます。これは、@supportsとStyleSheetでCSSブレンディングのチェックを実行する方法です：

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

ミックスブレンドモードサポートがないブラウザにさまざまなスタイルを適用するには、この構文を使用します。

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

注意すべきいくつかのこと：

テストしている状態は、括弧内にある必要があります。言い換えれば、@supports mix-blend-mode：overlay {...}は無効です。ただし、必要以上に括弧を追加すると、コードは問題ありません。たとえば、@supports（（mix-blend-mode：overlay））が有効です
• 条件には、プロパティと値の両方を含める必要があります。上記の例では、ミックスブレンドモードプロパティとそのプロパティのオーバーレイ値をチェックしています。
テストする宣言でトレーリングを追加することは、コードの有効性に影響しません。
小さなデモで上記の例を具体化しましょう。 Mix-Blend-Modeサポートを備えたブラウザは、@supports（）{...}ブロック内のスタイルを適用します。他のブラウザは、@supports not（）{...} block。
• 内部にスタイルを適用します。
html：

css：

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027307262599.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS @supportsルール（機能クエリ）の紹介" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

codepen：

のデモをチェックしてください

CodePenのSitePoint（@SitePoint）によるペン@Supportsルールデモを参照してください。 一度に複数の条件をテストする

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

@supportsで機能テストを行う場合、一度に1つのテスト条件に限定されません。のような論理演算子を組み合わせると、既に言及されていない演算子を組み合わせることで、一度に複数の機能をテストすることができます。

congunction

複数の

必要

条件の存在についての演算子テスト：

分離またはキーワードを使用することにより、一連のスタイルの複数の代替機能が存在することをテストできます。これらの代替品の一部がプロパティまたは値にベンダーのプレフィックスを必要とする場合、これは特に便利です。

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

同じ@supportsルールの条件を組み合わせて、またはテストすることもできます。

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

多くの条件をグループ化すると、括弧の正しい使用が重要です。キーワードを混合していないことは、動作しません。また、括弧内の条件をグループ化する方法は、評価される順序を確立します。上記のスニペットでは、分離主義者または条件が最初に評価され、次に結果の回答が、およびキーワードによって導入されたさらなる必要な条件に対して評価されます。

NOTキーワードでは、一度に1つの条件をテストできます。たとえば、以下のコードは有効ではありません：

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

代わりに、括弧内のキーワード内ではないキーワードで否定している条件をすべて>すべてグループする必要があります。上記のスニペットの修正バージョンは次のとおりです

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  alt="CSS @supportsルール（機能クエリ）の紹介" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

最後に、and andまたは。

アクション中の演算子

ブラウザが次の構文を使用してグラデーションとブレンドモードの両方をサポートしている場合、一連のスタイルを適用できます（表示目的で以下のコードを複数の行に分割しました）：

一部の古いAndroidブラウザでは、線形勾配に-webkit-プレフィックスが必要なため、この条件を@supportsブロックに組み込むことにより、ブラウザのサポートを確認しましょう。

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

あなたのウェブサイトが、執筆時点ではサファリではサポートされていない光度と飽和ブレンドモードを使用しているとしましょう。あなたはまだそれらのブラウザに代替スタイルを提供したいので、以下に@supportsを使用して適切な接続条件を設定する方法を次に示します。

このセクションのすべてのデモは、Codepenで入手できます：

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

CodepenのSitePoint（@SitePoint）による@Supportsを使用した複数の機能テストでペンデモを参照してください。 CSS機能クエリを備えた

javaScript

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

JavaScript CSSインターフェイスとSupports（）関数を使用して、CSS機能クエリを利用できます。 css.supports（）関数を2つの方法のいずれかのいずれかで記述できます。

以前の最も広くサポートされている構文は、2つの引数、つまり

プロパティ

および

値

を取得し、ブールの真または偽の値を返します：

引用符の内側にプロパティとその対応する値を配置することを確認してください。仕様は、上記の関数が次の2つの条件を満たしている場合にtrueを返すことを明らかにしています。

• プロパティは、ブラウザがサポートする「CSSプロパティの名前の文字通りの一致」です。
値は「そのプロパティのサポートされた価値として正常に解析される」。

by

文字通りの一致仕様は、CSSエスケープが処理されず、空白がトリミングされていないことを意味します。したがって、キャラクターを逃れたり、後続の空白を離れたりしないでください。そうしないと、テストが偽りになります。

代替の新しい構文は、括弧内に1つの引数のみを取得します。

この構文を使用すると、ANDおよびまたはキーワードを使用して複数の条件をテストするのが便利です。

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

簡単な例を示します。ブラウザが光度ブレンドモードをサポートしているかどうかをテストしたいとします。もしそうなら、JavaScriptはターゲット要素に光度ブレンドのクラスを動的に追加します。そうしないと、ノルミン性のクラスが追加されます。その後、CSSはそれに応じて要素をスタイリングします。

ここにCSS：

があります

2つのargument構文に従うと、JavaScriptスニペットは次のとおりです。

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

最新の単一argumentの構文を希望する場合は、上記のコードの対応する行を以下のものに置き換えるだけです。

デモをチェックしてみてください：

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  alt="CSS @supportsルール（機能クエリ）の紹介" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

CODEPENのSitePoint（@SitePoint）のCSS機能クエリのペンJavaScript APIを参照してください。

ブラウザサポート

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

メジャーブラウザのすべての最新バージョンは、Internet Explorer 11とOpera Miniを除き、@Supportsルールをサポートしています。 @supportsは現実の世界の準備ができていますか？ティファニーブラウンの言葉でこの質問に対する最良の答えを見つけました：

…@supports内でミッションクリティカルなスタイルを定義することに注意してください…

あなたのベーススタイルを定義します - あなたのターゲットのすべてのスタイル

ブラウザは処理できます。次に、@supportsを使用して、オーバーライドおよびサプリメント

を使用します 新しい機能を処理できるブラウザ内のこれらのスタイル。

cssマスター、p.303

結論
この記事では、 @Supportsルール（a.k.a機能クエリ）でネイティブCSSブラウザー機能の検出を検討しました。また、対応するJavaScript APIを通過しました。これにより、柔軟なCSS.Supports（）メソッドを使用して、最新のCSSプロパティのブラウザサポートの現在の状態を確認できます。 CSS機能クエリのブラウザサポートは良いですが、すべてのベースをカバーするわけではありません。ただし、Tiffany Brownが示唆するように、プロジェクトで@Supportsを使用したい場合は、CSSドキュメントにスタイルを戦略的に配置し、CSS-Supports.jsポリフィルが役立ちます。

この記事でデモを試した場合、または@supportsを使用して実際の経験をした場合、私はあなたから聞いてみたいです。に関するよくある質問

機能クエリとも呼ばれるCSS @supportsルールは、ブラウザーが特定のCSS機能をサポートするかどうかをチェックする条件付きルールです。機能がサポートされている場合、ブラウザは@Supportsルール内のスタイルを適用します。そうでない場合は、それらを無視します。これにより、開発者は古いブラウザーとの互換性を維持しながら、新しいCSS機能を使用できます。構文は@supportsに続いて、このような括弧内の機能とその値が続きます。 CSS @supportsルールでは？

@supportsルールの「not」オペレーターを使用して、ブラウザがCSS機能をサポートしていないかどうかを確認できます。たとえば、@supports not（display：grid）{ / *グリッドがサポートされていない場合に適用するスタイル * /}。ブラウザがCSSグリッドをサポートしていない場合、これによりスタイルが適用されます。

ブラウザが@supportsルールをサポートしていない場合はどうなりますか？

CSS機能のブラウザサポートを確認するためのツールはありますか？

はい、CSS機能のブラウザサポートを確認するのに役立つツールがいくつかあります。最も人気のあるものの1つは、私が使用できることです。これは、幅広いCSS機能のブラウザサポートに関する最新情報を提供します。はい、メディアクエリと組み合わせて@Supportsを使用して、機能サポートとビューポートのサイズの両方に基づいてスタイルを適用できます。これは、新しいCSS機能を活用するレスポンシブなデザインを作成するのに非常に便利です。

以上がCSS @supportsルール（機能クエリ）の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。