Can You Set CSS Values Using HTML5 Data Attributes?

Setting CSS Values using HTML5 Data Attributes

Recently, a question arose regarding the feasibility of setting CSS values using HTML5's data- attributes. As mentioned by the question, attempts to set CSS properties like "width" using the "attr(data-width)" notation do not currently work.

However, the W3C CSS Values and Units Module Level 3 (CSS3 Values) does include a provision for this feature, as outlined in https://www.w3.org/TR/css3-values/#attr-notation.

In theory, code such as the following should work:

HTML

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

CSS

div { width: attr(data-width) }

Unfortunately, despite being part of a standard, this feature is still in draft form and not fully implemented in major browsers. However, it does function when setting content on pseudo-elements:

CSS

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

The above is the detailed content of Can You Set CSS Values Using HTML5 Data Attributes?. For more information, please follow other related articles on the PHP Chinese website!