Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
204 lines (157 sloc) 5.66 KB
layout title date categories tags author description sitemap
post
Zmienne CSS
2016-12-21 20:27:43 +0100
css css3 properties javascript
jcubic
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ć
lastmod
2017-09-08 20:35:15 +0200

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.:

{% highlight css %} p { --color: red; } {% endhighlight %}

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.:

{% highlight css %} p { background: var(--color); } {% endhighlight %}

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.

{% highlight css %} article { background: red; }

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

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.:

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

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

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

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.:

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

lub

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

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

{% highlight html %}

{% endhighlight %}

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

{% highlight css %}

  • { --box-shadow: initial; -webkit-box-shadow: var(--box-shadow); -moz-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } {% endhighlight %}

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

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

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

{% highlight css %}

  • { --prepend: initial; } ::before { content: var(--prepend); } {% endhighlight %}

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

{% highlight css %} .box { --prepend: "hello"; } {% endhighlight %}

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

{% highlight html %}

world!
{% endhighlight %}

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

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

{% highlight javascript %} element.style.getPropertyValue("--foo"); {% endhighlight %}

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

{% highlight javascript %} getComputedStyle(element).getPropertyValue("--foo"); {% endhighlight %}

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

{% highlight javascript %} element.style.setProperty("--foo", 10); {% endhighlight %}

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

{% highlight javascript %} var root = document.documentElement; root.style.setProperty("--foo", 10); {% endhighlight %}

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

{% highlight javascript %} 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); }); {% endhighlight %}

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:

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

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 Exportera 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.