Kurs HTML

4.7. Zmienne CSS (Custom Properties)

Strona główna > Kurs CSS > Rozdział 4: Jednostki i Kolory w CSS > Zmienne CSS (Custom Properties)

Wprowadzenie: Dynamiczne i reużywalne wartości w CSS

Tradycyjnie, jeśli chcieliśmy użyć tej samej wartości (np. koloru, rozmiaru czcionki) w wielu miejscach w naszym CSS, musieliśmy ją powtarzać. Zmiana tej wartości wymagała znalezienia i edycji wszystkich jej wystąpień. Preprocesory CSS (jak Sass/Less) rozwiązywały ten problem za pomocą swoich zmiennych, ale wymagały dodatkowego kroku kompilacji.

Nowoczesny CSS wprowadził natywne rozwiązanie: **Zmienne CSS**, oficjalnie nazywane **Custom Properties for Cascading Variables**. Pozwalają one definiować własne właściwości (zmienne) bezpośrednio w CSS i odwoływać się do nich w innych miejscach arkusza stylów.

Zmienne CSS są dynamiczne, dziedziczone i mogą być modyfikowane za pomocą JavaScript, co otwiera wiele nowych możliwości.

Definiowanie zmiennych CSS

Zmienne CSS definiuje się za pomocą niestandardowej nazwy właściwości, która musi zaczynać się od **dwóch myślników (--)**. Nazwy zmiennych są wrażliwe na wielkość liter.

Zmienne deklaruje się wewnątrz bloku reguły CSS, podobnie jak standardowe właściwości. Najczęściej definiuje się je w selektorze :root, aby były dostępne globalnie w całym dokumencie. Selektor :root odnosi się do elementu <html>, ale ma wyższą specyficzność.

:root {
  /* Definicja zmiennych globalnych */
  --kolor-glowny: #007bff;
  --kolor-tekstu: #333;
  --rozmiar-czcionki-bazowy: 16px;
  --szerokosc-kontenera: 960px;
  --margines-standardowy: 1rem;
}

/* Można też definiować zmienne w innych selektorach (będą dziedziczone) */
.ciemny-motyw {
  --kolor-tekstu: #eee;
  --kolor-tla: #222;
}

button {
  --kolor-przycisku: var(--kolor-glowny); /* Zmienna lokalna dla przycisków */
}

Wartością zmiennej może być dowolna poprawna wartość CSS (kolor, długość, ciąg znaków itp.).

Używanie zmiennych CSS: Funkcja var()

Aby użyć wartości zdefiniowanej zmiennej, używamy funkcji var().

Składnia:

  • var(--nazwa-zmiennej) - Podstawowe użycie.
  • var(--nazwa-zmiennej, wartosc-domyslna) - Użycie z wartością domyślną (fallback). Jeśli zmienna --nazwa-zmiennej nie jest zdefiniowana, zostanie użyta wartosc-domyslna.
body {
  font-size: var(--rozmiar-czcionki-bazowy, 16px); /* Użycie zmiennej z fallbackiem */
  color: var(--kolor-tekstu);
}

.kontener {
  max-width: var(--szerokosc-kontenera);
  margin: 0 auto;
}

h1 {
  color: var(--kolor-glowny);
  margin-bottom: var(--margines-standardowy);
}

button {
  background-color: var(--kolor-przycisku); /* Użycie zmiennej zdefiniowanej w button */
  padding: var(--margines-standardowy);
  border: none;
  color: white;
}

/* Przykład użycia zmiennych z motywu */
.ciemny-motyw {
  background-color: var(--kolor-tla);
  color: var(--kolor-tekstu);
}

/* Wartość domyślna, gdy zmienna nie istnieje */
.jakis-element {
  border-color: var(--nieistniejaca-zmienna, black); /* Użyje koloru czarnego */
}

Dziedziczenie i Kaskadowość Zmiennych CSS

Zmienne CSS **podlegają standardowym zasadom dziedziczenia i kaskadowości**, tak jak inne właściwości CSS.

  • Zmienna zdefiniowana w elemencie jest dostępna dla tego elementu i wszystkich jego potomków (dziedziczenie).
  • Jeśli ta sama zmienna jest zdefiniowana na różnych poziomach (np. w :root i w konkretnym elemencie), zastosowana zostanie wartość wynikająca z kaskady (specyficzność, kolejność).
  • Można nadpisać wartość zmiennej dla konkretnego elementu lub jego poddrzewa.
:root {
  --kolor-akcentu: blue;
}

.sekcja {
  color: var(--kolor-akcentu); /* Niebieski */
}

