Ir al contenido principal

[css] La útil función calc()

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:

- Función calc() en la W3Schools.com

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

[tsql] Error: La instrucción INSERT EXEC no se puede anidar

Holas a todos. Mientras programaba un procedimiento almacenado, intenté obtener los datos de otro procedimiento, como lo he venido haciendo desde que descubrí tamaña maravilla de la programación sql. Pero hoy me topé con este extraño error: La instrucción INSERT EXEC no se puede anidar . Tras investigar por algunos lados, di con la respuesta: no se puede almacenar en una tabla temporal de procedimiento almacenado, el resultado de otro procedimiento que también esté realizando una inserción de este tipo. Esto es algo como tener: CREATE PROCEDURE miProcedimiento AS  INSERT INTO #tablita EXEC otroProcedimiento;  SELECT * FROM #tablita; END; CREATE PROCEDURE nuevoProcedimiento AS  INSERT INTO #tabla1 EXEC miProcedimiento; END; Esto significará que si ejecuto: EXEC nuevoProcedimiento; ...SQL me arrojará el error antes mencionado. La solución al problema es no llamar a un procedimiento que esté llamando a otro ya en su interior. En algunos lados leí que transf
2 comentarios
Leer más

[mysql] Pasar array a parámetro de procedimiento almacenado (Mysql)

Me tocó hacer una consulta que retornaba una lista de items relacionados con una lista de usuarios que podían o no tener registros en común (vale decir, tabla de quiebre). La lista debía retornar siempre la lista de items, independiente de si había usuarios por los cuales consultar y/o si los usuarios tenían relación con ellos, pero debía mostrarme el status de los usuarios por cada item, de haberlos, esto es, una lista de nombres con una columna que podía estar vacía o no. Para el caso de tener que consultar los items relacionados con usuarios, al hacer la consulta utilizando un LEFT JOIN, me daba resultados si los usuarios tenían relación con los ítems, pero no si los usuarios no tenían items asociados pues, obviamente, al no estar relacionados, la consulta retorna vacío. Por ello, la solución era hacer la consulta de los items primero, y luego por cada item preguntar el status del usuario por cada uno. Para ello, tenía dos alternativas: hacerlo por programación o hacerlo por bas
11 comentarios
Leer más

[php] NuSOAP HTTP Error: socket read of headers timed out

Holas a todos. Este es para comentar un problema que he tenido al trabajar un servicio web montado en PHP con la clase NuSOAP. El problema surgió cuando intenté llamar al servicio web desde el otro servidor, pero se caía a los exactos 30 segundos de ejecución, mostrando el mensaje que titula este registro: HTTP Error: socket read of headers timed out Sabía que el problema era el timeout, pero ¿el timeout de qué? En los servidores y páginas web hay timeouts por todos lados: el de la Conexión a internet o la red, el del Servidor (hardware), el del Servidor Web en sí (Apache, mi caso), el de PHP (mi caso)... Pero nunca se me habría ocurrido que las Aplicaciones o frameworks también pudieran tener :o Por eso, tras buscar por la red la solución a mi problema, la respuesta vino precisamente de alguien que señaló sencillamente que había que modificar el timeout de la clase NuSOAP. Y dicho y hecho, eso solucionó el problema. Si están usando en su servidor y/o cliente la clase NuSOAP, y d
Publicar un comentario
Leer más