CSS3 の `attr()` 関数が主要なブラウザで期待どおりに動作しないのはなぜですか?

CSS3 の attr() 関数は主要なブラウザではサポートされていません

HTML ドキュメント内:

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

CSS ファイル:

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

Firefox が表示しますFirebug の CSS エラー。 W3C 仕様によれば、attr() 関数は機能するはずですが、機能しません。

機能しない理由

仕様で指定されている文法属性名と使用する単位の間にカンマを削除する必要があります:

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

ただし、正しくても構文では、attr() 関数はまだ機能しません。 2020 年の時点では、どの主要ブラウザにも attr() のレベル 3 バージョンの既知の実装はありません。

問題の報告先

この機能の実装を希望する場合は、関連するフィードバックで提案してください。チャネル:

• Microsoft Edge プラットフォーム (現在検討中)

注: attr() 関数の基本レベル 2.1 バージョンは完全にサポートされていますすべての主要ブラウザの最新バージョンにわたって。ただし、生成されたコンテンツの :before および :after 疑似要素の content プロパティとともに使用されます。

以上がCSS3 の `attr()` 関数が主要なブラウザで期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。