todos - ¿Cómo cargo las reglas CSS de forma dinámica en Webkit(Safari/Chrome)?

validar css para todos los navegadores

Question

Actualmente tengo problemas en Webkit (Safari y Chrome) cuando trato de cargar dinámicamente (innerHTML) algunos html en un div, el html contiene reglas de css (...), después de que el html se muestra, las definiciones de estilo no se cargan (por lo tanto visualmente puedo decir que los estilos no están allí y también si busco javascript para ellos no se encuentran los estilos). He intentado usar un plugin jquery tocssRule (), funciona pero es demasiado lento. ¿Hay alguna otra forma de hacer que webkit cargue los estilos dinámicamente? Gracias. Patricio

Answer 1

Creo que es una mejor práctica agregar una etiqueta de "enlace" al encabezado de su documento. Si eso no es posible, intente agregar una etiqueta de "estilo" a la cabeza. Las etiquetas de estilo no deberían estar en el cuerpo (ni siquiera validan).

Agregar etiqueta de enlace:

var link = document.createElement(''link'');

link.setAttribute(''rel'', ''stylesheet'');

link.type = ''text/css'';

link.href = ''http://example.com/stylesheet.css'';

document.head.appendChild(link);

Agregar etiqueta de estilo:

var style = document.createElement(''style'');

style.innerHTML = ''body { background-color: #F00; }'';

document.head.appendChild(style);

Answer 2

Gracias Vatos, me diste una buena pista, básicamente hice lo que sugeriste pero utilicé jquery para configurar el html y anexar el nuevo estilo a la cabecera, ya que safari / crome se detendría cuando innerHTML y document.head no estaban definidos. Mi código terminó pareciéndose a esto

var cssDefinitions = ''..my style chunk goes here'';
var style = document.createElement(''style'');''
$(style).html(cssDefinitions);
$(''head'').append(style);

Answer 3

La forma más simple (usando jQuery) es la siguiente:

var cssLink = $(''<link />'');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");

Si lo haces de esa manera, entonces funcionará en Safari. Si lo haces de la manera jQuery normal (todo en una cadena de texto), fallará (la CSS no se cargará).

Luego solo lo agrega a la cabeza con $ (''head''). Append (cssLink);

Answer 4

meh No tengo suficientes puntos para votar el resultado de Andrei Cimpoca, pero esa es la mejor solución aquí.

style.innerHTML = "..."; no funciona en motores webkit o es decir.

Para insertar correctamente el texto CSS, debe:

style.styleSheet.cssText = "..."; por ejemplo.

y

style.appendChild (document.createTextNode ("...")); para webkit.

Firefox también funcionará con la segunda opción, o con style.innerHTML = "...";

Answer 5

Además de las versiones basadas en etiquetas de estilo anteriores, también puede agregar estilos usando javascript directamente:

var style = document.getElementById(''some-style-tag'');
var sheet = style.sheet;
sheet.insertRule(''.mydiv { background-color: '' + color + ''; }'', sheet.cssRules.length);

Esto tiene la ventaja de poder usar variables sin tener que recurrir a cssText / innerHTML.

Tenga en cuenta que en los navegadores basados ​​en webkit esto puede ser lento si está insertando muchas reglas. Hay un error abierto para solucionar este problema de rendimiento en webkit ( https://bugs.webkit.org/show_bug.cgi?id=36303 ). Hasta entonces, puedes usar etiquetas de estilo para inserciones masivas.

Esta es la forma estándar del W3C de insertar reglas de estilo, pero no es compatible con ninguna versión de IE: http://www.quirksmode.org/dom/w3c_css.html

Answer 6

Modo jQuery directo (que funciona en los principales navegadores, incluido Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

Desde el sitio:

$("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
"rel": "stylesheet",
"type": "text/css",
"href": "url/to.css"
});

Nota: el ejemplo también incluye la inyección de JS, que puede ignorarse si solo desea insertar una referencia de CSS.

Answer 7

Sé que es un tema más antiguo, pero pensé que alguien se beneficiaría. Yo también necesitaba cargar css dinámicamente en mi página (antes de que todo se procesara onload, de acuerdo con las plantillas de "componentes" incluidas):

var oStyle = $("<style />");

oStyle.append("@import url(" + sTemplateCssUrl + ");");
oStyle.attr("type", "text/css");

$(document.head).append(oStyle);

Intenté anexar a document.head con un enfoque de una sola línea, funcionó en IE 10 y Chrome, pero no en Safari. El enfoque anterior funcionó en todos 3.

Answer 8

Aquí está el concierto. Lo que dijo Patrick no funcionó para mí. Así es como lo hice.

    var ref = document.createElement(''style'');
ref.setAttribute("rel", "stylesheet");
ref.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(ref);
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one''s for ie
else ref.appendChild(document.createTextNode(asd));

InnerHTML está en desuso y no debe usarse para tal cosa. Además, es más lento también.