Firefox 4 přinese podporu CSS calc()

Č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, minmax.

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:

Článek je překladem textu Firefox 4: CSS3 calc() z webu Mozilla Hacks. Tento text je k dispozici pod licencí Creative Commons BY-SA 3.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Komentáře: 9

Přehled komentářů

jo Re: Firefox 4 přinese podporu CSS calc()
mamlasek calc vs -moz-calc
Aleš Roubíček Re: calc vs -moz-calc
MCZ Re: calc vs -moz-calc
Rado Niektore veci su riesitelne uz teraz
pas Re: Niektore veci su riesitelne uz teraz
juraj Re: Niektore veci su riesitelne uz teraz
pas Re: Niektore veci su riesitelne uz teraz
VfB Re: Niektore veci su riesitelne uz teraz
Zdroj: https://www.zdrojak.cz/?p=1274