Aparentemente agregar <link rel="stylesheet" ... en el cuerpo del documento se considera una mala práctica para los estándares W3C. Lo mismo para agregar bloques <style> en el cuerpo ...Forma correcta de incluir CSS después de <head>
¿Hay alguna solución compatible con el estándar para agregar CSS fuera de la etiqueta <head>? Al igual que al final del documento.
Si sólo desea incluir sus estilos CSS en una serie de eventos específicos, no hay nada que le para de este modo a la cabeza:
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here
document.head.appendChild(linkElement);
Esto tiene la ventaja adicional de la adición de la hoja de estilos de forma asíncrona, que no impide que el navegador descargue nada más.
Gracias, @IonicãBizãu, su edición estuvo bien ubicada. –
De nada. Ayudaste a mi hermano y los dos te votamos. :-) –
@ IonicãBizãu: \ o / –
Solo HTML5 lo permite con el atributo de ámbito, pero asegúrese de declarar el DOCTYPE correctamente.
<style type="text/css" scoped>
.textbox {
color: pink
}
</style>
¿Quieres decir que si puse 'scoped' allí puedo usarlo en cualquier lugar?eso es increíble: D – Alex
Aún no hay compatibilidad con el navegador para esta función. Los navegadores simplemente ignoran el atributo 'scoped' e interpretan la hoja de estilos como global para el documento. Un elemento 'style' dentro del cuerpo funciona bien, acaba de declararse no válido en las especificaciones HTML. –
@ JukkaK.Korpela: Si uso mi pala para clavar un clavo en una pared, probablemente también funcione. Eso no lo hace bien. Al ser inválido, solo funciona porque el navegador trabaja muy duro para hacerlo bien. No lo hagas funcionar –
Una forma de resolver este problema es cargar el CSS con .get() y, añadiendo a la etiqueta de la cabeza sólo cuando sea necesario:
JQUERY
var css = "foobar.css";
var callback = function() {
alert("CSS is now included");
// your jquery plugin for a navigation menu or what ever...
};
$.get(css, function(data){
$("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
callback();
});
La función callback es útil para permitir el código script que depende del archivo CSS para formatearse correctamente, para que se ejecute solo después del CSS como agregado!
http://stackoverflow.com/a/2826810/871050 –
¡Es cierto! Pero, ¿cómo cargar un archivo 'css' cuando sea necesario dinámicamente para que el documento responda correctamente? Y los programadores han estado haciendo esto durante años con el simple viejo 'javascript';) Dado que mis proyectos están basados en PHP, resuelvo este problema con scripts de servidor antes de que cualquier cosa llegue al navegador, pero en este caso ... – Zuul
Consulte mi respuesta. Esto se puede hacer fácilmente con JavaScript simple. Recibo un código más corto que tú. –
Creo que este estándar es ignorado en gran parte por la mayoría una vez que comienzas a hacer cosas como la programación del lado del servidor o DHTML.
Para los archivos HTML estáticos, definitivamente puede/debe seguir la regla de incluir solo CSS dentro de la etiqueta HEAD, pero para la salida condicional y la interactividad a veces puede simplificar las cosas para tener un estilo condicional también. Considere que al final, esto convoluciona el documento resultante. A pesar de que los navegadores pueden hacer que todo salga bien, si tu mismo fueras a mirar la fuente, es más fácil de leer si todos los estilos que definen el diseño/visualización se encuentran dentro de HEAD. Hay, por supuesto, varios otros ejemplos y razones de por qué es una mala práctica.
El estándar HTML existe aparte de cosas como scripts de servidor y DHTML, es decir, no es el estándar HTML/SSS/JavaScript.
Si usted está hablando de una hoja CSS externa, entonces la forma correcta es la siguiente:
<link href="....link to your style...." rel="stylesheet">
Si desea incluir un CSS en línea, a continuación, sólo tiene que hacer lo siguiente:
<style>
....Your style here...
</style>
¿por qué le gustaría hacer eso? sólo curiosidad –
Bueno, hay algunas situaciones raras en las que es útil incluir estilos más adelante. En mi caso, tengo una bonita función de depuración que genera información con estilo CSS. Puedo llamar a esta función en cualquier punto, o no. Pero no quiero incluir el CSS si no se usa. – Alex
No es dañino incluir CSS que no * siempre * se utilizará, siempre que lo sepa * podría * usarse en ciertas situaciones. – BoltClock