CSSメディアクエリでマスタードをカットします

コアポイント

• 「マスタードの切断」テクノロジーは、JavaScriptを使用してブラウザ機能を検出し、追加のCSSとJavaScriptをロードして、コアエクスペリエンスに必要なファイルのみがロードされます。
• 著者は、CSSメディアクエリを使用して、ブラウザの機能に基づいてスタイルシートを条件付けてロードすることをお勧めします。したがって、JavaScriptを回避し、古いブラウザが新しいブラウザ向けに設計されたスタイルシートをロードするのを防ぎます。
• 著者は、ボディ要素に無害な非デフォルトCSS属性を使用し、JavaScriptとgetComputedStyleを使用して、サポートされているブラウザまたはスクリプトの実行のみを使用して、プロパティが設定されているかどうかを判断する方法を提案します。
• 著者は、すべてのディスカッションテクニックを組み合わせた最終コードを提供し、比較的新しいブラウザを検出し、古いブラウザーがスタイルを適用したりスクリプトを実行したりすることを防ぎ、開発者が新しいブラウザのビルド機能に集中できるようにします。

「マスタードの切断」は、BBCのトム・マスレンによって造られた用語です。この方法では、JavaScriptを使用してブラウザ機能をチェックし、より多くのCSSとJavaScriptをロードして「強化された」エクスペリエンスを提供します。

最近、「マスタードのカット」や「マスタードの切断」や「サーバー側のマスタードカット」を介して「Flexboxに移動する」、より広範囲にわたって進行性の強化など、「マスタードの切断」への関心が急増しています。

改善方法

私の経験では、非常に基本的な「コア」エクスペリエンスでさえ、いくつかの非常に古いブラウザに問題を引き起こす可能性があるため、これを改善して、非常に古いブラウザを完全に拒否できるかどうかを確認したいと思います。 HTMLのみを残します。

もちろん、JavaScriptを使用してすべてのCSSを条件付きでロードすることです（ブラウザが「マスタードの切断」テストに合格した場合）が、これはJavaScriptをロードできない最新の強力なブラウジングを感じますデバイスは、スタイルがまったくないために罰せられます。そこで、CSSのみを使用してこの問題を解決する方法を探しました。CraigBucklerの古い記事を見つけました。多くの実験と調整の後、私は次の方法を思いつきました：

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

ここで何が起こっているのかを分析しましょう。

動作原則最初の要素のメディアクエリは、次のブラウザにスタイルシートをロードできるようにすることができます。

ie 9<link>

ff 8

• オペラ12
• Chrome 29
• Android 4.4
• 2番目の
要素のメディアクエリは、次のブラウザにスタイルシートをロードできるようにすることができます。
Chrome 29

オペラ16 <link>

safari 6.1

• iOS 7
• Android 4.4
併用する場合、この手法は、ブラウザが次の場合を除き、スタイルシートをロードしません。
• ie 9
• ff 8
• オペラ12、16
• Chrome 29
• safari 6.1
• iOS 7
• Android 4.4

注：styleSheetは、<link>要素の数に関係なく1回のみロードされます。

以下に示すように、メディアクエリは、宣言を分離することにより、

>要素に結合することができます。 <link>

しかし、私は個人的にそれらを分離することを好みます。なぜなら、何が起こっているのかを見るのが簡単だと思うからです。

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

したがって、セマンティックでアクセスしやすい方法でタグを構築すると、レガシーブラウザは、プレーンHTMLでスタイリングしていないコンテンツを表示できます。

これはもちろん非常に主観的ですが、私のポイントは、これらのブラウザをまだ使用している人なら誰でも、必要なものを手に入れることができるはずだということです。これらのブラウザに新しいブラウザー用のCSSを提供することにより、一部のコンテンツが中断される可能性が非常に高いため、ページが完全に使用できないことを意味する場合があります。この方法を使用して、少なくとも1つのクリーンページを取得できます。さらに重要なことは、

これらのブラウザで再びテストする必要はありません。あなたは終わった！少なくとも、理論的には。

もちろん、サポートのニーズは異なる場合がありますが、このテクノロジーの利点は、これに基づいて構築できることです。たとえば、IE8のサポートを追加する必要がある場合は、条件付きアノテーションを使用して、そのブラウザに対してのみ同じStyleSheetをロードできます。 整理するピクセル比が1を超える古いWebKitデバイスをサポートする必要がある場合は、次のようにターゲットメディアクエリを備えた別の

