CSS3
CSS3 es la última evolución del lenguaje de las Hojas de Estilo en Cascada (Cascading Style Sheets).
Es bien sabido que CSS3 sirve para darle diseño a nuestras páginas web. Ahora bien ¿Se pueden realizar operaciones matemáticas en CSS3?
Operaciones matemáticas en CSS3
Algunas veces es necesario utilizar JavaScript para poder realizar operaciones matemáticas en nuestras páginas web, pero, en CSS3 también se pueden realizar con la función Calc(), la cual permite realizar operaciones tales como:
- Sumas ( + )
- Restas ( – )
- Multiplicaciones ( * )
- Divisiones ( / )
Que pueden ser utilizadas como valores de los componentes. Los componentes de una expresión Calc() pueden ser bien valores literales o expresiones attr() o calc().
Operaciones matemáticas en CSS3 con la función calc
Algo bueno de la función Calc() es que nos permite utilizar diferentes unidades (como px, em, %, y funciona con IE 9). Se utiliza de forma sencilla, aplicando en cualquier propiedad CSS que requiera una medida, por ejemplo, facilitará la labor de ajustar elementos con medidas relativas que se tengan, como bordes o márgenes que suelen tener el tamaño en píxeles y en muchos casos descolocan gran arte del diseño ocasionando problemas en los diseños responsivos. Es recomendable utilizarlo con el prefijo -webkit a pesar de que es bien adoptado por los navegadores de escritorio (suele tener algunos problemas con navegadores móviles).
|
1 2 3 4 5 |
/* Forma estándar de calc() */ width: calc([Cálculos]); /* Forma según navegadores de calc() */ width: -webkit-calc([Cálculos]); width: -moz-calc([Cálculos]); |
Uso de Calc para operaciones matemáticas en CSS3
Se pueden aplicar cálculos como los siguientes:
|
1 2 3 |
width: calc(100% - 30px); /* Segun los calculos requeridos pueden ser: */ width: calc((100% / 2) - 50px); |
O simplemente las operaciones básicas:
|
1 2 3 4 |
width: calc(50px + 20px); width: calc(120px - 30px); width: calc(50px * 4); width: calc(100px / 2); |
Con esta función podemos evitar utilizar JavaScript en muchos casos donde sólo tratamos de maquetar nuestra web.
Por ejemplo, se puede utilizar como:
|
1 2 3 4 5 6 |
section { float: left; /* Hacia la izquierda */ margin: 1em; /* Margen de 1 em */ border: solid 1px; /* Borde sólido de 1px */ width: calc(100%/3 - 2*1em - 2*1px); /* Ancho del tamaño requerido */ } |
Otro ejemplo: Si se quiere establecer un el tamaño de una fuente para que exactamente 40em encaje dentro del Viewport, lo cual garantiza que aproximadamente la misma cantidad de texto siempre llene la pantalla sin importar su tamaño:
|
1 2 3 |
:root { font-size: calc(100vw / 40); } |
Si el resto del diseño se especifica utilizando la unidad rem, todo el diseño se escalará para que coincida con el ancho de la ventana gráfica.
Resumen
Esta función de CSS3 nos permite alejarnos de JavaScript si así lo deseamos para poder crear diseños más complejos. Es necesario siempre conocer otras alternativas para desarrollo y no depender únicamente de una herramienta, así que, una buena herramienta para sustituir en algunos casos a JavaScript sería utilizando la función Calc().
Más información | Función Calc()
