W tym odcinku tłumaczeń artykułów z Mozilla Hacks – notka Paula Rougeta o calc() w CSS. Zarówno oryginalny artykuł, jak i to tłumaczenie dostępne są na licencji Creative Commons – Attribution 3.0.
Funkcja calc() z CSS3 w Firefoksie 4
Poniżej omówiona została funkcja calc() z CSS3. Firefox jej jeszcze nie obsługuje, ale trwają prace nad jej implementacją.
Firefox będzie obsługiwał wartość calc() w CSS (na etapie eksperymentalnym jako -moz-calc() – przyp. tłum.), pozwalającą wyliczyć wymiary danego elementu jako wynik wyrażenia arytmetycznego. Przyda się to przy określaniu wymiarów div-ów, wielkości marginesów, obramowań itp.
Poniżej układ, którego zakodowanie bez użycia funkcji calc() wymagałoby sporo akrobacji (lub użycia JavaScriptu – przyp. tłum.):
/* * Dwa divy obok siebie, oddzielone marginesem o szerokości 1em */ #a { width:75%; margin-right: 1em; } #b { width: -moz-calc(25% - 1em); }
W poniższym przykładzie zadbamy o to, żeby pole tekstowe nie pokrywało się ze swym elementem nadrzędnym:
input { padding:2px; border:1px solid black; display:block; width: -moz-calc(100% - 2 * 3px); }
Jedną z bardziej przydatnych możliwości, jakie daje nam funkcja calc(), jest łączenie wartości w różnych jednostkach:
width: -moz-calc(3px + 50%/3 - 3em + 1rem);
Obecna implementacja obsługuje operatory: +, -, *, /, mod, min i max.
Będziemy również obsługiwać funkcje min() i max(), które można będzie wykorzystać na przykład tak:
div { height: -moz-min(36pt, 2em); width: -moz-max(50%, 18px); }
Więcej informacji:
marcoos.techblog 
Było kiedyś coś takiego:
a{
width: expression(document.body.clientWidth > 800? “800px”: “auto”);
}
To co innego. Expression było tylko w IE (już nie ma), po drugie działało zatrważająco niewydajnie, po trzecie nie działało bez JS., po czwarte było niestandardowym rozszerzeniem, w przeciwieństwie do standardowego calc(). Na plus expression można zaliczyć potencjalnie trochę większe możliwości.
Inna sprawa, że akurat podany przez Ciebie przykład w normalnych przeglądarkach można zapisać po prostu tak:
a {
min-width: 800px;
}
natomiast zrobienie “100% – 1px” przy pomocy expression wymaga nieco więcej zabawy.
;-)
hmm… -moz-calc to jest standard? ja słyszałem, że css3 nie jest jeszcze standardem ;] a za nim wejdzie i będzie w pełni obsługiwany przez wszystkie przeglądarki zjem nie jedną beczkę soli ;p
@Bartek: -moz-calc nie jest oczywiście standardem, jest implementacją wersji roboczej standardu.
expression nie wyliczy 3px + 50%/3 – 3em + 1rem.
Zaś Twój przykład to po prostu max-width w badzIEwiu nr 6.
Świetne :) Od dawna tego brakowało w CSSie. Mam nadzieję, że podchwycą to inne przeglądarki, a później W3.
To najpierw pojawiło się w podlinkowanej w notce specyfikacji W3C, a dopiero potem w Gecko.
O. Nie zauważyłem. To jeszcze lepiej :)
A można np.
#b {
width: -moz-calc(#a.width – 1em);
}
?
A można zagniżsżać?
width: calc(0.8 * max(12px, 33% – 1in) + min(33px, 10%)) ?
Jak podać wartość dla przeglądarek starszych? Tzn. czy mmuszę mieć dwa arkusze stylu czy np. mogę zrobić coś takiego:
width: 100px, calc(10% – 1em); ?
a może tak
width: 100px;
width: calc(10% – 1em); ?
Oczywiście calc jest napewno lepsze niż expression() z IE, bo to nie javascript tylko proste wyrażenia są dozwolone.
Oczywiście chciałem napisać -moz-calc wszędzie. calc() jeszcze nie jest ustandaryzowany, więc używać raczej nie można ani nie ma sensu, bo może się zmienić lekko standard.
Drugi przyklad powinien dzialac. Zasada jest taka, ze pozniejsza deklaracja nadpisuje wczesniejsza, o ile zostanie “zrozumiana”.