Data attributes with CSS not so useful?

Question

Am I missing something? This MDN example looked quite useful at first glance:

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

But this is little different to using

article[myAttr='3']{..., or article.cols3{...

either of which can be manipulated fairly easily with javascript/jQuery.

What would be very powerful is:

article[data-fieldwidth]{
 width: data-fieldwidth;
}

but this isn't described anywhere and doesn't work in any of my tests. Is that correct?

this width: data-fieldwidth; does't work (in css)

Mehdi Dehghani
– Mehdi Dehghani

2016-05-12 17:49:50 +00:00
Commented May 12, 2016 at 17:49 — Mehdi Dehghani
– Mehdi Dehghani, Commented May 12, 2016 at 17:49

Ram · Accepted Answer · 2016-05-12 17:51:25Z

2

If you want to get the value of an attribute you should use the CSS attr function. Currently the value of the property is not valuated and it's set as it is.

article[data-fieldwidth] {
 width: attr(data-fieldwidth);
}

But note that:

The attr() function can be used with any CSS property, but support for properties other than content(property) is experimental.

answered May 12, 2016 at 17:51

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Sewards Over a year ago

yikes, currently no browser support other than content, nice catch

Ram Over a year ago

@BenSewards Unfortunately. I'm sure implementing this feature in browsers can be very tricky.

Collectives™ on Stack Overflow

Data attributes with CSS not so useful?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related