近日提供予定: CSS 機能クエリ (CSS 機能クエリ)_html/css_WEB-ITnose

Feature クエリは、「@supports」ルールをサポートする CSS3 条件付きルール仕様の一部です。「@supports」ルールを使用して、ブラウザーが CSS プロパティと値のペアをサポートしているかどうかをテストできます。 CSS 自体には、サポートされていない属性や値を無視するなどのダウングレード メカニズムがありますが、非常に重要な属性が直接無視される場合も非常に深刻です。この時点で、機能クエリを使用して、すべての CSS ルールがサポートされているかどうかをテストできます。ページも最適化してください。クエリは、Chrome、Firefox、Opera などのさまざまなブラウザですでに多くの安定した実装が行われています。ブラウザーのサポートは引き続き強化されているため、機能クエリを確認して、それが現在のプロジェクトに適しているかどうかを判断することが重要です。

CSS のフィーチャー クエリ

フィーチャー クエリはメディア クエリに似ています。簡単な例を挙げると、CSS マージン属性を実行するようにブラウザーに要求できます。

わかりません

よくわからない場合は、実際の例を挙げてみましょう。backgrund-blend-mode を使用して背景画像に色を付けたい場合は、元のグレースケール画像に色を追加できます。

オンライン デバッグ専用アドレス: http://www.gbtags.com/gb/debug/76f8c728-796d-48c7-a82f-f8400e8ba2a0.htm

すごいですね

この機能は素晴らしいですね。ただし、background-blend-mode のブラウザーのサポートは現在も改善されており、多くのブラウザーで使用できるようになりましたが、一部のブラウザーでは依然として望ましい効果を表示できません。 効果を表示できないブラウザでこの機能を実現するには、半透明のカラー オーバーレイと同様の方法を使用できます。

@supports (margin: 0) { /*CSS to apply*/ }

上記のコードでは、ブラウザが半透明カラーレイヤーをサポートしていない場合、背景は 1 つしか表示できません。 Feature Queryを使えば、状況に応じて背景を変更することができます。ここでの機能クエリはメディア クエリに似ており、@supports を使用し、括弧内に CSS 宣言を追加することで使用できます。

    body {    background-blend-mode: multiply;    background: linear-gradient(rgb(59, 89, 106)    , rgb(63, 154, 130))    , url(background.png);    }

JavaScript での機能クエリ

機能クエリは JavaScript インターフェース: CSS.supports もサポートしています。また、説明のために上記の例を使用します。ブラウザがbackground-blend-mode: multiplyをサポートしている場合は、bodyタグにblend-modeを追加できます。

オンライン デバッグ専用アドレス: http://www.gbtags.com/gb/debug/beef5e87-2159-45e9-872a-c85b51046e29.htm

    body {    background: #3F9A82;    background: linear-gradient(rgba(59, 89, 106, 0.8)    , rgba(63, 154, 130, 0.8))    , url(background.png);    }

    @supports (background-blend-mode: multiply) {    body {    background-blend-mode: multiply;    background: linear-gradient(rgb(59, 89, 106)    , rgb(63, 154, 130))    , url(background.png);    }    }

デモのように上記同様に、論理演算子 (and、or、not) を使用してテストを組み合わせることができます。たとえば、ブラウザでbackground-blend-modeとbackground属性値の両方をサポートしたい場合は、次のコンテンツを編集できます:

    window.onload = function() {    if (CSS.supports('(background-blend-mode: multiply)'))    document.body.classList.add('blend-mode');    }

または次のように書くことができます:

    body.blend-mode {    background-blend-mode: multiply;    background: linear-gradient(rgb(59, 89, 106)    , rgb(63, 154, 130))    , url(background.png);    }

機能クエリは間もなく利用可能になると思います。考慮する必要があるのは、それをいつ使用するか、そしてテスト時に同じブラウザで使用できることを確認する必要があります。機能クエリはパフォーマンスをあまり向上させませんが、コードをより制御しやすくすることができます。これらの新機能を試してみて、ご意見をお聞かせください。

オタクタグ - プロフェッショナルで正確な共有、興味のあるオタクをフォローしてください。コミュニティは優れた品質のチュートリアル、インタラクティブな教育を提供します

フロントエンドテクノロジーについて学ぶには、ギークインタラクティブコースライブラリとコードレコーディングにアクセスしてください

原文を読む: 近日公開: CSS 機能クエリ