要素を追加できます。

それ自体で、これはAndroid 2.2のStyleSheetのみをロードします（以前のバージョンをテストすることはできません）が、

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

その他の

要素に含まれているため、実際に他のこのセットのサポートを追加するだけですブラウザ。 <link>

ここで提供する

<code class="language-html"><!--[if IE 8]>
  <link rel="stylesheet" href="css/your-stylesheet.css">
<![endif]--></code>

要素のメインメディアクエリを変更して、必要なカスタムサポートを取得することもできます。ただし、これを行うには多くのテストが必要なので、注意してください！

"しかし、それらはハッキングです！" <link>

はい、そうだと思いますが、それはあなたの定義に依存します。メディアクエリは、CSSを適用する前にブラウザの機能をテストするように設計されており、それが間接的ではあるが、この場合にまさにやりたいことです。 <link> それにもかかわらず、私はそれがハッキングであるかどうかにかかわらず、テクノロジーに満足しており、すべてのテストで正常に機能し、すぐに生産サイトに使用する予定です。

効果のない

私がこれまでに行ったすべてのテストで、私は物事が期待どおりに機能していない状況が1つだけであることがわかりました。 Android 4.4では、UCブラウザはメディアクエリに応答しません。私の知る限り、UCブラウザはこれを説明しているWebKitの古いバージョンを使用しています。

このブラウザをサポートする場合は、少数のユーザーエージェントスニッフィングでCSSを強制することができます：

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

ボーナスとして、私の知る限り、JavaScriptはAndroid UCブラウザーで無効にすることができないため、ネットワークの障害などをしない限り、スタイルシートは常にロードする必要があります。

もちろん、他の特定のブラウザをサポートする必要があることがわかった場合は、いつでもユーザーエージェントのスニッフィング条件に追加できますが、このタイプの

CSSのみに違反するため、慎重に使用することをお勧めします。テクノロジーの目的。 さまざまなブラウザで基本的な方法をテストするためのテストページを作成しました。ブラウザが予想どおりに機能しない場合、または特定のブラウザまたはブラウザスコープのサポートを追加できる他のメディアクエリを見つけた場合は、コメントでお知らせするか、GitHubリポジトリの質問をしてください。

スクリプトをロードしますか？

OK、CSSを使用してブラウザサポートを検出する場合、サポートするブラウザ内のスクリプトの一部またはすべてをロードまたは実行する可能性が高いでしょう。では、どうすればこれを行うことができますか？

わかりました、これを行う方法はいくつかありますが、最も簡単なものは次のとおりです。

StyleSheetで、ボディ要素に無害な非デフォルトCSSプロパティを挿入します。

javaScriptと
• を使用して、属性がボディ要素に設定されているかどうかを判断します。
• 他のJavaScriptを設定、実行、またはロードする場合。 getComputedStyle
たとえば、
• 属性のデフォルト値は

です。ボディの

に設定すると、ページの表示にはほとんど影響がありません（そうであれば、他のプロパティを使用する必要があります）。したがって、スタイルシートのコードは次のようになります：clear none ページ（またはスクリプトファイル）：both

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

最終コード

<code class="language-html"><!--[if IE 8]>
  <link rel="stylesheet" href="css/your-stylesheet.css">
<![endif]--></code>

ハックであるかどうかにかかわらず、ここで表示しようとしているのは、比較的新しいブラウザを検出し、古いブラウザーがスタイルを適用したりスクリプトを実行したりするのを防ぐための再利用可能な方法であり、ページのHTMLのみを表示します。必要なコードはほとんどありません。また、よりモダンなブラウザの素晴らしい機能を構築することに焦点を当てることができるはずです。 ここで提供したすべてを必要としないかもしれませんが、すべての部品をまとめると、次の結果が得られます。

すべての追加コンテンツを含む別のテストページを作成しました（

謝辞

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:1.1)"></code>

Browserstackの仕事なしではこれを行うことはできません。BrowserhacksとJeff Claytonのスタッフを使用できます。関係者全員に感謝します。アイデアやフィードバックがあるかどうかを教えてください。 CSSメディアクエリと「マスタードカット」（FAQ）

