Hola a todos, después de mucho tiempo.
Este tip que compartiré hoy no es nada extraño para los expertos en CSS, pero para los que empiezan, siento que les será de mucha ayuda (al menos yo no lo conocí sino hasta casi una década después de programar en web...).
Se trata de la función calc() para uso en CSS.
Esta función permite realizar operaciones aritméticas simples para obtener valores numéricos de forma dinámica en nuestra definición de estilos.
Esto es de muchísima utilidad cuando necesitas precisión al pixel de tu layout; o bien cuando necesitas obtener una posición que es relativa al contenedor, y no es siempre fija.
Te dejo algunos ejemplos en los que yo he utilizado esta maravillosa función, salvándome la vida:
EJEMPLO 1:
.miEstilo
{
width: calc(100% - 30px);
margin: 5px 15px;
}
En este ejemplo, lo que hacemos es que el elemento html al que se asigne la clase "miEstilo", tendrá un ancho del 100% dentro de su Contenedor, pero además, a este 100% se le restarán 30 píxeles, que corresponden a la suma de los márgenes derecho e izquierdo, cada cual midiendo 15px, de acuerdo a la definición de la línea "margin". Si nosotros omitimos restar el margen al ancho, es probable que el elemento con clase "miEstilo" se desborde de su contenedor, y nuestro layout luzca desprolijo. (A propósito de tener en cuenta el margen en el ancho de nuestros elementos, te recomiendo también tener presente el padding y el border, que también se añaden al ancho final del elemento)
EJEMPLO 2:
.miEstilo
{
width:100%;
height:24px;
background-image:url("img/icono.png");
background-repeat:no-repeat;
background-position:calc(100% - 5px) center;
}
En este ejemplo, asignamos una imagen de fondo al elemento de clase "miEstilo", el cual tiene una forma ancha y baja, como una barra horizontal. Con la definición de estilo de la imagen de fondo lo que estamos ordenando es que ésta no se repita más que una vez, y sobretodo, que aparezca alineada a la derecha de nuestro elemento, centrada verticalmente. Como no queremos que quede exactamente pegada al borde derecho de nuestro elemento, le decimos que la posicione a 5px antes de llegar al final (su ancho máximo, 100%).
Acotaciones Importantes:
- Recuerda dejar el espacio necesario entre cada elemento dentro de la función, ya que al no dejarlo, el intérprete no realiza la operación deseada o bien la malinterpreta. Ejemplos:
✔ Correcto: calc(100% - 15px)
❌ Incorrectos: calc(100%-15px) ; calc(100% -15px) - Puedes anidar la función calc() tantas veces como te sea necesario, recordando respetar religiosamente los espacios entre operandos para que la operación se realice correctamente.
- Como pudiste notar en los ejemplos, puedes usar la función mezclando el tipo de dato de los operandos: puedes restar/sumar/multiplicar/dividir porcentajes con píxeles, o cualquier otra medida numérica permitida en CSS, pertinente al caso, claro.
- En general, puedes usar la función en lugar de cualquier atributo que requiera un valor numérico CSS.
Espero que el tip te sirva para perfeccionar tus definiciones de layout como lo hizo conmigo. Saludos y hasta pronto!
Referencias:
Comentarios