Quando uma folha de estilo é adicionada a document.styleSheets
Estou tentando adicionar dinamicamente uma regra de folha de estilo css usando javascript, algo como o exemplo 2aqu.
Funciona a maior parte do tempo, mas parece haver uma condição de corrida que falha algumas vezes no (pelo menos) Chrome (15.0.874 e 17.0.933). Isso acontece com pouca freqüência quando o cache está vazio (ou foi limpo).
Aqui está o que eu tenho sido capaz de reduzi-lo. Primeiro, carrego uma folha de estilo externa anexando-a a<head> e, em seguida, crio uma nova folha de estilo (onde adicionaria regras). Em seguida, imprimo o comprimento dedocument.styleSheets (imediatamente e após 1 segundo
$(function() {
// it doesn't happen if this line is missing.
$("head").append('<link rel="stylesheet" type="text/css"'+
'href="/css/normalize.css" />');
var stylesheet = document.createElement("style");
stylesheet.setAttribute("type", "text/css");
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var b = $('body');
b.append(document.styleSheets.length).append('<br/>');
setTimeout(function() {
b.append(document.styleSheets.length).append('<br/>');
}, 1000);
});
(brinque com ele emhttp: //jsfiddle.net/amirshim/gAYzY/13)
Quando o cache é limpo, às vezes imprime2 então4 (jsfiddle adiciona seus próprios 2 arquivos CSS), o que significa que não adiciona nenhuma das folhas de estilo adocument.styleSheets imediatamente ... mas provavelmente aguarda o carregamento do arquivo extern
Isso é esperado?
Se for, éExemplo 2 no MDN (e muitos outros por aí) quebrado? Desde a linha 27:
var s = document.styleSheets[document.styleSheets.length - 1];
pode avaliar comdocument.styleSheets.length == 0
Observe que isso não acontece quando eu não carrego o arquivo CSS externo primeir