initial commit

1 files changed, 244 insertions, 0 deletions

diff --git a/files/pl/web/css/using_css_custom_properties/index.html b/files/pl/web/css/using_css_custom_properties/index.html
new file mode 100644
index 0000000000..c9b7089b07
--- /dev/null
+++ b/files/pl/web/css/using_css_custom_properties/index.html
@@ -0,0 +1,244 @@
+---
+title: Użycie zmiennych CSS
+slug: Web/CSS/Using_CSS_custom_properties
+translation_of: Web/CSS/Using_CSS_custom_properties
+---
+<div>{{SeeCompatTable}}</div>
+
+<div></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 style="display: none;">
+<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>