3 min de lectura

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).

Uso de Calc para operaciones matemáticas en CSS3

Se pueden aplicar cálculos como los siguientes:

O simplemente las operaciones básicas:

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:

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:

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()

Compartir

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.