Hm, vypadá to dobře.
Firefox 4 přinese podporu CSS calc()
10. 6. 2010 23:58
Martin Malý
Č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:
Č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.
Dále čtěte…
- Vyzkoušejte si HTML5 a CSS3 v soutěži Mozilla Derby 5. 4. 2012 11:34
- Boot to Gecko: blíží se FirefoxOS? 3. 8. 2011 0:00
- Mozilla zveřejnila plán dalších verzí, Firefox 5 bude již brzy 31. 3. 2011 10:14
- Správce účtů ve Firefoxu 7. 7. 2010 0:00
- Firefox 3.6.4 přichází s odděleným během Flashe 23. 6. 2010 9:23
jo (neregistrovaný)
---.net.upc.cz
11. 6. 2010 8:19
Nový
Re: Firefox 4 přinese podporu CSS calc()
celé vlákno
mamlasek (neregistrovaný)
195.39.100.---
11. 6. 2010 9:54
Nový
calc vs -moz-calc
celé vláknove specifikaci, na kterou je ve zpravicce odkaz, ale neni nikde zminka o „-moz-calc()“ … kdy sakra prestanou s tim -moz*, -webkit* ? pokud je to dle specifikace, proc to proste neni „calc()“ ?!
takovahle featura je pak naprosto k ho* … webkit si udela svuj calc, ktery bude mit jine parametry, a pro IE budeme mit zase nejaky ten „filter()“ … vysledkem bude nevalidni cssko, ktere se bude muset stejne pro kazdy prohlizec upravovat zvlast… takze – cim si pomuzeme?
Aleš Roubíček (neregistrovaný)
193.165.135.---
11. 6. 2010 10:08
Nový
Re: calc vs -moz-calc
celé vláknoSpecifikace je ve stádiu Working Draft, takže chování calc není zdaleka finální. Prot ty vendor prefixy.
MCZ (neregistrovaný)
---.etnetera.cz
11. 6. 2010 10:10
Nový
Re: calc vs -moz-calc
celé vláknoOno u těch nových implementací, které ještě nejsou „prověřeny“ nebo jejichž specifikace nemusí být úplně finální, to prefixování má docela smysl.
Přinejmenším u webkitu pak dochází po čase k přejmenování na obecný název (v nových verzích Chrome funguje -webkit-border-radius i border-radius).
Je to také mnohem lepší, než přístup Opery, která když se k nějaké implementaci CSS3 konečně dobelhá, použije standardní název a implementaci nedotáhne dokonce (viz tento bug http://www.ubervu.com/conversations/blog.attrakt.se/2010/04/annoying-opera-css3-bug-input-border.html , který v současné době stále není opraven), což použitelnost obecného pojmenování (tj. „border-radius“) samozřejmě sráží.
Rado (neregistrovaný)
---.178-40-87.t-com.sk
11. 6. 2010 11:35
Nový
Niektore veci su riesitelne uz teraz
celé vláknoPrvy aj druhy priklad sa da pomocou box-sizing: border-box riesit uz teraz a netreba cakat.
V prvom staci definovat neviditelny ramcek o sirke 1em
V druhom jednoducho staci nastavit border-box a sirku 100%
:)
pas (neregistrovaný)
77.78.83.---
11. 6. 2010 11:58
Nový
Re: Niektore veci su riesitelne uz teraz
celé vláknoAno. Užitečnější by bylo, kdyby se deklarativně v CSS šlo ve výpočtu odkázat na aktuální rozměry nějakého jiného konkrétního boxu… Nechystá se to?
juraj (neregistrovaný)
94.136.139.---
13. 6. 2010 11:44
Nový
Re: Niektore veci su riesitelne uz teraz
celé vláknoDávno to existuje v podobe expression(). Škoda, že tieto vychytávky Internet Explorera sa zvyknú ignorovať.
pas (neregistrovaný)
---.net.upc.cz
13. 6. 2010 14:16
Nový
Re: Niektore veci su riesitelne uz teraz
celé vláknoNo, to není úplně ono, to je mix CSS a JavaScriptu, je to tudíž závislé na JS a navíc neefektivní z hlediska výkonu. Lepší je pak použít čistý JS.
No možná to, co si představuju, je nesmysl, nevím… inspiruju se Flexem, ovšem tam se deklarativní zápis nakonec přeloží do ActionScriptu, takže možná je rozumnější zaměřit se na JS frameworky a nekomplikovat CSS…
VfB (neregistrovaný)
85.132.169.---
14. 6. 2010 7:29
Nový
Re: Niektore veci su riesitelne uz teraz
celé vláknoprotože to funguje v jednom jediném prohlížeči?
