soy Kseso y esto EsCSS

Función calc( ) y box-sizing en Css. Explicación y uso.

Función calc( ) y box-sizing en Css. Explicación y uso.

·Por Kseso ✎ 2

Con la incorporación de Chrome al club de los navegadores que soportan esta propiedad * llegó el momento de tenerla presente en nuestras hojas de estilos.
Recuerda que con anterioridad tanto IE9 como Firefox, desde la ver.4 ya lo hacían. Eso sí, FF y Chr necesitan de su prefijo correspondiente. No así IE que la acepta tal cual.
* Malas noticias, chrome tiene un bug en calc() y de momento nanay.

Actualización:
Al menos en Chrome ver. 21 ya es funcional con su prefijo privativo -webkit-cal( )No se si ha sido en esta o en alguna anterior donde se corrigió el bug.

La especificación del consorcio:

La última definición de la función calc() está recogida en el borrador del W3C " CSS Values and Units Module Level 3" de fecha 8 de Marzo de 2012.
En él la define como:

La función calc() permite expresiones matemáticas como la adición ("+"), resta ('-'), multiplicación ('*'), y la división ("/") para ser utilizados como valores de las propiedades. La expresión 'calc()' representa el resultado del cálculo matemático que contiene. Se puede utilizar siempre que ese valor se una unidad de <longitud>, <frecuencia>, <angle>, <hora>, o que los valores sean un <número>.

Y la función calc() ¿para qué me sirve?

Vamos con un supuesto que estoy seguro te habrás encontrado más de una y dos veces:
Imagina que en un diseño fluido, líquido, adaptable (o como quieras llamarlo) tienes en una caja con tamaño definido en % un par de elementos que quieres que estén alineados, ocupando cada uno la mitad de la anchura, con cierto margen lateral, con un borde de Xpx y para complicarlo un padding lateral de Yem. Recuerda que en el modelo de caja estándar la suma de todo lo anterior conforma el tamaño final del elemento.
Nada del otro mundo.

Bien. Hasta hoy no había más remedio que andar haciendo cálculos fuera del Css para dar una anchura aproximada. Y con todo y con eso, siempre se presentaba una situación, tamaño de ventana, donde todo se iba al traste, ya que a priori tenemos una serie de valores (%, em) que desconocemos su valor computado en px.
Pues aquí es donde viene de perlas la propiedad calc().
Pero antes vamos con su sintaxis.

Sintaxis de la propiedad calc()

En nuestro supuesto anterior será tan fácil como declarar:

.elemento { float: left; margin: 0 2%; padding: 2em; border: solid 1px; width: -moz-calc(100%/2 - 2*2% - 2*1em - 2*1px); width: -webkit-calc(100%/2 - 2*2% - 2*1em - 2*1px); width: calc(100%/2 - 2*2% - 2*1em - 2*1px); }

Explicación de la declaración calc():

♠ Puedes definir tantas operaciones como sean necesarias. En nuestro ejemplo 4.
♠ Los espacios entre los operadores matemáticos de suma '+' y resta '-' son obligados, si los suprimes, falla. No así con los de multiplicación '*' y división '/'.
♠ Puedes poner el resultado de cada operación. En vez de 2*2% es válido 4%. Pero en el caso de %, hay veces que el resultado no es un entero: 100%/3.
♠ Si el computo final es un valor negativo su anchura se computa como 0 (cero) y se comportará respecto al resto de elementos con lo que ello conlleva: notarán su presencia.

Un ejemplo práctico:

#contiene_calc { width:90%; border:1em solid #6988A5; margin: 0 auto; overflow: hidden; } .calculado { padding: 1em; margin: 1%; border: 2px solid red; width:-webkit-calc(100%/3 - 1em*2 - 1%*2 - 2px*2); width:-moz-calc(100%/3 - 1em*2 - 1%*2 - 2px*2); width:calc(100%/3 - 1em*2 - 1%*2 - 2px*2); float: left; } <div id="contiene_calc"> <div class="calculado">Hola mundo</div> <div class="calculado">dice KsesoCss</div> <div class="calculado">Desde aquí</div> </div>
Hola mundo
dice KsesoCss
Desde aquí

Y en la imagen de abajo el resultado de calc()

Una alternativa a calc(): La propiedad box-sizing

Otro camino para logrr lo mismo, sería el uso de la propiedad box-sizing definida en el documento "CSS Basic User Interface Module Level 3 (CSS3 UI)" de fecha 17 de Enero de 2012.

Un ejemplo sacado del documento que te acabo de enlazar. Tomemos el siguiente html:

<div class="container"> <div class="split">This div occupies the left half.</div> <div class="split">This div occupies the right half.</div> </div>

Con su Css correspondiente:

.container { width:90%; border:1em solid #460; margin: 0 auto; overflow: hidden; } .split { box-sizing:border-box; width:50%; border:1em #F3F3A1 ridge; float:left; }

El resultado obtenido sería el siguiente:

This div occupies the left half.
This div occupies the right half.

Y ahora la pregunta es obligada. ¿Cómo lo ves? ¿te atreves con ellas y compartes tu opinión al respecto y tus realizaciones en los comentarios?

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso