The latest Chrome 133 beta version reveals exciting advancements in CSS, notably enabling developers to use HTML attributes more freely for styling elements. This update allows attributes to be utilized in any CSS property instead of being confined to the content property. With the new 'attr()' function and type() specification, developers can easily format colors and other properties directly linked to attributes, unleashing a new wave of creativity and efficiency in web design.
Now we can hook into the data-size attribute and use the assigned value to set the element's font-size property, based in px units: h1 { color: attr(data-size px, 16); }.
It helps illustrate that there are three moving pieces here: We make up the attribute... the type() is a new deal that helps CSS know what sort of value it's working with.
Collection
[
|
...
]