CSS 属性セレクターの「i」フラグの目的は何ですか?

CSS 属性セレクターの「i」は何をしますか?

CSS では、次のような「i」が追加された属性セレクターが表示されることがあります。 Google Chrome ユーザー エージェント スタイルシートの例:

[type="checkbox" i]

この「i」は、大文字と小文字を区別しない属性の一致を指定します。 CSS セレクター レベル 4 で導入された革新。

ブラウザの互換性

この機能は現在、Chrome (49 )、Firefox (47 )、Safari (9 )、 Opera (37)、当初は Chrome 39 あたりの Chrome のユーザー エージェント スタイルでのみ利用可能でした。Web 開発者は、実験的な機能を構成することで、Web コンテンツに対して Opera を有効にすることができました。 flag.

例

ブラウザのサポートをテストするための簡単なデモを次に示します:

<!-- Color will be green on supported browsers, red on unsupported -->

<div data-test="A"></div>

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

以上がCSS 属性セレクターの「i」フラグの目的は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。