jQuery $(). Css ("contenuto") restituisce la stringa "normale" in IE9

Question

Sto utilizzando l'attributo CSS content per passare alcuni valori dal mio foglio di stile MENO a JavaScript (per utilizzare alcuni colori definiti in MENO in tela elementi). Per semplificarmi la vita ho deciso di inserire questi valori in un modo semplice per analizzarli in JavaScript. Codice

MENO:

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

che una volta compilato porta il seguente CSS:

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

poi cerco di leggerli utilizzando jQuery:

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

Il problema è che in IE9 chiamando $("div#colorChart-critical").css("content") restituisce la stringa "normal" per qualche motivo. Opera, Firefox, Safari e Chrome funzionano bene.

Perché questo accade in IE9?

Qualche soluzione a questo problema su IE9? Se non ci sono altri codici CSS, posso inserire dei testi a caso?

potrei usare qualcosa di simile a:

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

ma questo sarebbe generare errori sulla console.

Answer 1

La risposta di BoltClock indica la causa dei miei problemi. Ho trovato un rimedio usando la famiglia di font al posto della proprietà CSS del contenuto.

Il mio codice MENO:

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

Quali compilato in CSS dà:

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

La stringa può essere acquisita tramite:

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 

I removeQuotes funzione è necessario perché ogni browser aggiunge un diverso tipo di virgolette al ritorno di getComputedStyle (e per estensione il jQuer y .css() metodo). IE9 aggiunge una doppia quota, Webkit aggiunge una singola citazione.

Vedere questo post sui trucchi CSS: http://css-tricks.com/making-sass-talk-to-javascript-with-json/ per ulteriori informazioni.

Answer 2

È perché content come definito in CSS2.1 non funziona sugli elementi, solo sugli pseudo-elementi :before e . IE9 sta semplicemente seguendo la specifica CSS2.1 qui, che mandates che content sugli elementi sia calcolata su normal, sempre.

Non so perché altri browser restituiscano il valore definito, specialmente considerando che .css() makes use of getComputedStyle() on those browsers. Se stanno implementando i CSS2.1 content, stanno violando i CSS2.1 non calcolando il valore su normal. Se si stanno preparando per un'implementazione CSS3 tardiva, qualunque cosa sia, allora avrebbe senso che lo implementassero su elementi reali in qualche modo ... vergogna su entrambi.

Il che mi porta ad un altro punto: se non stai effettivamente cercando di usare il CSS per modificare il contenuto di un elemento, non usare content, anche se il fatto che non sia definito per l'uso con gli elementi è il motivo stai facendo uso di questa tecnica in primo luogo. Puoi provare ad assegnare quei colori a determinate classi, creando un elemento nascosto e interrogando invece gli stili di colore di quell'elemento.

Answer 3

è possibile utilizzare per rimuovere replace(/["']/g, "") citazione extra da stringa

""string"" sarà cambiamento "string"