Habíamos visto en el primer artículo acerca de los atajos CSS un ejemplo clásico de ellos y una bastante larga explicación,

A continuación puedes ver los atajos CSS mas utilizados en una serie de ejemplos para un clase llamada “cabecera”

Para la etiqueta Font:

CSS largo:

.cabecera{

font-weight: bold;

font-family: verdana, sans-serif;

font-size: 11px; line-height: 16px;

}

Atajo:

.cabecera{

font: bold 11px/16px verdana, sans-serif;

}

Para la etiqueta Margin:

CSS largo:

.cabecera{

margin-top:2px;

margin-right:1px;

margin-bottom:0;

margin-left:1px;

}

Atajo1:

.cabecera{

margin: 2px 1px 0 1px;

}

CSS largo2:

.cabecera{

margin-top:2px;

margin-right:1px;

margin-bottom:0;

margin-left:1px;

}

Atajo2, se aplica cuando las cifras primera y tercera o segunda y cuarta son iguales:

.cabecera{

margin: 2px 1px 0;

}

CSS largo3:

.cabecera{

margin-top:2px;

margin-right:1px;

margin-bottom:2px;

margin-left:1px;

}

Atajo3, se aplica cuando las cifras está repetidas por pares:

.cabecera{

margin:2px 1px;

}

CSS largo4:

.cabecera{

margin-top:1px;

margin-right:1px;

margin-bottom:1px;

margin-left:1px;

}

Atajo4, se aplica cuando las 4 cifras son iguales:

.cabecera{

margin:1px;

}

Nota: este atajo funciona exactamente igual para la etiqueta Padding

Para los bordes:

CSS largo:

.cabecera{

border-top-width: 2px;

border-top-style: dashed;

border-top-color: #f00;

}

Atajo:

.cabecera{

border-top: 2px dashed #f00;

}

Nota: Para aplicar el estilo en todos los bordes se usaría:

.cabecera{

border: 2px dashed #f00;

}

Para el atributo Background:

CSS largo:

.cabecera{

background-color: #fff;

background: url(“test.gif”);

background-repeat: repeat-x;

}

Atajo:

.cabecera{

background: #fff url(“test.gif”) repeat-x;

}

Para las listas UL

CSS largo:

.cabecera{

list-style: #fff;

list-style-type: disc;

list-style-position: outside;

list-style-image: url(image.gif)

}

Atajo:

.cabecera{

list-style: disc outside url(image.gif)

}

Para los colores:

CSS largo:

.cabecera{

color:#cccccc;

}

y

.cabecera{

color:#ff6600;

}

Atajo:

.cabecera{

color:#ccc;

}

y

.cabecera{

color:#f60;

}

Nota: Los colores básicos también se pueden definir con los nombres en inglés, white,red, blue, black, etc..

.cabecera{

color:red;

}

Para cifras con valor 0:

CSS largo:

0px;

Atajo:

0;

Nota: las medidas en pixeles, em y pt no necesitan el descriptor del tipo de unidad en valores iguales a 0

Bien este es un rápido resumen de algunos atajos CSS, espero que te sean útiles, hasta el próximo post,

@Jotace

Como puedes usarlos para ahorrar líneas de código

CSS simple:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

CSS con atajos:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font: normal 14px/18px Arial, Helvetica, SanSerif;
}

Al crear una hoja de estilos para alguno de nuestros proyectos generalmente escribes el código lo más rápido posible, esto trae en ocasiones un resultado de una hoja muy extensa y desordenada.

Si acostumbras usar editores de código con intellisense tienes la gran ventaja de que el programa te muestra las opciones de cada atributo mientras escribes pero eso no hace mas que agravar el problema.

Conforme tu desarrollo lo requiera la hoja de estilo va creciendo y puedes necesitar echar mano de una buena organización y los atajos CSS para no elevar el tamaño de la misma.

Una buena organización te puede ayudar para que una declaración bien estructurada te permita crear el código más compacto y evitar la redundancia, veamos unos cuantos ejemplos al respecto.

Esta es una declaración típica al inicio de una hoja de estilos:

