attr()

[github-actions]

This GitHub issue is for collecting web developer signals for attr().

The attr() CSS function, in the context of any property, returns the value of an attribute of an HTML element, with the option to return it as a specific type or unit. You can set a default value for missing or invalid attributes.

Browser support

• Chrome: not supported
• Chrome Android: not supported
• Edge: not supported
• Firefox: not supported
• Firefox for Android: not supported
• Safari: not supported
• Safari on iOS: not supported

Give us feedback

If you're pressed for time, but you want this feature to be available in all browsers, please give this issue a thumbs up 👍 reaction.

However, a much better guide for us is to know how you'd use this feature, and what you're having to do in the meantime. This helps us judge the priority versus other features.

Copy the template below in a comment, and add the details that matter to you.

## What I want to do with this feature

<!-- Add your specific use-cases, even if they seem obvious to you. -->

## What I'm having to do in the meantime

<!--
Are you having to use another feature instead, a polyfill, or is it blocking you completely?
Why are the alternatives worse than using this feature?
-->

All comments are expected to adhere to the Code of Conduct.

Learn more

You can learn more about this feature here:

• caniuse.com
• web features explorer
• webstatus.dev
• Specification

[spartanatreyu]

I want a simple way to customise a component from within a CMS (content management system).

Injecting styles from a CMS is not simple.

Needing to rangle with template logic inside a HTML attribute (e.g. class, style) is not simple.

Needing utility classes is wasteful and removing unused classes is complex and brittle.

I should be able make an attribute, and put a value provided by the CMS into the attribute, and have CSS that works with every value of that attribute instead of needing pre-made styles or complex template conditions.

[jakearchibald]

@spartanatreyu can you give an example?

[5e-Cleric]

I want a simple way to customise a component from within a CMS (content management system).

Injecting styles from a CMS is not simple.

Needing to rangle with template logic inside a HTML attribute (e.g. class, style) is not simple.

Needing utility classes is wasteful and removing unused classes is complex and brittle.

I should be able make an attribute, and put a value provided by the CMS into the attribute, and have CSS that works with every value of that attribute instead of needing pre-made styles or complex template conditions.

I work with CMS all the time, how would this feature work better than inputing that information into a custom property (--foo) and using that value?

PS: i too recall wanting this feature, but can't find my own use example in the hundreds of documents created ever since, not to mention since it didn't work i probably reworked it to be done in some other fashion.

[thibaudcolas]

CMS use case I’d have liked to support with attr(): Support object-fit in image tags.

What I want to do with this feature

Style images based on their focal point for better UX when images resize to fit different viewport widths. The CMS that calculates focal points outputs data- attributes, then site themes can decide if they want to write the needed styles in their stylesheets. CSS could look like this, defined once for all images site-wide:

[data-w-focus-x] {
  object-fit: cover;
  object-position: attr(data-w-focus-x) attr(data-w-focus-y);
}

What I'm having to do in the meantime

You need a JS polyfill or equivalent bespoke implementation, or write inline style attributes (which are incompatible with a strict CSP). Or you need to write inline style tags like this for every <img> tag:

<style nonce="[…]">
  #wagtail-image-abc123randomid {
    object-position: 45% 31%;
  }
</style>

This is very inelegant / verbose to write, and the CSP consideration adds a layer of complexity, that simply wouldn’t be there with attr() for arbitrary properties.

[hfournier]

What I want to do with this feature

We're building a set of UI components that users can assemble into web pages. We want to dynamically assign an anchor name via prop, so that any element can be anchored to another.

<MyAnchorTarget data-anchor-name="--my-anchor-name" id="my-anchor-target-component" />

<MyToBeAnchored data-anchor-name="--my-anchor-name" id="my-to-be-anchored-component" />

<style>
  #my-anchor-target-component {
    anchor-name: attr(data-anchor-name)
  }
  
  #my-to-be-anchored-component {
    position-anchor: attr(data-anchor-name);
  }
  </style>

What I'm having to do in the meantime

The only way to do that now is by using the style attribute, like:

<MyAnchorTarget anchorName="--my-anchor-name" />

style={anchorName ? `position-anchor: ${anchorName};` : null}`

but using the style attribute is not compatible with CSP, so we're stuck at the moment with hard-coded values that are very limiting as you cannot have multiple instances of the same component on the page.