css - CSS3's attr() doesn't work in major browsers -
i have in html document:
<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">this should red, opacity of 0.5</a> and in css file:
.window > .content .wbutton.tint { border: solid thin attr(data-tint, color); box-shadow: inset 0 0 50px attr(data-tint, color); } firefox returns css error in firebug. doing wrong?
according w3c specs attr() function, should work.
(also, there's a page attr() in mdn wiki, assume should @ least work in firefox)
looking @ grammar that's given in spec:
attr( <attr-name> <type-or-unit>? [ , <fallback> ]? ) it looks comma between attribute name , unit used needs dropped:
.window > .content .wbutton.tint { border: solid thin attr(data-tint color); box-shadow: inset 0 0 50px attr(data-tint color); } however, if have right syntax, won't work either. turns out, there no known implementation of level 3 version of attr() yet of 2012 2013 2014 2015 2016 2017. make matters worse, it's still at-risk of latest editor's draft of spec.
but not lost: if you'd see feature implemented in upcoming browsers, there still time suggest in relevant feedback channels! here proposals have been put out far:
- microsoft edge platform, under consideration (ht lea verou!)
for record, basic level 2.1 version supported across recent versions of major browsers, including ie8+ , firefox 2+, , used content property :before , :after pseudo-elements generated content. mozilla developer network (mdn) browser compatibility table applicable version, , not css3 version.
Comments
Post a Comment