blog banner

abreviando en css

Buscando información acerca de un problema con hojas de estilo he encontrado un artículo que creo muy interesante y paso a traducir. ____________________________________________________________________una de las virtudes del uso de css es la reducción del tiempo de descarga de las páginas. Este tiempo también se puede optimizar usando abreviaciones en las hojas de estilo. Más que […]

Buscando información acerca de un problema con hojas de estilo he encontrado un artículo que creo muy interesante y paso a traducir.

____________________________________________________________________
una de las virtudes del uso de css es la reducción del tiempo de descarga de las páginas. Este tiempo también se puede optimizar usando abreviaciones en las hojas de estilo. Más que abreviaciones podríamos decir compactando varias declaraciones en una.

Font

Usar:

font: 1em/1.5em bold italic serif

…en lugar de

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Esta compactación de la propiedad únicamente funciona si se especifica el font-size y el font-family. Si se eliminan la entrada se ignorará. El resto de propiedades si no se especifican se tomarán los valores que tengan por defecto.


Background

Usar:

background: #fff url(image.gif) no-repeat left top

…en lugar de

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Si no se especifica alguno de estos atributos, este tomará el valor por defecto. Si no se especifica el background-position, la imagen de fondo se tomarán los valores left top por defecto y si no se indica la conducta de repetición se repetirá la imagen horizontal y verticalmente.

Lists

Usar:

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

…en lugar de

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Se puede omitir cualquiera de las declaraciones y tomarán el valor por defecto.


Margin & padding

Hay diferentes maneras de compactar estas lineas, en función de los lados con valores en común de la clase.

4 valores diferentes:

Usar:

margin: 2px 1px 3px 4px (top, right, bottom, left)

…en lugar de

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

3 valores diferentes:

Usar:

margin: 5em 1em 3em (top, right y left, bottom)

…en lugar de

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

2 valores diferentes:

Usar:

margin: 5% 1% (top and bottom, right y left)

…en lugar de

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;

Un único valor:

Usar:

margin: 0 (top, bottom, right and left)

…en lugar de

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

Border

Usar:

border: 1px black solid

…en lugar de

border-width: 1px;
border-color: black;
border-style: solid;

Usar:

border-right: 1px black solid

…en lugar de

border-right-width: 1px;
border-right-color: black;
border-right-style: solid;

(se puede substituir right por top, bottom o left)

Estas entradas se pueden combiar con las reglas usadas por margin y padding, de manera que podemos tener una entrada del tipo:

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf;

en lugar de:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf;

____________________________________________________________________

Aquí acaba el artículo, y lo único que agregaría al respecto es la posibilidad de abreviar los colores , de lo que se ve algunos ejemplos en el texto anterior.

Cuando tenemos un color del tipo #FE934B, lo que estamos indicando son las cantidades de rojo, verde y azul del color con valores en hexadecimal de manera que Rojo: #FE, verde: #93, azul: #4B.

Podemos encontrar muy frecuentemente el caso de colores del tipo #FFAA88 en los que rojo: #FF verde: #AA y azul: #88. Para estos casos se puede escribir: #FA8.

Ahora no se me ocurre ningún ejemplo más.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *