La Página de DriverOp

Cargar dinámicamente archivos CSS.

En este artículo se verá cómo cargar un archivo .css dinámicamente. Los archivos CSS son hojas de estilo en cascadas usados para darle estilo (estilizar) los elementos HTML de una página web.

Índice

Introducción.

En otro artículo de este sitio se habló de cómo cargar dinámicamente archivos JavaScript. No contentos con esto, se puede modificar el método allí descritpo para cargar dinámicamente archivos .css según se requiera. Esto puede resultar útil en algunos casos como por ejemplo, cuando se usan plug-ins de JQuery que están "atados" a un archivo CSS. Si se carga el plug-in con el método comentado, es necesario y lógico que su CSS también se pueda cargar dinámicamente.

Usando el mismo método pero con un código más sencillo puesto que si bien se "sufre" de los mismos problemas comentados allí, no son tan críticos cuando se trata de archivos CSS porque el momento de aplicar los estilos no es tan relevante.

Sin embargo en algunos casos sí puede serlo si se usa este método junto a código JavaScript que depende de las medidas u otras características de estilo de los elementos HTML sobre los que el código JavaScript trabaja.

Es igual pero no es lo mismo.

Si bién el método es el mismo, es decir, se crea por código JavaScript el tag que carga el archivo CSS y se lo agrega al tag <head> de la página, el tag específico para cargar un archivo CSS no es el mismo que para archivos JavaScript.

Concretamente el tag es el siguiente:


<link rel="stylesheet" type="text/css" href="estilo.css">

El tag <link> requiere tres parámetros o atributos que son obligatorios (puede haber más) que le deberían indicar al navegador de qué se trata el archivo que se intenta descargar del servidor. Se trata de un elemento vacío a diferencia de <script> porque no tiene un tag de cierre.

El atributo "rel" indica la relación del recurso a cargar respecto del documento HTML en el cual está. En nuestro caso le indica que ese archivo sirve para estilizar el documento. El atributo "type" le indica al navegador que el archivo debe ser interpretado como una hoja de estilo en cascada (es el tipo MIME). Y el atributo "href" indica la localización (URI) del recurso que puede ser absoluta o relativa a la ubicación del documento actual (como es el caso del ejemplo mostrado).

Otro atributo que es opcional pero nos resultará útil para la tarea que nos ocupa y que lo puede tener cualquier tag HTML es el atributo "id" que sirve (entre otras cosas) para referenciarlo mediante código de script.

El código.

Atentos a estas consideraciones, el código para cargar dinámicamente un archivo CSS sería algo así:


function LoadCSS(nomarch) {  
	var e = document.getElementById(nomarch);
	if (e == undefined) {
		var cssLink=document.createElement("link");
		cssLink.setAttribute("rel", "stylesheet");
		cssLink.setAttribute("type", "text/css");
		cssLink.setAttribute("href", nomarch+".css");
		cssLink.setAttribute("id",nomarch);
		document.getElementsByTagName("head")[0].appendChild(cssLink);
	}
}  

Como en el caso de la carga dinámica de archivos JavaScript, la función acepta un parámetro que tanto será el "id" del elemento <link> que se crea como el nombre del archivo que se quiere cargar sin su extensión.

Primero se intenta encontrar un elemento HTML con el "id" pretendido. Si no se le encuentra, se procede a crearlo estableciendo luego los atributos necesarios. El valor del atributo "href" es el valor del parámetro de la función al cual se le concatena la extensión del archivo.

Finalmente se agrega el nuevo elemento creado al DOM en la sección <head> del documento. Es en este momento que el navegador procede a la petición del recurso al servidor. Luego del cual aplica los estilos que el archivo CSS indique.

No tan rápido, pequeño "coder".

Si se usa el código tal como está expuesto más arriba, tarde o temprano se experimentarán los mismos problemas explicados en el otro artículo.

Es decir, cuando se intente cargue por segunda vez el mismo archivo CSS el navegador no hará la petición al servidor sino que lo cargará desde su propia caché. Esto puede ser deseable o no dependiendo de las circunstancias, pero ciertamente no es deseable cuando recién se está desarrollando la página.

La solución a este pequeño inconveniente es la misma que la explicada en el otro artículo: agregar un parámetro aleatorio. Este es el código:


function LoadCSS(nomarch) {  
	var d = new Date(); // se crea un objeto tipo fecha
	var e = document.getElementById(nomarch);
	if (e == undefined) {
		var cssLink=document.createElement("link");
		cssLink.setAttribute("rel", "stylesheet");
		cssLink.setAttribute("type", "text/css");
		cssLink.setAttribute("href", nomarch+".css?rnd="+d.getTime()); // el parámetro "rnd" vale los milisegundos
		cssLink.setAttribute("id",nomarch);
		document.getElementsByTagName("head")[0].appendChild(cssLink);
	}
}  

Y eso es todo.

Conclusión.

No hay más consideraciones importante qué hacer que no se hayan abordado ya en el artículo sobre carga dinámica de archivos JavaScript. Solamente mostrar un ejemplo de uso el cual puede ser visto aquí.

Dudas, críticas y mejoras, por favor usar los comentarios más abajo.

Por Diego Romero,