This article explores a simplified method to access and use the current value of the <progress> element through the new attr() function in CSS. Previously, complex scroll-driven animations were used to dynamically display values, but now with attr(), developers can directly manipulate the content and style of tooltips using custom properties without any additional markup. The article highlights the differences and benefits of using attr() over scroll-driven animations, particularly noting that while both methods have their use cases, attr() offers a more straightforward solution for accessing and styling progress values.
Getting the progress value using attr() is now simpler, allowing us to use the percentage of progression in custom properties without complex code.
Using attr() function with custom properties is a game changer, enabling straightforward styling of the <progress> element without needing additional markup.
Collection
[
|
...
]