He estado leyendo el libro Speed Up Your Site, el cual, como su título implica, trata sobre
optimización de websites. Hasta ahora ha sido una lectura muy interesante, ya llevo un poco menos de la mitad y me tope con un capítulo donde tratan sobre diferentes técnicas de optimización de CSS, entre ellas el CSS Shorthand.
Hay muchas técnicas, pero unas bien sencillas de implementar son las propiedades “shorthand”
(no tengo ni idea como traducir eso), en fin, basicamente se trata de una declaración abreviada.
La cual reduce en algunos bytes tu hoja de estilos, además de lucir un poco mas interesante.
Las propiedades que soportan shorthand son:
- font
- background
- margin
- padding
- border
- list-style
Veamos la definición de cada con su ejemplo respectivo:
font
Para usar shorthand debes definir la propiedad font de la siguiente forma
{font: weight style variant size/line-height font-name inherit}
Siempre se deben especificar en cualquier orden, pero son requeridos size y font-name en ese orden, todos los atributos deben separados por espacios en blanco. Veamos un ejemplo:
h1{
font-style: italic;
font-weight: bold;
font-size: 2em;
font-family: georgia, times, serif;
}
Luego de aplicar shorthand quedaria reducido a:
h1{ font: bold italic 2em georgia, times, serif; }
background
Para usar shorthand debes definir la propiedad background de la siguiente forma
{background: color image repeat attachment position inherit}
Pueden estar en cualquier orden y todos los atributos deben separados por espacios en blanco. Veamos un ejemplo:
div.header{
background-image: url(images/oranges.gif);
background-repeat: no-repeat;
background-color: dark-orange;
background-attachment: fixed;
background-position: top left;
}
Luego de aplicar shorthand quedaría reducido a:
div.header{ background: dark-orange url(images/oranges.gif) no-repeat fixed top left;}
margin, padding
Para usar shorthand debes definir las propiedades margin como padding de la siguiente manera
{margin: top right bottom left} o {padding: top right bottom left}
En este caso el orden debe respetarse, todos los atributos deben separados por espacios en blanco. Debe especificar al menos uno de los par´metros. Veamos un ejemplo, es válido tambien para padding:
div.content{
margin-top: 5px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 15px;
}
Luego de aplicar shorthand quedaría reducido a:
div.content{ margin: 5px 15px 10px 20px;}
Mañana continuamos con las propiedades faltantes, border y list-style, y otros trucos más, no se pierdan la continuación del post.
Etiquetas: Tutoriales
Anotaciones Relacionadas
ALD es Afrael Live & Direct, el blog personal de Afrael Ortiz. En este espacio hablo de un montón de cosas, pero generalmente mis temas mas comunes son la tecnologÃa, la música y a veces cosas relacionadas con la programación.
23 comentarios
Feed para los comentarios de este artículo
March 27, 2004 a las 2:39 pm
Trackback de Denken Über - Week-log
March 27, 2004 a las 11:02 pm
Trackback de minid.net - Optimizando CSS
May 9, 2007 a las 10:56 am
Pingback de Los mejores textos sobre CSS y estándares web en castellano « Disenia
March 25, 2004 a las 1:38 am
beto
Deberías de comentar también que una técnica útil para escribir márgenes y padding en CSS es recordando el orden de las manecillas del reloj: 12-3-6-9, correspondientes a los valores top, left, bottom, right. Asi escribir valores como
padding: 0 20px 0 20px;
se hace muy fácil, además que te ahorras código y lo sacas más rápido.
March 25, 2004 a las 4:25 am
Anonymous
si, pero es top, right, bottom, left
March 25, 2004 a las 4:51 am
roberto
Precisamente ayer estuve leyendo ese mismo libro en una biblioteca. Hay cosas que me decepcionaron, como el “truco” de no cerrar etiquetas HTML (por ejemplo, tr).
March 25, 2004 a las 8:42 am
huguito
ta gueno ta gueno, yo trato de aplicarlo peor dejame empezar por entender un coñazo de atributos de css jejej
March 25, 2004 a las 8:52 am
afrael
Roberto: Si tienes razon, son tecnicas/trucos que aplican mas HTML, pero claro, esto implicaria hacer documentos no estandares.
Tal cual como el menciona, XHTML, es un poco mas dificil de optimizar. Ahora el libro esta lleno de tecnicas/trucos buenos, los primeros capitulos no estan tan vigentes, son mas 2000-2001.
Saludos !
March 25, 2004 a las 9:19 am
Jesus Piña
Excelente, muy buen mini-tutorial gracias por compartir.
March 25, 2004 a las 10:09 am
GaBuBu
Gran post, si señor! Libro recomendable leer si señor!
March 25, 2004 a las 11:17 am
ximena
Gracias por compartir
March 25, 2004 a las 1:38 pm
egg
Interesante, ¿y que de la compatibilidad con Browsers existentes?¿Cuales lo soportan?
Por otro lado ¿cual es el “truco” al no cerrar lo tr? ¿qué se gana?
March 25, 2004 a las 2:26 pm
afrael
Aca tienes un grafico con el soporte a cada uno de los features. En realidad hay que evitar usar shorthand con las versiones viejas de los navegadores, con los nuevos todo bien.
Ahora, si ese es el truco, no cerrar los td, ni los tr, ni los li. Esto es solo valido para HTML, cero estandares. Si se gana recuerda que antes todos los websites era hechos en base a tablas. Byte a byte para un site que recibe miles de visitas puede significar en un ahorro considerable de bandwidth.
March 25, 2004 a las 3:56 pm
M@GOO
Thanks a lot!!!
March 26, 2004 a las 4:16 am
roberto
egg:
se ganan caracteres (bytes) al no cerrar ciertas etiquetas. En el caso de tr se ganarían 5 “”.
March 26, 2004 a las 11:11 am
xoan
Esta muy bien, incluso se puede optimizar mas (en la declaracion CSS) cuando los valores del margen o del padding son iguales dos a dos, como en el ejemplo que puso beto:
padding: 0 20px 0 20px;
sería lo mismo que:
padding: 0 20px;
cuando es asi, los valores se aplican a los pares top-bottom, right-left.
Voy a leer ahora la segunda parte, a ver que tal
March 26, 2004 a las 12:32 pm
afrae
Excelente ejemplo xoan
March 26, 2004 a las 1:35 pm
egg
Ok, entendi lo del “ahorro” al no cerrar los tags.
Claro que con XHTML no aplica.
Gracias
March 29, 2004 a las 10:39 pm
Jaime Olmo
Excelente post. Usualmente programo mi hojas de estilo usando estos atajos. Gracias por la explicación.
March 30, 2004 a las 10:16 am
JR
Nice Article..
November 16, 2004 a las 9:23 pm
frank
nice post
November 28, 2004 a las 2:24 pm
Koke
Yo solo añadir que si queréis aprender CSS pasaros por páginas en ingles y si queréis cumplir estándares, aprended de: http://www.w3.org. Yo no sabía que eso eran atajos escritura puesto que es como aprendí. Para mi lo de escribir lo largo es cuando no voy a definir mas que una propiedad. Visitad la web que os he puesto y veréis lo que se aprende.
Y ante la opción de no cerrar etiquetas, no me parece correcto puesto que no cumpliría estándares y te arriesgas a que en otros exploradores no se vea. Las páginas que hacéis las probáis en IE5.0 IE5.5, IE6.0, en FireFox o en todos ellos. Espero que sea en la mayoría puesto que cada uno de los 4 que os he puesto interpreta el CSS de una manera.
July 8, 2005 a las 12:14 pm
el mensajero final
podrias ayudarme con lo de poner imagenes en los encabezados????