body{
margin:0;
padding:0;
}

Si tu declaración va a ser similar para otras etiquetas o clases, una manera de limitar el número de líneas de la declaración puedes ser hacer algo como esto:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
}

Y en el ejemplo ahorrarás tantas líneas de código como nombres de etiquetas o clases separes con comas.

Siempre tendrás casos especiales en los que una o varias etiquetas requieren declaraciones diferentes y no las puedes juntar en un solo grupo, en ese caso tu creatividad te servirá para hacer una escritura mas ligera, por ejemplo:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

Si únicamente las etiquetas span y div requieren un tamaño de letra mas pequeño, una solución podría ser eliminarlas del bloque inicial y copiar todo el bloque nuevamente para las dos etiquetas cambiando únicamente el tamaño de fuente, así:

body, p, h1, li, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

span, div{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:12px;
font-style:normal;
line-height:18px;
}

Otra solución sería tratarlo de esta manera:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-style:normal;
line-height:18px;
}

body, p, h1, li, .claseX, .claseY, .claseZ{
font-size:14px;
}

span, div{
font-size:12px;
}

Sin embargo si aplicas el criterio de cascada, puedes generar el código de esta manera ahorrando un par de líneas en el proceso:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

span, div{
font-size:12px;
}

Las etiquetas span y div están duplicadas pues hay 2 declaraciones para ellas pero como sabes, en CSS la última declaración es la que cuenta.

Hasta aquí nada especial solo el buen criterio de agrupación y orden para armar un código mas corto.

Pero y este es el punto importante de este post, existen en el lenguaje de hojas de estilo, los llamados “atajos CSS” (shortcuts) que permiten usar técnicas de escritura corta para algunas declaraciones en particular, veamos una comparación del uso de CSS con y sin shortcuts.

CSS simple:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}

CSS con shortcuts:

body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font: normal 14px/18px Arial, Helvetica, SanSerif;
}

La técnica muestra claramente un código más ligero y coherente,

En la siguiente entrega podrás conocer las declaraciones que aceptan shortcuts y cómo usarlos en cada caso particular.

La mejor galería de diseño web que he encontrado en los últimos tiempos.

LinkAki a BestWeb Gallery

Diseños basados en el estándar CSS, trae recursos útiles.

LinkAki a http://www.csselite.com

El siguiente enlace trae los nominados a aparecer en un libro cuyo objetivo es publicar anualmente una guía de los mejores sitios de la red y promover el uso de estándares.

LinkAki a http://webdesignbook.net/nominees/

Acá un reconocido sitio de inspiración de muchos diseñadores en la red, también trae muchos recursos.

LinkAki a http://www.netdiver.net

Por último, el sitio de la semana elegido por la revista CommArts, la sección de archivo trae los sitios elegidos en semanas anteriores.

LinkAki a designinteract.com/sow/

LinkAki

LinkAki to jggweb: Fotografía y retoque digital » Decálogo del Fotógrafo

Tomado de “El metaverso de JL”: Linkaki

Y para ver la lista de música clásica completa en Wikipedia LinkAki

El sitio Maps of War nos trae este atractivo mapa en formato SWF para descarga, publicar en tu sitio, compartir o visualizar en línea.
Como el mismo sitio ofrece, se pueden observar 5000 años de historia en 90 segundos. Me parece muy interesante conocer la trayectoria de los imperios en esta región que en los actuales momentos aparece cada vez mas conflictiva, este puede ser un punto de partida para buscar mas información al respecto y quiza para entenderla mejor.

Requiere Flash LinkAki

Muy entretenido, permite mover el canvas(pantalla, lienzo) para hacer dibujos mas extensos, y se pueden grabar las rutas que nos hayan salido bien.

Link Aki Requiere Flash

Hermosas fotos, impactantes ilustraciones, un sistema de navegación muy interesante y la frescura de encontrar calidad en las imágenes.

La verdad la encuentro muy atractiva, si tuviera una alternativa para no usar Flash sería un 10 cerrado.

Link Aki Pues si, requiere Flash :-}