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

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 ...
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...
12 comentarios
Leer más

[linux] file_get_contents de PHP no puede acceder a otro servidor de la misma LAN

Acabo de escribir sobre nuestros devaneos neuronales para lograr hacer funcionar los enlaces permanentes de Wordpress en un servidor remoto RedHat . Y ahí mencioné que antes de dicho problema, habíamos tenido que luchar con otro igual de porfiado y jaquecoso. La situación era esta: Tenía un script que solicitaba información a un servidor remoto. Valiéndome de file_get_contents() , en mi instalación de localhost lograba conectar con el servidor remoto, pues estábamos en la misma LAN, o red local. Pero, claro, mi servidor local es un Windows 10 con Xampp, que prácticamente no tiene inhibiciones ^^U Por lo que la comunicación era directa y sin tapujos. Pero cuando subí mi sitio web al servidor de desarrollo, al que llamaré "Servidor A", la cosa ya no funcionó tan bonita. Pues, aun estando en la misma LAN, el servidor remoto, que llamaré "Servidor B", no contestaba las solicitudes del nuevo chico del barrio, "Servidor A".  No profundizaré en todos los caminos...
Publicar un comentario
Leer más