Użycie zmiennych CSS

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

 

Zmienne CSS to zdefiniowane jednostki zawierające specyficzne wartości, reużywalne w całym dokumencie. Zmienne są ustawiane przy użyciu notacji właściwości niestandardowych (np. --kolor-glowny: black;) i mają dostęp do funkcji var() (np. kolor: var(--kolor-glowny);) .

Skomplikowane strony internetowe mają bardzo dużo powtarzającego się kodu CSS. Dla przykładu, taki sam kolor może być użyty setki razy w różnych miejscach, co w przypadku zmiany wymana globalnego wyszukiwania i zmian w wielu miejsach. Zmienne CSS pozwalają na przechowywanie wartości w jednym miejscu, zmiast wielu. Używają one również semantycznych identyfikatorów. Na przykład --glowny-kolor-tekstu jest łatwiejszy do zrozumienia niż #00ff00 szczególnie gdy taki sam kolor jest użyty w różnych kontekstach.

Zmienne CSS podlegają kaskadowości i dziedziczą wartości po rodzicach.

Podstawowe użycie

Deklarowanie zmiennych:

element {
  --glowny-kolor-tla: brown;
}

Użycie zmiennych:

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

Notatka: Niestandardowy prefix var- istniał we wcześniejszych wersjach, jednak później został zmieniony na --. Firefox 31 i wyższy posiada nową specyfikację. (błąd 985838)

Zmienne CSS - pierwsze kroki

Zacznijmy od prostego kodu CSS z różnymi klasami, których elementy posiadają różne kolory:

.jeden {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.dwa {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.trzy {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.cztery {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.piec {
  background-color: brown;
}

Implementujemy to w HTML'u:

<div>
    <div class="jeden"></div>
    <div class="dwa">Tekst <span class="cztery">- wiecej tekstu</span></div>
    <input class="trzy">
    <textarea class="piec">Lorem Ipsum</textarea>
</div>

co w efekcie daje nam:


Zauważ powtarzalność kodu CSS. Kolor tła jest ustawiony na brązowy w kilku miejscach.W niektórych przypadkach możemy zadeklarować kolor do wszystkich elementów, co rozwiązuje problem. Jednak w przypadku złożonych projektów, nie zawsze jest to możliwe. Deklarując zmienną przy pomocy pseudo-klasy :root, możemy przechowywać zmienną i używać jej według potrzeb.

:root {
  --glowny-kolor-tla: brown;
}

.jeden {
  color: white;
  background-color: var(--glowny-kolor-tla);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.dwa {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.trzy {
  color: white;
  background-color: var(--glowny-kolor-tla);
  margin: 10px;
  width: 75px;
}
.cztery {
  color: white;
  background-color: var(--glowny-kolor-tla);
  margin: 10px;
  width: 100px;
}

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

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

Powyższy kod daje taki sam rezultat jak we wcześniejszym przykładzie. 

Dziedziczenie zmiennych CSS

Niestandardowe właściwości mogą być dziedziczone. Oznacz to, że jeśli dany element nie ma wartości, może użyć tej odziedziczonej od rodzica:

<div class="jeden">
  <div class="dwa">
    <div class="trzy">
    </div>
    <div class="cztery">
    </div>
  <div>
</div>

z następującym kodem CSS:

.dwa {
  --test: 10px;
}

.trzy {
  --test: 2em;
}

W tym przykładzie wynikiem dla var(--test) jest:

  • class="two" element: 10px
  • class="three" element: 2em
  • class="four" element: 10px (odziedziczone od rodzica)
  • class="one" element: nieprawidłowa wartość, która jest wartością domyślą każdej właściwości.

Zgodność z przeglądarkami

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit
33.0
No support 34.0[2]
49.0
29 (29)[3]
31 (31)
No support 36.0 9.1
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No support 49.0 29 (29) ? ? 9.1 49.0

[1] Przeglądarka Chrome początkowo zaimplementowała zmienne CSS ze zmienioną składną, która wymagała niestandardowego prefixu przed nazwą zmiennej -webkit-var-. Można jej było następnie użyć przy pomocy funkcji -webkit-var(). Dodatkowo implementacja została ukryta pod flagą Eksperymentalne funkcje platformy internetowej  pod chrome://flags.

[2] Chrome 34.0 usunął zmienne CSS ze względu na problemy z wydajnością.

[3] Zmienne CSS są zaimplementowane w preferencjach layout.css.variables.enabled, standardowo ustawione na false i używające stare składnia var-variablename w Gecko 29. Rozpoczynając od Gecko 31 implementacja jest włączona i używa nowej składni --variablename.

Autorzy i etykiety dokumentu

 Autorzy tej strony: Miras
 Ostatnia aktualizacja: Miras,