5.1 Funkcja calc()
Funkcje CSS dostarczają efektywne narzędzia do wykonywania różnych operacji bezpośrednio w plikach stylów.
Funkcje calc(), min(), max() i clamp() są szczególnie przydatne do tworzenia responsywnych i elastycznych projektów, ponieważ pozwalają
na wykonywanie operacji matematycznych i warunkowych obliczeń wartości.
Funkcja calc() jest używana do wykonywania operacji matematycznych w CSS. Pozwala łączyć różne
jednostki miary, takie jak piksele (px), procenty (%), em, rem i inne, w jednym wyrażeniu.
Składnia:
selektor {
właściwość: calc(wyrażenie);
}
Przykład użycia
W tym przykładzie szerokość bloku jest obliczana jako 50% szerokości elementu rodzica minus 20 pikseli:
/* Szerokość bloku to połowa elementu rodzica minus 20px */
.block {
width: calc(50% - 20px);
}
5.2 Funkcje min(), max() i clamp()
Funkcje min(), max() i clamp() w CSS
Funkcja min()
Funkcja min() przyjmuje kilka wartości i zwraca najmniejszą z nich. Przydatna do tworzenia
elastycznych rozmiarów, które zmieniają się w zależności od kontekstu.
Składnia:
selektor {
właściwość: min(wartość1, wartość2);
}
Przykład
W tym przykładzie szerokość kontenera będzie wynosić 50% lub 300 pikseli, w zależności od tego, co jest mniejsze:
.container {
width: min(50%, 300px);
}
Funkcja max()
Funkcja max() przyjmuje kilka wartości i zwraca największą z nich. Przydatna do ustawiania
minimalnych rozmiarów i zapewnienia responsywności.
Funkcja clamp()
Funkcja clamp() przyjmuje trzy wartości: minimalną, preferowaną i maksymalną. Ogranicza
wartość pomiędzy minimalną a maksymalną, dążąc do preferowanej wartości.
5.3 Zalety korzystania z funkcji CSS
Zalety korzystania z funkcji CSS:
- Elastyczność. Funkcje CSS pozwalają tworzyć bardziej elastyczne i responsywne style, gdyż umożliwiają dynamiczne obliczanie wartości.
- Uproszczenie projektowania responsywnego. Funkcje
min(),max()iclamp()znacznie upraszczają tworzenie projektów responsywnych, umożliwiając ograniczanie wartości określonymi granicami. - Zmniejszenie potrzeby stosowania media queries. Korzystanie z tych funkcji może zredukować ilość media queries potrzebnych do dostosowania stylów do różnych rozmiarów ekranów.
5.4 Przykład pełnej implementacji
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład użycia funkcji CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">Blok z szerokością calc(50% - 20px)</div>
<div class="block">Blok z szerokością min(300px, 100%)</div>
<div class="block">Blok z szerokością max(200px, 50%)</div>
<p class="text">Tekst z rozmiarem czcionki clamp(12px, 2vw, 24px)</p>
</div>
</body>
</html>
GO TO FULL VERSION