Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

jueves, 10 de junio de 2010

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
Share:

Publicidad

Estadísticas

A cotidiano, me siguen