Un css enorme o varios pequeños según dispositivo.

[chocovo]

Hola,

Mirando los resultados que aporta http://gtmetrix.com sobre mi web me ha venido algo a la cabeza...

Por un lado se recomienda tener el menor numero de archivos CSS y por otro lado, hay que intentar tener archivos pequeños para que carguen bien.


Hasta el momento suelo utilizar un css muy grande con estilos para todos los dispositivos en funcion del tamaño de la pantalla.

ejemplo: @media screen and (max-width:768px){...}

Si cargara distintos CSS en función del tamaño de pantalla con
<link href="768.css" rel="stylesheet" type="text/css" media="all and (max-width: 768px)" />
aumentaría el numero de ficheros.

¿Qué creeis que es mejor? ¿un css grande o varios css pequeños?

¿Se puede cargar los distintos css con PHP en función del tamaño de pantalla para que así sólo cargue el que necesita?

Gracias y un saludo

[chichote]

Puedes comprimir tu archivo css, también puedes separarlos según tamaño de pantalla y cargarlos mediante javascript.

con jquery es bastante simple

Código:

<link rel="stylesheet" class="cargar-css" href="">

$(document).ready(function(){
	var width = $(window).width();
	if(width>960){
		$("#cargar-css").attr("href", "ruta-de-tu-css/big-css.css")
	}
	else{
		$("#cargar-css").attr("href", "ruta-de-tu-css/small-css.css")
	}
});

obviamente debes cargar la libreria jquery

saludos.

[Tecna]

Buenas.

Incluir en el fichero que se descarga siempre, reglas que no se van a usar es un gasto inútil pero poco costoso ya que por lo general no debe haber muchas diferencias en los estilos para las diferentes resoluciones y serían unos pocos kb más a descargar.

Sería más costoso tener que descargar toda la librería jquery ya que además de tener mayor tamaño también hay que interpretar el código y el navegador queda bloqueado mientras esto ocurre por lo que la página tarda más en cargar.

En cuanto a la recomendación de tener pocos ficheros hoy en día ya no tiene sentido porque los navegadores descargan hasta 8 ficheros a la vez. Es más importante que estén optimizados para reducir al máximo el tiempo de carga. Por ejemplo usar selectores lo más especificos posibles o colocar los ficheros css antes que los de javascript.

[chichote]

Iniciado por Tecna

Sería más costoso tener que descargar toda la librería jquery ya que además de tener mayor tamaño también hay que interpretar el código y el navegador queda bloqueado mientras esto ocurre por lo que la página tarda más en cargar.

Jquery es un ejemplo, se puede hacer con Javascript a secas, o cualquier otra librería siempre que se esté ocupando, obvio que no tiene sentido cargar una librería solo para hacer un switch de archivos css.

Aunque mi principal recomendación es siempre comprimir, de hecho el mismo google te entrega un mod para apache que sirve ara comprimir archivos estáticos.