Why do firefox & chrome fail to accept attr() in CSS with pseudo-elements?

Question

This is what I tried in JSFiddle. It's working fine in JSFiddle. I am able to access attr() that is associated with CSS. But when I try this in Firefox and Chrome the browsers are not ready to accept it. Firefox immediately discards this property, and Chrome strikes it and adds a warning symbol. Why are these browsers not accepting this attr()? How does JSFiddle accept it?

$('div').hover(
    function()
    {
        $(this).attr('data-content',':over');
        alert($(this).attr('number'));
    },
    function()
    {
       $(this).attr('data-content',':out');
       alert($(this).attr('number',200+parseInt($(this).attr('number'))));
    }
);

div::after 
{
    content: attr(data-content);
    top: attr(number px);
}

JSFiddle isn't a browser. It also isn't a compiler, so it doesn't spit errors at you at code that does not appear to work in the browser. — BoltClock, May 02 '14 at 06:00
Where are you putting these functions? They are firing differently depending on browsers if you put it in your `$(document).ready` handler or `window.onload` handler. — urbz, May 02 '14 at 06:01
I have seen JSFidle documentation and FAQ. If anything doesn't work in browsers but working in JSFiddle , they are advised us to add all the libraries they added . Is it safe? — Gibbs, May 02 '14 at 06:23

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

CSS attr() doesn't work with anything but the content property at the moment, because that's the only property it was defined for in CSS2.1, which is the only version of attr() that all browsers support at the moment. The more expansive version of attr(), defined in CSS3, isn't supported by any browsers yet — see my answer to this question.

If you really need to set the top property or any other property of a pseudo-element according to a data attribute value, you'll have to take the long route: you'll need to alter the document stylesheet using JavaScript, e.g. by using addRule()/insertRule() with jQuery's .attr() method to construct your CSS rules. You can't directly access pseudo-elements using jQuery.

edited May 23 '17 at 11:56

Community

1
1

answered May 02 '14 at 06:02

BoltClock

700,868
160
1,392
1,356

Yeah ! I have seen this answer already that it doesn't work with others except content. But i am little bit confused with the example 20 at http://www.w3.org/TR/css3-values/#attr-notation – Gibbs May 02 '14 at 06:08
What about it confuses you? – BoltClock May 02 '14 at 06:11
I want to access top property of a pseudo-element. I have found lots of answers including yours too like 'addRules', 'insertRule' , 'attr()' .. but none of them are working. – Gibbs May 02 '14 at 06:12
They used attr() with width property. That's the thing confused me – Gibbs May 02 '14 at 06:13
1

Yes, those are examples of how the spec works. The problem is that browsers don't support the new spec yet, which is why it doesn't really work. – BoltClock May 02 '14 at 06:14
+1 Thanks for your comment. So the problem is with browsers!! Is there any way to access top property of a pseudo-element. – Gibbs May 02 '14 at 06:16

Why do firefox & chrome fail to accept attr() in CSS with pseudo-elements?

1 Answers1