Can CSS Values Be Assigned Directly Using HTML5 Data Attributes?

Accessing CSS Values with HTML5 Data Attributes

In CSS, it's possible to retrieve values from HTML5 data attributes using the attr() function. This functionality can be useful for controlling CSS properties dynamically based on information stored within the HTML markup.

However, assigning CSS values directly using data attributes was previously impossible. To determine if this feature has been implemented, the following CSS code can be inspected:

<code class="css">width: attr(data-width);</code>

This code attempts to set the width property of an element based on the value of the data-width attribute. If the feature is supported, the width should reflect the value specified in the HTML.

Within the provided HTML example:

<code class="html"><div data-width="600px"></div></code>

The width property should expand to 600 pixels if the browser supports using data attributes to assign CSS values. However, the current implementation of major browsers does not support this feature.

Fortunately, the ability to access CSS values from data attributes is specified in the CSS3 Values draft. As a result, full support is expected in future browser versions.

It's worth noting that using data attributes to retrieve content for pseudo-elements is currently functional, even though it's not yet widely supported for CSS value assignment.

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