Zmienne CSS: custom properties w praktyce, krok po kroku

CSS Custom Properties, znane szerzej jako zmienne CSS, to duży krok naprzód dla front-endu. Wnoszą do CSS-a siłę zmiennych, a to oznacza mniej powtórzeń, lepszą czytelność i większą elastyczność.

W dodatku, w odróżnieniu od zmiennych z preprocesorów CSS, zmienne CSS są częścią DOM-u, co daje sporo korzyści. Zasadniczo działają więc tak jak zmienne w SASS-ie i LESS-ie. W tym poradniku pokażę na przykładach, jak ten moduł CSS3 działa.

Po co używać zmiennych CSS?

Powodów jest wiele. Jeden z najbardziej przekonujących: zmienne ograniczają powtórzenia w arkuszu stylów.

Stara metoda

#title {
    color: #ff0000;
}

.h1 {
    color: #ff0000;
}

Nowa metoda

:root {
    --red: #ff0000; /* Déclaration d'une variable css */
}
#title {
    color: var(--red); /* Utilisation de la variable css */
}

.h1 {
    color: var(--red); /* Utilisation de la variable css */
}

Kod nie tylko czyta się łatwiej, ale też zyskujesz elastyczność, gdyby przyszło ci ten kolor zmienić.

Owszem, w SASS-ie i LESS-ie da się tak pracować od lat. Zmienne CSS mają jednak kilka przewag.

1. Nie trzeba ich niczym przetwarzać, bo są natywne dla przeglądarki. Nie potrzebujesz więc żadnej konfiguracji na start, inaczej niż przy SASS-ie i LESS-ie
2. Żyją w DOM-ie, co otwiera całą listę możliwości, o nich w dalszej części poradnika.

To co, zaczynamy naukę zmiennych CSS!

Zadeklaruj swoją pierwszą zmienną CSS

Zanim zadeklarujesz zmienną, zdecyduj, w jakim zasięgu ma żyć. Jeśli chcesz mieć ją dostępną globalnie, zdefiniuj ją po prostu w pseudoklasie :root. Odpowiada ona elementowi głównemu drzewa dokumentu (zwykle znacznikowi <html>).

Ponieważ zmienne są dziedziczone, będzie dostępna w całej aplikacji, wszystkie twoje elementy DOM są potomkami znacznika <html>.

:root {
    --main-color: #00FF00; /* Déclaration d'une variable css */
}

Jak widzisz, zmienną deklaruje się tak samo jak zwykłą właściwość CSS. Z jedną różnicą: nazwa musi zaczynać się od dwóch myślników.

Żeby sięgnąć po zmienną, użyj funkcji var() i przekaż jej nazwę zmiennej jako parametr.

#title {
  color: var(--main-color);
}

Twój tytuł dostanie w ten sposób kolor #00FF00.

Deklarowanie lokalnej zmiennej CSS

Możesz też tworzyć zmienne lokalne, dostępne wyłącznie dla elementu, w którym zostały zadeklarowane, i dla jego dzieci. Przydaje się to wtedy, gdy wiesz, że zmienna posłuży tylko w jednej albo w kilku konkretnych częściach aplikacji.

Możesz na przykład mieć okienko alertu w specyficznym kolorze, którego nigdzie indziej nie używasz. W takim wypadku rozsądniej zadeklarować go lokalnie.

.alert {
  --alert-color: #ff0000;
}

Z tej zmiennej mogą teraz korzystać elementy potomne:

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

Jeśli spróbujesz użyć zmiennej alert-color gdzie indziej w aplikacji, na przykład w pasku nawigacji, nic się nie wydarzy. Przeglądarka po prostu zignoruje tę linię CSS-a.

Responsywność ze zmiennymi CSS

Dużą zaletą zmiennych CSS jest dostęp do DOM-u. LESS i SASS tego nie mają, bo ich zmienne są najpierw kompilowane do CSS-a, a dopiero potem czyta je przeglądarka

W praktyce oznacza to, że możesz na przykład zmieniać wartości zmiennych w zależności od szerokości ekranu:

:root {
  --main-size: 16px ;
}
@media all and (max-width: 600px) {
  :root {
    --main-size : 12px ;
  }
}

Tymi czterema prostymi liniami zmieniasz bazowy rozmiar czcionki w całej aplikacji, gdy wyświetla się ona na małych ekranach. Całkiem eleganckie, prawda?

Jak sięgnąć po zmienne CSS z poziomu JavaScriptu

Kolejna korzyść z życia w DOM-ie: po zmienne możesz sięgnąć z JavaScriptu, a nawet je aktualizować, na przykład w reakcji na działania użytkownika.

var root = document.querySelector(':root') ;
var rootStyles = getComputedStyle(root) ;
var mainColor = rootStyles.getPropertyValue('--main-color') ;
console.log(mainColor); // #00FF00

Żeby zaktualizować zmienną CSS, wywołaj metodę setProperty na elemencie, w którym zmienne CSS zostały zadeklarowane, i przekaż nazwę zmiennej jako pierwszy parametr, a nową wartość jako drugi.

root.style.setProperty('--main-color','#0000ff')

Wsparcie przeglądarek

Wszystkie obecne przeglądarki obsługują zmienne CSS, ignoruje je tylko porzucony już Internet Explorer.

···