Tworzenie ładnego układu CSS zaczyna się od przypisania rozmiarów wszystkim elementom umieszczanym w aplikacji internetowej. Bardzo pożądaną funkcją była zawsze możliwość określania rozmiarów przy użyciu mieszanki jednostek rozmiarów. Dobrze byłoby na przykład mieć możliwość zarezerwowania 50% obszaru oraz stałej ilości miejsca, np. 10 pikseli. Teraz możesz to zrobić za pomocą właściwości calc(). Możesz korzystać z tej funkcji wszędzie tam, gdzie jest stosowana długość lub liczba. Można jej używać do określania pozycji lub w wartościach kolorów w rgb(). Dzięki temu ma wiele zalet w arkuszu stylów.
Do czego służy funkcja calc()?
Właściwość calc() możesz używać w każdym miejscu, w którym w arkuszu stylów znajduje się długość lub numer CSS.
Oferuje 2 główne funkcje, dzięki którym układ jest bardziej elastyczny:
- Łączenie procentów i wartości bezwzględnych.
- Różne jednostki rozmiaru.
Mieszanie procentów z jednostkami bezwzględnymi
Spójrzmy na przykład łączenia wartości procentowych z jednostkami bezwzględnymi. Załóżmy, że chcemy przydzielić 50% dostępnego obszaru mniej ustalonej liczby pikseli, a później możemy zapisać wynik w ten sposób:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Gdyby tło miało kolor zielony, wyglądałoby to tak:
a po zmniejszeniu rozmiaru nadrzędnego wyglądałby on tak:
Fajne jest to, że zawsze wiemy, że prawa krawędź treści znajduje się 100 pikseli na lewo od środka obszaru zawierającego dane. Możliwość łączenia różnych typów wartości w ten sposób pozwala aplikacji internetowej obsługiwać układ na urządzeniach o różnych rozmiarach i mieć znacznie większą kontrolę niż wcześniej.
Jednostki miksowania
Inną świetną zaletą jest możliwość łączenia jednostek o różnych miarach, aby uzyskać odpowiedni rozmiar. Możesz na przykład ustawić rozmiary w odniesieniu do bieżącego rozmiaru czcionki, łącząc jednostki „em” i „px”.
#bar {
height: calc(10em + 3px);
}
Świetne przykłady łączenia wartości znajdziesz tutaj i tutaj.
Wypróbuj
Dzięki calc() możesz dodawać, odejmować, mnożyć i dzielić wartości za pomocą +, -, * oraz /. To daje różne możliwości. calc() możesz używać wszędzie tam, gdzie można użyć długości lub liczby arkusza CSS. Pracujemy też nad dodaniem właściwości calc() dla właściwości kąta i częstotliwości. Właściwość calc() dotycząca długości jest teraz dostępna w Chrome 19 (wersja deweloperska) za pomocą właściwości -webkit-calc. W Firefoksie od wersji 8 użyto właściwości -moz-calc, a w Internet Explorerze od wersji 9 bez prefiksu. Podziel się z nami swoją opinią, dodając komentarz poniżej.