Cuando se agrega una hoja de estilo a document.styleSheets
Estoy tratando de agregar dinámicamente una regla de hoja de estilo CSS usando JavaScript, algo así como el ejemplo 2aqu.
Funciona la mayor parte del tiempo, pero parece que hay una condición de carrera que a veces falla (al menos) en Chrome (15.0.874 y 17.0.933). Ocurre con poca frecuencia cuando el caché está vacío (o se ha borrado).
Esto es lo que he podido reducir. Primero cargo una hoja de estilo externa agregándola a<head> y luego creo una nueva hoja de estilo (donde agregaría reglas). Luego imprimo la longitud dedocument.styleSheets (inmediatamente y después de 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);
});
(juega con él enhttp: //jsfiddle.net/amirshim/gAYzY/13)
Cuando el caché está limpio, a veces imprime2 luego4 (jsfiddle agrega sus propios archivos 2 css), lo que significa que no agrega ninguna de las hojas de estilo adocument.styleSheets inmediatamente ... pero probablemente espera a que se cargue el archivo externo.
¿Se espera esto?
Si es así, es Ejemplo 2 en MDN (y muchos otros por ahí) roto? Desde la línea 27:
var s = document.styleSheets[document.styleSheets.length - 1];
podría evaluar condocument.styleSheets.length == 0
Tenga en cuenta que esto no sucede cuando no cargo primero el archivo CSS externo.