Funkcje CSS

Dostępny

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:

CSS
/* 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:

CSS
.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() i clamp() 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

CSS
.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);
}
HTML
<!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>
1
Zadanie
Frontend SELF PL,  poziom 31lekcja 4
Niedostępne
Szerokość z calc()
Szerokość z calc()
1
Zadanie
Frontend SELF PL,  poziom 31lekcja 4
Niedostępne
Adaptacyjna szerokość min()
Adaptacyjna szerokość min()
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy