Firefox 4: CSS3 calc()

Lo que se viene

Firefox soportará el valor calc() de CSS3, lo cual permitirá calcula valores dimensionales mediante expresiones aritméticas. Esto significa que podrán calcularse el tamaño de los DIVs, el valor de los márgenesm el ancho de los bordes, etc.

Aquí hay un ejemplo de layout el cual sería difícl de implementar sin la función calc()

/*
*2 DIVs alineados, separados por un margen de 1em
*/
#a {
width:75%;
margin-right: 1em;
}
#b {
width: -moz-calc(25% - 1em);
}

En este ejemplo se asegura de un campo de texto input no se solapará con su elemento padre:

input {
padding:2px;
border:1px solid black;
display:block;
width: -moz-calc(100% - 2 * 3px);
}

Una característica particularmente importante de calc () es que se pueden combinar diferentes unidades en el mismo cálculo:

width: -moz-calc(3px + 50%/3 - 3em + 1rem);

La actual implementación soporta los operadores de

• suma > +
• resta > -
• multiplicación > *
• división > /
• resto > mod
• mínimo > min
• máximo > max

Los operadores min() y max() serán utilizados de la siguiente forma:

div {
 height: -moz-min(36pt, 2em);
 width: -moz-max(50%, 18px);
}

Vía | hacks.mozilla.org