Zmienne CSS

Zmienne CSS, a dokładniej customowe właściwości (ang. custom properties) są nowym modułem standardu CSS, w tym poście przedstawię jak ich używać.

Zmienne CSS zapisujemy używając dwóch myślników przed nazwą np.:

p {
    --color: red;
}

Możecie się zastanawiać, dlaczego nie $color. Składnie tą użyto, ponieważ dolara używają preprocesory CSS takie jak Less czy Sass więc skorzystano z innej składni, aby było możliwe użycie zmiennych Less/Sass w tym samym arkuszu razem ze zmiennymi CSS.

Aby użyć zmiennej CSS, korzystamy z funkcji var np.:

p {
    background: var(--color);
}

Możemy wykryć czy zmienne css są obsługiwane przez przeglądarkę za pomocą reguły at @support, aczkolwiek @support nie jest obsługiwany przez przeglądarkę Internet Exporer, ale nie obsługuje ona także zmiennych CSS, więc to nie ma znaczenia.

article {
    background: red;
}

@supports (--css: variables) {
    article {
        background: green;
    }
}

Powyższy kod ustawi tło jako kolor czerwony, jeśli przeglądarka nie obsługuje zmiennych css lub zielony, jeśli je obsługuje.

Jeśli mamy kod, który używa tej samej właściwości dwa razy np.:

div.box {
    font-size: 45px;
    width: 6em;
    height: 6em;
}

Możemy skrócić ten kod używając zmiennych np.:

div.box {
    font-size: 45px;
    --size: 6em;
    width: var(--size);
    height: var(--size);
}

Aby zmienna --size miała wartość 6, nie można użyć width: var(--size)em, ponieważ przeglądarka zinterpretuje to jako 6 em, na szczęście można skonwertować wartość liczbową do jednostkowej używając calc i mnożąc przez 1em np.:

div.box {
    font-size: 45px;
    --size: 6;
    width: calc(var(--size) * 1em);
    height: calc(var(--size) * 1em);
}

lub

div.box {
    font-size: 45px;
    --side: 6;
    --size: calc(var(--side) * 1em);
    width: var(--size);
    height: var(--size);
}

Zmiennych można także używać jako style inline np.:

<div class="box" style="--side: 7"></div>

Zmiennych CSS można użyć, aby skrócić zapis nowych właściwości z prefixami np:

* {
    --box-shadow: initial;
    -webkit-box-shadow: var(--box-shadow);
    -moz-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

i użyć tej zmiennej na jakimś elemencie np.:

.box {
    --box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

Można ich używać, aby dodać nowe właściwości np --prepend, która doda nowy tekst przed elementem np.:

* {
    --prepend: initial;
}
::before {
    content: var(--prepend);
}

i wtedy możemy dodać tekst, korzystając z poniższego kodu:

.box {
    --prepend: "hello";
}

może nawet używać tej właściwości inline, np.:

<div style="--prepend: 'hello '">world!</div>

Powyższy kod wyświetli tekst „hello world!”.

Zmienne CSS w JavaScript

Można definiować zmienne w JavaScript. Aby pobrać wartość można użyć:

element.style.getPropertyValue("--foo");

powyższy kod pobierze wartość zmiennej inline, aby pobrać wartość, która może być zdefiniowana w pliku css, można użyć:

getComputedStyle(element).getPropertyValue("--foo");

aby przypisać wartość, korzystamy z funkcji setProperty np.:

element.style.setProperty("--foo", 10);

Możemy przypisać je do elementu root, aby potem użyć dla dowolnego elementu:

var root = document.documentElement;
root.style.setProperty("--foo", 10);

Można ich użyć aby dodać wartość elementu input i użyć go w css:

function value(input) {
    input.style.setProperty('--value', input.value);
}
for (var input of document.querySelectorAll('input')) {
    value(input);
}
document.addEventListener('input', function(event) {
    value(event.target);
});

po dodaniu zmiennej --value, można jej użyć dla elementu input o typie range, aby dodać inne tło od początku do uchwytu:

input[type="range"] {
    appearance: none;
    background: linear-gradient(to right, red calc(var(--value) * 1%), transparent 0);
}

Podsumowanie

Możecie się zastanawiać czy można używać zmiennych css już dzisiaj. Okazuje się, że zmienne css są dostępne w większości nowoczesnych przeglądarek oprócz Internet Explorera i Edge, chociaż wiadomo (w chwili pisania tego artykułu), że ich obsługa ma zostać dodana w nowej wersji 15 przeglądarki Edge. Możecie zobaczyć jakie przeglądarki już je zaimplementowały na stronie can I use.