Článek popisuje funkci calc(), zavedenou v CSS3. Tato funkce zatím není k dispozici v žádné vývojové větvi Firefoxu, ale na její implementaci se pracuje.

Firefox bude podporovat CSS hodnotu calc() (viz specifikace), která umožňuje vyjádřit hodnoty rozměrů pomocí aritmetických výrazů. To znamená, že pomocí této funkce můžete definovat rozměry DIVů, velikosti okrajů, šířku rámečků atd.

Zde je příklad layoutu, který je velmi těžké navrhnout bez  calc():

/*
* Dva zarovnané DIVy, oddělené 1em okrajem
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}

Dalčí příklad ukazuje, jak zajistit, že textové pole nebude větší než rodičovský element:

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

Velmi zajímavá možnost, kterou calc() nabízí, je kombinace různých jednotek v jednom výrazu:

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

Současná implementace podporuje operátory +, -, *, /, mod, min a  max.

V plánu je rovněž podpora funkcí min() a max(), které mohou být použity např. takto:

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

Další podrobnosti naleznete na následujících stránkách:

• Mozilla’s bug
• W3C’s reference