---
title: Użycie zmiennych CSS
slug: Web/CSS/Using_CSS_custom_properties
translation_of: Web/CSS/Using_CSS_custom_properties
---
<div>{{SeeCompatTable}}</div>



<p><strong>Zmienne CSS </strong>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. <strong><code>--kolor-glowny: black;</code></strong>) i mają dostęp do funkcji <code>var() (np. kolor: <strong>var(--kolor-glowny)</strong>;</code>) .</p>

<p>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 <code>--glowny-kolor-tekstu</code> jest łatwiejszy do zrozumienia niż <code>#00ff00</code> szczególnie gdy taki sam kolor jest użyty w różnych kontekstach.</p>

<p>Zmienne CSS podlegają kaskadowości i dziedziczą wartości po rodzicach.</p>

<h2 id="Podstawowe_użycie">Podstawowe użycie</h2>

<p>Deklarowanie zmiennych:</p>

<pre class="brush:css; highlight:[2]  language-css">element {
  --glowny-kolor-tla: brown;
}
</pre>

<p>Użycie zmiennych:</p>

<pre class="brush:css; highlight:[2]  language-css">element {
  background-color: var(--glowny-kolor-tla);
}
</pre>

<div class="note">
<p><strong>Notatka:</strong> Niestandardowy prefix <code>var-</code> istniał we wcześniejszych wersjach, jednak później został zmieniony na <code>--</code>. Firefox 31 i wyższy posiada nową specyfikację. ({{bug(985838)}})</p>
</div>

<h2 id="Zmienne_CSS_-_pierwsze_kroki">Zmienne CSS - pierwsze kroki</h2>

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

<div id="sample1">
<pre class="brush:css; highlight:[3,20,26,32]">.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;
}

</pre>

<p>Implementujemy to w HTML'u:</p>

<pre class="brush:html">&lt;div&gt;
    &lt;div class="jeden"&gt;&lt;/div&gt;
    &lt;div class="dwa"&gt;Tekst &lt;span class="cztery"&gt;- wiecej tekstu&lt;/span&gt;&lt;/div&gt;
    &lt;input class="trzy"&gt;
    &lt;textarea class="piec"&gt;Lorem Ipsum&lt;/textarea&gt;
&lt;/div&gt;
</pre>

<p>co w efekcie daje nam:</p>

<p>{{EmbedLiveSample("sample1",600,180)}}</p>

<p><br>
 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.</p>
</div>

<div id="sample2">
<pre class="brush:css; highlight:[2, 7, 24,30,36]">: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);
}

</pre>

<div class="hidden">
<pre class="brush:html">&lt;div&gt;
    &lt;div class="one"&gt;&lt;/div&gt;
    &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
    &lt;input class="three"&gt;
    &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
&lt;/div&gt;
</pre>
</div>

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

<h2 id="Dziedziczenie_zmiennych_CSS">Dziedziczenie zmiennych CSS</h2>

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

<pre class="brush: html">&lt;div class="jeden"&gt;
  &lt;div class="dwa"&gt;
    &lt;div class="trzy"&gt;
    &lt;/div&gt;
    &lt;div class="cztery"&gt;
    &lt;/div&gt;
  &lt;div&gt;
&lt;/div&gt;</pre>
</div>

<p>z następującym kodem CSS:</p>

<pre class="brush: css">.dwa {
  --test: 10px;
}

.trzy {
  --test: 2em;
}
</pre>

<p>W tym przykładzie wynikiem dla <code>var(--test)</code> jest:</p>

<ul>
 <li><code>class="dwa"</code> element: <code>10px</code></li>
 <li><code>class="trzy"</code> element: <code>2em</code></li>
 <li><code>class="cztery"</code> element: <code>10px</code> (odziedziczone od rodzica)</li>
 <li><code>class="jeden"</code> element: <em>nieprawidłowa wartość</em>, która jest wartością domyślą każdej właściwości.</li>
</ul>

<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    33.0<br>
    {{CompatNo}} 34.0<sup>[2]</sup><br>
    {{CompatChrome(49.0)}}</td>
   <td>{{CompatGeckoDesktop("29")}}<sup>[3]</sup><br>
    {{CompatGeckoDesktop("31")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(36.0)}}</td>
   <td>9.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{CompatGeckoDesktop("29")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>9.1</td>
   <td>{{CompatChrome(49.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

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

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

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