14

i'm trying to use inline data-attributes as variables for css... is there any known option to get this run:

.mycss-class {text-shadow: attr(data-textshadow); }
<div class="mycss-class" data-textshadow="0 0 0 #000">lorem ipsum</div>

chrome dev-tool just reports "invalid property value"

many thanks & kind regards

G.K.
  • 206
  • 1
  • 2
  • 7
  • 3
    from https://developer.mozilla.org/en-US/docs/Web/CSS/attr: *Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental.* In other words, `attr` cannot be used with anything other than `content:`, if at all – Pete Sep 20 '17 at 13:23
  • 2
    If you are putting it into a data attribute, why not just bang it straight into a style attribute instead? – Pete Sep 20 '17 at 13:26
  • thank you, i already had feared it... the example was just a tiny version of a more complex construct. so "lorem ipsum" represents a hand full of dom nodes :) – G.K. Sep 20 '17 at 13:36
  • 1
    But if you are outputting that shadow into the data attribute, you can just change that data attribute to be `style="text-shadow: 0 0 0 #000"` and that will give that element the text shadow you are after? Or am I missing the point – Pete Sep 20 '17 at 13:39
  • 2
    the point is - i try to avoid inline-styles and keep a good content/code-ratio... if i can do without, ill do :) what i wanted, was "data-cstcolor="#dce568" and use this for textshadows, hovereffects, background-colors... and so on :) it will not work, but it would have been a nice clean solution... so... thanks again :) i guess i'll have to wait for css4 :D – G.K. Sep 20 '17 at 14:08

1 Answers1

23

You can do this with CSS Custom Properties.

Support is pretty good, including Edge (but no IE)

p {
  width:80%;
  margin:1em auto;
  text-shadow: 2px 6px 2px grey;
}

p.colored {
  color: var(--mycolor)
}

p.shadowed {
  text-shadow: 2px 6px 2px var(--shadowcolor);
}
<p class="colored" style="--mycolor:red;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam numquam aut aperiam excepturi id quaerat, fugiat, impedit natus maxime voluptates officia? Fuga earum quis exercitationem et fugiat, amet nam officiis?</p>

<p class="shadowed" style="--shadowcolor:green;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam numquam aut aperiam excepturi id quaerat, fugiat, impedit natus maxime voluptates officia? Fuga earum quis exercitationem et fugiat, amet nam officiis?</p>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161