.sekcja-specjalna {
  /* Nadpisanie zmiennej dla tej sekcji i jej potomków */
  --kolor-akcentu: green; 
}

.sekcja-specjalna p {
  /* Paragrafy wewnątrz .sekcja-specjalna użyją nadpisanej wartości */
  border-left: 5px solid var(--kolor-akcentu); /* Zielony */
}

Zalety Zmiennych CSS

  • Reużywalność i DRY: Definiujesz wartość raz i używasz jej wielokrotnie. Zmiana w jednym miejscu aktualizuje wszystkie wystąpienia.
  • Łatwość utrzymania: Ułatwiają zarządzanie globalnymi wartościami (np. paletą kolorów, typografią) w dużych projektach.
  • Czytelność: Dobrze nazwane zmienne (np. --kolor-ostrzezenia zamiast #dc3545) poprawiają czytelność kodu.
  • Dynamiczność: Wartości zmiennych mogą być łatwo modyfikowane za pomocą JavaScript (element.style.setProperty('--nazwa-zmiennej', 'nowa-wartosc')), co pozwala na dynamiczne zmiany wyglądu strony bez przeładowywania CSS (np. zmiana motywu, dostosowanie przez użytkownika).
  • Responsywność: Można zmieniać wartości zmiennych wewnątrz Media Queries, aby dostosować np. marginesy czy rozmiary czcionek do różnych rozmiarów ekranu.
:root {
  --padding-sekcji: 20px;
}

@media (min-width: 768px) {
  :root {
    --padding-sekcji: 40px; /* Większy padding na większych ekranach */
  }
}

.sekcja {
  padding: var(--padding-sekcji);
}

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Zdefiniuj globalną zmienną CSS --glowny-kolor-tla w selektorze :root i przypisz jej wartość #e9ecef (jasnoszary). Następnie użyj tej zmiennej, aby ustawić background-color dla elementu body.

Rozwiązanie:

CSS:

:root {
  --glowny-kolor-tla: #e9ecef;
}

body {
  background-color: var(--glowny-kolor-tla);
}

Efekt: Tło strony zostanie ustawione na kolor zdefiniowany w zmiennej --glowny-kolor-tla.

Zadanie 2 (do samodzielnego wykonania)

Zdefiniuj zmienne dla podstawowego rozmiaru czcionki (--font-size-base: 1rem) i mnożnika dla nagłówka H1 (--h1-multiplier: 2.5). Użyj funkcji calc() i var(), aby ustawić font-size dla h1 jako iloczyn tych dwóch zmiennych (font-size: calc(var(--font-size-base) * var(--h1-multiplier));).

Zadanie 3 (do samodzielnego wykonania)

Zdefiniuj zmienną --kolor-linku w :root na niebieski. Ustaw kolor linków (a) używając tej zmiennej. Następnie, dla linków wewnątrz elementu z klasą .stopka, nadpisz zmienną --kolor-linku na szary i zaobserwuj efekt.

FAQ - Najczęściej zadawane pytania

Jaka jest różnica między zmiennymi CSS a zmiennymi w preprocesorach (Sass/Less)?

Zmienne preprocesorów (np. $zmienna w Sass) istnieją tylko przed kompilacją – są zastępowane statycznymi wartościami w wynikowym pliku CSS. Zmienne CSS (--zmienna) istnieją **w przeglądarce**, są dynamiczne, dziedziczone i mogą być modyfikowane w czasie rzeczywistym (np. przez JavaScript), co daje znacznie większe możliwości.

Czy mogę używać zmiennych CSS wewnątrz Media Queries?

Możesz **definiować/nadpisywać** wartości zmiennych CSS wewnątrz Media Queries, co jest świetnym sposobem na responsywne dostosowywanie wartości. Nie możesz jednak używać zmiennych CSS jako części samego zapytania media query (np. @media (min-width: var(--breakpoint)) - to nie zadziała).

Co się stanie, jeśli użyję var() dla niezdefiniowanej zmiennej bez wartości domyślnej?

Jeśli zmienna nie jest zdefiniowana i nie podano wartości domyślnej, przeglądarka potraktuje deklarację jako nieprawidłową dla danej właściwości. W większości przypadków oznacza to, że właściwość przyjmie swoją wartość dziedziczoną lub początkową.

Czy zmienne CSS są dobrze wspierane przez przeglądarki?

Tak, zmienne CSS (Custom Properties) są obecnie bardzo dobrze wspierane przez wszystkie nowoczesne przeglądarki. Problemy mogą występować jedynie w bardzo starych wersjach, takich jak Internet Explorer.