Hasty Briefsbeta

The attr() function in CSS now supports types

6 days ago
https://www.amitmerchant.com/attr-function-types-css/
Copy Link
  • #Frontend
  • #Web Development
  • #CSS
  • The CSS `attr()` function now supports types, allowing attribute values to be treated as specific data types.
  • Previously, `attr()` only accepted a single argument (the attribute name) and returned values as strings.
  • New syntax: `attr(<attribute-name> type(<specific-type>))`, enabling use with properties beyond just strings.
  • Example: Setting element width using `attr(data-width type(<length>))` treats the attribute value as a length.
  • Practical use case: Customizing UI elements (e.g., charts) via HTML attributes like `data-width` and `data-color`.
  • Supported types include `<length>` and `<color>`, with more options detailed in external resources.
  • Current browser support is limited to Chromium-based browsers (Chrome 133+), but wider adoption is expected soon.
  • This enhancement promotes reusable, maintainable CSS with minimal code changes.
AboutLogin