Andrés recientemente hablo sobre poner a dieta ficheros CSS y explica ejemplos interesantes del llamado "short hand" o método corto de escribir las cosas. Aunque el método lo conozco y uso siempre, no está nada mal recordarlo en forma de entrada:
/* Esta declaración de márgenes... */ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; /* Es lo mismo a (orden: arriba, derecha, abajo, izquierda) */ margin: 10px 20px 30px 40px; /* También se puede aplicar a reglas verticales/horizontales. */ margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; /* Es equivalente a */ margin: 10px 20px;
Cuando no queremos aplicar ninguna cantidad, no hace falta añadir el sufijo "px" o sus otras opciones (em, pt, etcétera). Supongamos 10 pixeles para el margen derecho y inferior pero ninguno para el izquierdo/superior:
margin: 0 10px 10px 0; /* Lo mismo se puede aplicar a `padding`. Luego podemos quitar casi cualquier espacio: */ p{margin:0;padding:0 10px;}
Pero no me limitaré a explicar lo mismo que Andrés, me interesa
comentar algunos puntos más.
El primero es que muchas de esas optimizaciones del llamado short
hand se pueden realizar fácilmente online con CSS Formatter and
Optimiser el cual
es bastante potente y basado en CSS Tidy: permite elegir el nivel de
compresión (manteniendo legibilidad humana, manteniendo o no
comentarios, etcétera) e incluso llegar a eliminar las propiedades
que no sean validas conforme CSS 2.1.
Por ejemplo, con las opciones por defecto ahora mismo el CSS se reduce
un 16% (de 8.3kB a 6.9kB) y sigue siendo perfectamente legible, con las
opciones más radicales baja un 24% a los 6.3kB.
¡Y eso que mis CSS son bastante óptimos! (faltaría pasar los hacks para
IE a un fichero CSS aparte, una de esas cosas que siempre quedan
pendientes).
Otra solución es la que comenta JustMe en los foros de XeoWeb de enviar el CSS comprimido con gzip.
No deja de ser una opción pero hay que tener en cuenta dos advertencias respecto a Internet Explorer (como no) sobretodo con la versión 6. La primera advertencia es que no suele cachear bien (baja continuamente aunque no hayan cambiado) los ficheros CSS y que "se lleva de puta madre" (nótese la ironía) con los CSS comprimidos en general...
Mi recomendación en este paso quedaría en un intermedio. Crear tres
ficheros CSS: el legible para editar/mostrar a desarrolladores, el
optimizado para la web (en modo estándar: sin llegar a ser riguroso
que por 0.6kB no vale la pena) y la versión optimizada+comprimida.
Un inciso: la versión optimizada+comprimida debería ser enviada a
usuarios de Firefox o navegadores que no sean Internet Explorer y no
debe ser generada cada vez. Es decir nada de código PHP que pille el
CSS, lo comprima y lo envíe: mejor reducirlo a lo más simple, un
detector de navegador para decidir que CSS mostrar.
PD: Y quien dice problemas de IE con CSS comprimido por GZIP también dice problemas de JavaScript comprimido por GZIP. ¡Así que cuidado!.
Actualización (2012): a día de hoy usuarios de IE6 quedan pocos. Cada vez son menos los problemas que dan los navegadores modernos con contenido comprimido.
Comentarios