¿Que momento sería mejor para optimizar nuestros CSS que el día en el que no tenemos ninguno cargado? Steven Souders publica hoy un interesante artículo en el que nos aconseja no usar la propiedad @import del CSS y nos invita a mejorar el rendimiento de nuestras páginas mediante el tag <link />.
<link /> versus @import
Existen dos formas de cargar hojas de estilos (CSS) mediante HTML. Las dos funcionan de formas diferentes para conseguir un mismo objetivo, cargar un fichero .css y darle color y forma a nuestro contenido.
<link />
Se trata de un tag que los estándares web indican que debe ir declarado entre los tags <head />, este tag indica una relación con un documento externo. Con él, indicamos los ficheros RSS, los favicon y por supuesto, las hojas de estilos.
Para ello, hacemos uso del atributo rel, y posteriormente mediante el atributo href indicamos la ubicación del fichero que relacionamos directamente con el HTML. También es interesante destacar el atributo media, que indica que dispositivos van a poder usar ese documento.
<link rel='stylesheet' href='a.css' media='screen'>
@import
Se trata de una funcionalidad del CSS que nos permite cargar un fichero .css desde el propio CSS. Al igual que el anterior, con ella podemos indicar la ruta y el tipo de dispositivo que podrá usar ese código CSS.
Esta funcionalidad omite el atributo rel, debido a que se ha de llamar desde el tag <style /> o desde un fichero .css, entendiéndose así que se ha de tratar de un fichero CSS.
<style type="text/css">
@import url('a.css') screen;
</style>
¿Cual es mejor?
Steve Souders, nos muestra mediante un pequeño test las diferentes opciones posibles que ha usado para ilustrar su prueba.
@import @import
<style>
@import url('a.css');
@import url('b.css');
</style>
En la prueba que opta por cargar dos fichero .css mediante la @import vemos como ambos ficheros cargan a la vez. Si generalmente usas este sistema, no deberías tener problemas de rendimiento ya que ambas peticiones se ejecutan simultáneamente evitando tiempos de espera innecesarios.
<link /> @import
<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style>
Si por el contrario usas este sistema, todas las versiones de Internet Explorer (6,7 y 8) harán que los ficheros se carguen secuencialmente así que primero se cargará a.css y cuando este termine comenzará b.css.
<link /> con @import
//HTML
<link rel='stylesheet' type='text/css' href='a.css'>
//CSS
@import url('b.css');
Entendamos que el fichero a.css, contiene la llamada al fichero b.css. De esta forma no solo ocurre en Internet Explorer, sino que la carga se convierte secuencial en todos los navegadores. Tiene sentido ya que cargamos a.css y una vez cargado lo procesamos y este nos llama a b.css.
varios <link /> @import
//HTML
<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>
//PROXY.CSS
@import url('b.css');
Mediante este sistema, descubrimos que Internet Explorer se vuelve loco. Únicamente en Internet Explorer, carga el fichero a.css y simultáneamente comienza a cargar el fichero proxy.css (que únicamente tiene la llamada a b.css), una vez terminado el fichero proxy.css este se queda esperando a que termine a.css para lanzar la llamada a b.css. Mejor ver la imagen.
(Ver Imagen)
muchos @import
<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script src='one.js' type='text/javascript'></script>
Misteriosamente Internet Explorer vuelve a hacer de las suyas, en este caso, el fichero Javascript se carga antes que los ficheros .css, haciendo que toda relación con las posibles sentencias CSS no sean tratadas en el momento de la carga. A la vez que carga el fichero javascript, se lanza de forma secuencial la carga de los ficheros CSS.
<link /> <link />
<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='b.css'>
Sin duda la mejor opción, para todos los navegadores es el uso del tag <link /> que permite que ambos ficheros sean cargados de forma simultánea.
Conclusión
No uses @import. Y si lo has de usar, se consciente de lo que implica.
