Przy okazji, zanim jednak przejdziemy dalej, przypominam adres kalkulatora jednostek CSS który można znaleźć tutaj.
Temat który zamierzam poruszyć dotyczy dotyczy możliwości przeliczania wartości liczbowych, w tym właśnie jednostek CSS, wewnątrz arkusza stylów.
Aktualna specyfikacja CSS definiuje wyrażenie funkcyjne calc() które może być niedocenionym narzędziem w pracy każdego web developera, pozwala bowiem wykonywać obliczenia bezpośrednio w CSS bez konieczności korzystania ze skryptów javascript. Przytoczmy tutaj oryginalny opis zaczerpnięty ze specyfikacji:
The calc() function allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The ‘calc()’ expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever <length>, <frequency>, <angle>, <time> or <number> values are allowed.
Jak widać funkcja calc() pozwoli nam wykonywać proste obliczenia arytmetyczne: dodawanie, odejmowanie, mnożenie i dzielenie, co więcej zaś potrafi obsługiwać różnego typu wartości, a więc interpretować jednostki i co za tym idzie dokonywać ich konwersji. Do dyspozycji mamy w naszych wyrażeniach jednostki takie jak: piksele, procenty, em, rem i inne. Stąd dopuszczalne jest np. wyrażenie:
div {
width: calc(100% - 20px);
}
p {
margin: calc(1rem - 2px) calc(1rem - 1px);
}
div.myclass{
width: calc(100% - 20px*2 - 8px*2);
}
Zgodność z przeglądarkami
Pewnie będziecie zaskoczenie, ale funkcję calc() obsługują już praktycznie wszystkie wiodące przeglądarki. Obsługuje ją InternetExplorer w wersji 9, Firefox od wersji 4 udostępniał własną implementację calc() pod postacią -moz-calc(). Chrome także posiada własną wersję o nazwie -webkit-calc().
Brak komentarzy:
Prześlij komentarz