Tworzenie ładnego układu CSS zaczyna się od przypisywania rozmiarów wszystkim elementom umieszczanym w aplikacji internetowej. Jedną z najbardziej oczekiwanych funkcji była możliwość określania rozmiarów za pomocą różnych jednostek. Na przykład fajnie byłoby zarezerwować 50% obszaru plus stałą ilość miejsca, np. 10 pikseli. Możesz to zrobić teraz, używając właściwości calc(). Możesz używać tej funkcji w dowolnym miejscu, w którym występuje długość lub liczba, np. do pozycjonowania elementów lub do wartości kolorów rgb(). Ma ona wiele zastosowań w arkuszu stylów.
Co można robić za pomocą funkcji calc()?
Właściwości calc() można używać wszędzie tam, gdzie w arkuszu stylów występuje długość lub liczba w CSS.
Udostępnia ona 2 główne funkcje, które zwiększają elastyczność układu:
- Mieszanie wartości procentowych i bezwzględnych.
- Mieszanie jednostek rozmiarów.
Mieszanie wartości procentowych z wartościami bezwzględnymi
Przyjrzyjmy się przykładowi łączenia wartości procentowych z wartościami bezwzględnymi. Załóżmy, że chcemy przydzielić 50% dostępnej powierzchni pomniejszoną o stałą liczbę pikseli. Wtedy możemy zapisać to w ten sposób:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Jeśli kolor tła jest zielony, wygląda to tak:
Jeśli zmniejszysz rozmiar rodzica, będzie on wyglądał tak:
W tym przypadku wiemy, że prawa krawędź treści będzie znajdować się 100 pikseli na lewo od środka obszaru. Dzięki możliwości łączenia różnych typów wartości aplikacja internetowa może obsługiwać układ na urządzeniach o różnej wielkości z o wiele większą kontrolą niż wcześniej.
Mieszanie jednostek
Kolejną zaletą jest możliwość łączenia jednostek z różnymi pomiarami, aby uzyskać odpowiedni rozmiar. Możesz na przykład ustawić rozmiary w zależności od bieżącego rozmiaru czcionki, łącząc jednostki „em” i „px”.
#bar {
height: calc(10em + 3px);
}
Dobre przykłady łączenia wartości znajdziesz tutaj i tutaj.
Wypróbuj
W zasadzie calc() możesz używać operatorów +, -, * i / do dodawania, odejmowania, mnożenia i dzielenia wartości, co daje wiele możliwości. Możesz użyć calc() w dowolnym miejscu, w którym można użyć długości lub liczby w CSS. Pracujemy też nad dodaniem właściwości calc() dla kąta i częstotliwości. Właściwość calc() dla długości jest teraz dostępna w Chrome 19 (wersja z kanału deweloperskiego) za pomocą właściwości -webkit-calc, w Firefoksie od wersji 8 za pomocą właściwości -moz-calc, a w Internet Explorerze od wersji 9 bez prefiksu. Podziel się z nami swoją opinią, zostawiając komentarz poniżej.