に関するFAQ

CSSメディアクエリでは「マスタードのカット」とはどういう意味ですか？

CSSメディアクエリのコンテキストでは、「マスタードのCoting」は、完全なエクスペリエンスを提供する前に、ユーザーのブラウザが特定の機能をサポートするかどうかをWebサイトまたはWebアプリケーションがチェックするテクノロジーを記述するために使用されます。ブラウザが「マスタードを切断する」ことができない場合、よりシンプルでより基本的なWebサイトまたはアプリケーションバージョンが利用可能になります。このアプローチにより、すべてのユーザーがブラウザの機能に関係なく、Webサイトのコンテンツにアクセスできるようになります。

ブラウザが「マスタードを切断している」かどうかを判断する方法は？

ブラウザが「マスタードを切断」しているかどうかを判断するには、簡単なJavaScriptテストを使用できます。このテストでは、ブラウザが

やquerySelectorなどの特定の機能をサポートしているかどうかを確認します。ブラウザがテストに合格した場合、「マスタードの切断」と見なされ、ウェブサイトまたはアプリケーションの完全なエクスペリエンスを処理できます。 localStorage

なぜ「マスタードを切る」テクノロジーが重要なのですか？

「マスタードの切断」テクノロジーは、ブラウザの機能に関係なくすべてのユーザーがWebサイトまたはWebアプリケーションにアクセスできるようにするため、重要です。 「マスタードを切断する」ことができないブラウザにウェブサイトのよりシンプルなバージョンを提供することにより、すべてのユーザーがコンテンツにアクセスできるようにすることができます。

JavaScriptなしでCSSメディアクエリを使用できますか？

はい、JavaScriptなしでCSSメディアクエリを使用できます。ただし、CSSメディアクエリを使用してJavaScriptを使用すると、ブラウザー機能に基づいてユーザーによりテーラードエクスペリエンスを提供できます。

「マスタードの切断」テストでチェックされる可能性のある機能の例は何ですか？

「マスタードの切断」テストでは、

、

、querySelectorなどの機能をチェックする場合があります。これらはすべて最新のブラウザによってサポートされている機能ですが、古いブラウザでは利用できない場合があります。 localStorage addEventListener私のウェブサイトまたはWebアプリケーションで「マスタードのカッティング」テストを実装する方法は？

「Mustard Cutting the Mustard」テストを実装するには、簡単なJavaScriptテストを使用して特定の機能を確認できます。ブラウザがテストに合格した場合、CSSメディアクエリを使用して、Webサイトまたはアプリケーションの完全なエクスペリエンスを提供できます。

ブラウザが「マスタードを切断する」ことができない場合はどうなりますか？

ブラウザが「マスタードを切断する」ことができない場合、よりシンプルでより基本的なWebサイトまたはアプリケーションバージョンが得られます。これにより、すべてのユーザーがブラウザの機能に関係なくコンテンツにアクセスできるようになります。

「マスタードを切る」ことができないブラウザに提供するエクスペリエンスをカスタマイズできますか？

はい、「マスタードを切る」ことができないブラウザに提供するエクスペリエンスをカスタマイズできます。 CSSメディアクエリを使用して、これらのブラウザのWebサイトまたはアプリケーションの設計と機能をカスタマイズできます。

「マスタードの切断」テクノロジーを使用することの欠点はありますか？

「マスタードの切断」テクノロジーを使用する潜在的な欠点は、Webサイトまたはアプリケーションの簡素化されたバージョンを作成およびテストするために追加の開発時間が必要であることです。ただし、すべてのユーザーがコンテンツにアクセスできるようにすることの利点は、しばしばこの欠点を上回ります。

「マスタードの切断」テクノロジーは今日でも関連していますか？

はい、「マスタードの切断」テクノロジーは今日でも関連しています。最新のブラウザはさまざまな機能をサポートしていますが、それらをサポートしていない可能性のある古いブラウザを使用しているユーザーはまだたくさんいます。 「マスタードカッティング」テクノロジーを使用することにより、すべてのユーザーがWebサイトまたはアプリケーションにアクセスできるようにすることができます。

以上がCSSメディアクエリでマスタードをカットしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。