CSS3 の `attr()` 関数は迷信ですか? ブラウザの互換性と実装について見てみましょう。

CSS3 の attr() 関数: 主要なブラウザにおける蜃気楼

多くの開発者は、特にブラウザーで CSS3 attr() 関数を使用する際に困難に遭遇しています。ファイアーフォックス。 W3C 仕様に含まれているにもかかわらず、未実装の機能のままです。

構文と例

attr() 関数の構文は次のとおりです。

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

たとえば、次の CSS コードは、要素の境界線の色とボックスの影を設定しようとします。 data-tint 属性の値:

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint, color);
    box-shadow: inset 0 0 50px attr(data-tint, color);
}

なぜ機能しないのか

仕様の要件を満たしているにもかかわらず、このコードは機能しません。タイプまたは単位を指定する機能を導入した attr() のレベル 3 バージョンは、どのメジャー バージョンにも実装されていませんブラウザ。

現在の実装ステータス

2020 年現在、レベル 3 attr() 関数の既知の実装はありません。最新の編集者による仕様草案でも依然として危険にさらされています。

ブラウザのサポート

コンテンツ プロパティで使用される attr() のレベル 2.1 バージョン生成されたコンテンツについては、すべての主要なブラウザで完全にサポートされています。 MDN ブラウザの互換性テーブルは、このバージョンにのみ適用され、レベル 3 のバージョンには適用されません。

行動喚起

レベル 3 の attr() 関数を参照したい開発者実装されたユーザーは、次のチャネルを通じてフィードバックを提供できます:

• Microsoft Edge プラットフォーム: 現在検討中 (Lea に感謝)ヴェロウ!)

以上がCSS3 の `attr()` 関数は迷信ですか? ブラウザの互換性と実装について見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。