Usando CSS Shorthand Parte 1
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.
Agregame a tu Google Reader
Agregame a tu Bloglines
Agregame a tu NetVibes
March 25, 2004 a las 1:38 am
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
si, pero es top, right, bottom, left ;)
March 25, 2004 a las 4:51 am
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
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
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
Excelente, muy buen mini-tutorial gracias por compartir. :-)
March 25, 2004 a las 10:09 am
Gran post, si señor! Libro recomendable leer si señor!
March 25, 2004 a las 11:17 am
Gracias por compartir
March 25, 2004 a las 1:38 pm
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
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
Thanks a lot!!!
March 26, 2004 a las 4:16 am
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
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 :D
March 26, 2004 a las 12:32 pm
Excelente ejemplo xoan :-)
March 26, 2004 a las 1:35 pm
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
Excelente post. Usualmente programo mi hojas de estilo usando estos atajos. Gracias por la explicación.
March 30, 2004 a las 10:16 am
Nice Article..
November 16, 2004 a las 9:23 pm
nice post
November 28, 2004 a las 2:24 pm
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.
March 27, 2004 a las 2:39 pm
Week-log
El “breve recorrido sobre los post de esta semana que me llamaron la atención” ™….
March 27, 2004 a las 11:02 pm
Optimizando CSS
3 lecturas sobre CSS para este fin de semana. Nada de cine, manos a la obra con CSS.
July 8, 2005 a las 12:14 pm
podrias ayudarme con lo de poner imagenes en los encabezados????
May 9, 2007 a las 10:56 am
[...] Usando CSS Shorthand Parte 1 y parte 2 [...]