Saltar a Comentarios

Lunes, Marzo 4th, 2013

Operaciones matemáticas con css

Es es sueño de un programador cuando trabaja haciendo maquetación css. Poder hacer calculos en nuestro archivo css como si de php se tratara.
Y lo mejor, es que se puede hacer y nos permite trabajar en distintas medidas (px, em, %) y funciona incluso con IE 9.

Se usa de forma sencilla, con cualquier propiedad css que admita medida, del tipo que sean (tamaño, tiempo..) y aunque actualmente es mejor usarla con el prefijo del navegador -webkit, -moz, etc está bastante bien adoptado por los navegadores de escritorio, aunque siempre hay navegadors moviles que dificultan.

Se utiliza de la siguiente forma:

/* De forma estándar */
width: calc(#valores#);
/* con prefijo para navegadores */
width: -webkit-calc(#valores#);
width: -moz-calc(#valores#);

Podremos aplicar cálculos como el siguiente:

width: calc(100% - 30px);

Y realizar las cuatro operaciones matemáticas básicas:

width: calc(50px * 2);
width: calc(50px / 2);
width: calc(50px + 2px);
width: calc(50px - 2px);

Con esta nueva función, evitamos utilizar javascript en muchos casos donde sólo tratamos de maquetar nuestra web.

Más información | W3C Calc


Entradas Relacionadas

Comentarios Cerrados.