CSS3 の「attr()」関数が最新のブラウザで失敗するのはなぜですか?

主要ブラウザでの CSS3 の attr() 関数の誤動作

W3C 仕様ではそうでないと主張しているにもかかわらず、Firefox ユーザーが利用しようとするとエラーが発生する可能性があります属性() function.

構文エラー:

次の CSS:

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

Firebug で構文エラーが生成されます。

理由失敗:

CSS 文法を調べると、属性名と単位の間のカンマを省略する必要があることがわかります:

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

ただし、構文が正しい場合でも、エラーが継続します。

不足実装:

残念ながら、2020 年の時点で、主要なブラウザにはレベル 3 attr() 関数の既知の実装はありません。リスクがあるにもかかわらず、この機能は CSS 仕様の編集者草案に残っています。

実装の支持:

この機能が CSS 仕様に実装されることを希望するユーザーfuture は、関連するフィードバック チャネルを通じてサポートを表明できます。現在の提案には以下が含まれます:

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

注:

attr の基本レベル 2.1 バージョン() は広くサポートされており、生成されたコンテンツの content プロパティとともに使用されます。

以上がCSS3 の「attr()」関数が最新のブラウザで失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。