HTML5 データ属性を使用して CSS 値を設定できますか?

HTML5 データ属性を使用した CSS 値の設定

最近、HTML5 のデータ属性を使用して CSS 値を設定する可能性について疑問が生じました。質問で述べたように、「attr(data-width)」表記を使用して「width」などの CSS プロパティを設定しようとしても、現在は機能しません。

ただし、W3C CSS Values and Units Module Level 3 (CSS3) Values) には、https://www.w3.org/TR/css3-values/#attr-notation で説明されているように、この機能の規定が含まれています。

理論的には、次のようなコードが機能するはずです。 :

HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

残念ながら、この機能は標準の一部であるにもかかわらず、はまだドラフト形式であり、主要なブラウザには完全には実装されていません。ただし、疑似要素にコンテンツを設定する場合は機能します:

CSS

input::before { content: attr(data-placeholder) }

以上がHTML5 データ属性を使用して CSS 値を設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。