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

css, internet-explorer, javascript, jquery

Solution

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.

Problem

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.

Original source