jQuery $().css("content") returning the string "normal" in IE9

Question

I'm using the CSS content attribute to pass some values from my LESS stylesheet to JavaScript (to use some colors defined in LESS in Canvas elements). To make my life easier I decided to place these values in a easy way to parse them in JavaScript.

LESS code:

div#colorChart-critical {
   content:'@{critical-highest},@{critical-veryhigh},@{critical-high},@{critical-low},@{critical-medium},@{critical-verylow}';
}

which when compiled brings the following CSS:

div#colorChart-critical6 {
    content: '#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00';
}

Then I try to read them using jQuery:

$("div#colorChart-critical").css("content").split(",");

The problem is that in IE9 calling $("div#colorChart-critical").css("content") is returning the string "normal" for some reason. Opera, Firefox, Safari and Chrome works fine.

Why does this happen in IE9?

Any work-around this issue on IE9? If not any other CSS atribute I can put random texts in?

I could use something like:

background: url(#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00);

But this would generate errors on the console.

Answer 1

It's because content as defined in CSS2.1 doesn't work on elements, only on the :before and :after pseudo-elements. IE9 is simply following the CSS2.1 spec here, which mandates that content on elements be computed to normal, always.

I don't know why other browsers would return the value you have defined, especially considering that .css() makes use of getComputedStyle() on those browsers. If they're implementing CSS2.1 content, then they're violating CSS2.1 by not computing the value to normal. If they're preparing for a late CSS3 implementation, whatever that may be, then it would make sense that they implement it on actual elements somehow... shame on them either way.

Which brings me to another point: if you're not actually trying to use CSS to modify the content of an element, don't use content, even if the fact that it's not defined for use with elements is the reason you're making use of this technique in the first place. You can try assigning those colors to certain classes, creating a hidden element and querying that element's color styles instead.

Answer 2

BoltClock answer shows the cause of my problems. I found a work-around by using the font-family instead of the content CSS property.

My LESS code:

div#colorChart-maincolors {
    font-family: '@{colorChart1},@{colorChart2},@{colorChart3},@{colorChart4},@{colorChart5},@{colorChart6}';
}

Which compiled into CSS gives:

div#colorChart-maincolors {
  font-family: '#c0392b,#2980b9,#2ecc71,#f1c40f,#ecf0f1,#34495e';
}

The string can be acquired using:

removeQuotes= function(string) {
   return string.replace(/^['"]+|\s+|\\|(;\s?})+|['"]$/g, '');
};
removeQuotes($("#colorChart-maincolors").css("font-family")); //add a .split(',') to get the colors as an array

The function removeQuotes is necessary because each browser adds a different kind of quotes into the return of getComputedStyle (and by extension the jQuery .css() method). IE9 adds a double quote, Webkit adds a single quote.

See this post on CSS tricks: http://css-tricks.com/making-sass-talk-to-javascript-with-json/ for more information.