From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/using_css_custom_properties/index.html | 244 +++++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 files/pl/web/css/using_css_custom_properties/index.html (limited to 'files/pl/web/css/using_css_custom_properties') 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 +--- +
{{SeeCompatTable}}
+ +
+ +

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ę. ({{bug(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:

+ +

{{EmbedLiveSample("sample1",600,180)}}

+ +


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

+ + + +

Zgodność z przeglądarkami

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 33.0
+ {{CompatNo}} 34.0[2]
+ {{CompatChrome(49.0)}}		{{CompatGeckoDesktop("29")}}[3]
+ {{CompatGeckoDesktop("31")}}		{{CompatNo}}{{CompatOpera(36.0)}}9.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(49.0)}}{{CompatGeckoDesktop("29")}}{{CompatUnknown}}{{CompatUnknown}}9.1{{CompatChrome(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.

-- cgit v1.2.3-54-g00ecf