CSS で「i」フラグを使用すると、大文字と小文字を区別しない属性マッチングがどのように有効になりますか?

CSS 属性セレクターの「i」の意味を理解する

現代の Web 開発では、CSS 属性セレクターは要素のスタイル設定において重要な役割を果たします彼らの属性に基づいて。そのような属性の 1 つが「i」ですが、その重要性について疑問が生じる可能性があります。

CSS セレクターの解釈 [type="checkbox" i]

持っているスニペット[type="checkbox" i] は、CSS セレクター レベル 4 で新たに導入された機能、つまり大文字と小文字を区別しない属性マッチングの例を示しています。この機能により、大文字と小文字の違いに関係なく属性を一致させることができます。

可用性とサポート

現在、この機能はブラウザの主要バージョン全体で広くサポートされています。

• Chrome 49
• Firefox 47
• Safari 9
• Opera 37

ただし、バージョン 39 以降は Chrome のユーザー エージェント スタイルで利用可能ですが、Web コンテンツで使用するには実験的な機能を有効にする必要がありました.

ブラウザの例テスト

さまざまなブラウザでこの機能のサポートをテストするには、次の HTML/CSS スニペットを利用できます:

<br>[data-test] {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 100px;
height: 100px;
margin: 4px;