Artykuł

sxc.hu sxc.hu
wrz 18 2013
0

Jak używać zmiennych CSS

Patrząc na dynamiczny rozwój technologii webowych, trudno nie oprzeć się wrażeniu że CSS został trochę z tyłu w stosunku do tego co się dzieje w przypadku HTMLa, czy JavaScriptu. Mamy tutaj co prawda kilka nowych ciekawych elementów w stylu choćby opisywanych przeze mnie wcześniej animacji, ale temat wciąż rozwija się słabo.

Problemem z reguły jest też kiepskie wsparcie wybranych zagadnień, bądź też niska ich popularność/świadomość wśród samych deweloperów. Coraz większy wpływ na CSS ma też wspomniany JavaScript. Jest to jednak nie do końca szczęśliwe rozwiązanie, ponieważ mieszamy tutaj dwie różne technologie, narażamy się także na niekompatybilność samego JavaScriptu, a poza tym JS jest znacznie wolniejszy niż CSS wykonywany bezpośrednio przez przeglądarkę.

Na szczęście wygląda, że sytuacja powoli zaczyna się zmieniać, a twórcy specyfikacji CSS budzą się z zimowego snu. Wkrótce na horyzoncie prawdopodobnie pojawią się bowiem bardzo kuszące nowości, a jedną z nich mogą być zmienne CSS.

Koncepcja zmiennych CSS

Zmienne CSS nie są do końca nową koncepcją, ale technologią która pośrednio za pomocą bibliotek JS Less oraz Sass już funkcjonuje. W tym przypadku chodzi mi jednak o natywne wsparcie przez sam CSS bez żadnych dodatkowych narzędzi.

W konsorcjum W3C został już opracowany odpowiedni szkic, który co prawda nie otrzymał jeszcze rekomendacji, ale na jego podstawie możliwe jest zaimplementowanie tej technologii w poszczególnych przeglądarkach. Obecnie zmienne funkcjonują głównie w przeglądarce Chrome (czytaj więcej w sekcji Wsparcie), ale miejmy nadzieję, że szybko się to zmieni.

Istota zmiennych jest całkiem prosta - tworzymy deklarację zmiennej, której przypisujemy określoną wartość, a następnie wykorzystujemy ją dowolną ilość razy na naszej stronie. Dzięki takiemu podejściu można niewątpliwie bardzo ułatwić sobie jakiekolwiek późniejsze zmiany w interfejsie. By zmienić kolor tekstu, czy tła wielu elementów wystarczy bowiem wtedy tylko dokonać modyfikacji w jednym miejscu.

Ważnym elementem zmiennych jest również ich zasięg, bowiem przy ich tworzeniu niejako określamy obszar, w którym będą one mogły być wywołane. Oczywiście podając przy deklaracji znacznik HTML, czy BODY w praktyce doprowadzamy do tego, że będą one dostępne na całej stronie. Tym samym podając selektor #content mówimy CSSowi o tym, że wskazane zmienne będzie można wywołać tylko w DIVie zawierającym główną treść witryny. Działają tutaj oczywiście standardowe reguły dziedziczenia CSS.

Zmienne CSS w praktyce

W praktyce zastosowanie zmiennych CSS jest bardzo proste - przede wszystkim musimy zadeklarować zmienną dla określonego zasięgu:

html {
	var-bg: #ABCDEF;
	-webkit-var-bg: #ABCDEF;
}

W tym krótkim kawałku kodu, ustawialiśmy zmienną o nazwie bg i przypisaliśmy jej pewien losowy kolor. Zwróćcie uwagę na fakt, że zadeklarowaliśmy ją dla elementu html, czyli tym samym będzie ona widoczna w całym dokumencie. Deklaracja nowej zmiennej sprowadza się do zastosowania prefixu var- przed jej nazwą oraz do podania wartości po dwukropku. Wartość oczywiście może być dowolna, w naszym przypadku jest nią losowy kolor.

W 3 linii zastosowaliśmy prefix -webkit-, który dotyczył starszych wersji Chrome. Gdzieś od wersji ~28, nie jest on już więcej wymagany, ale dla formalności podaję użycie również w takiej postaci.

W kolejnym kroku, musimy wywołać naszą nową zmienną. Naszym zadaniem będzie w tym przypadku przypisanie nowego koloru tła, dla elementu body. Robi się to bardzo prosto:

body {
	background: var(bg);
	background: -webkit-var(bg);
}

Wykorzystujemy słowo kluczowe var do przekazania nazwy zmiennej. Z programistycznego punktu widzenia, wygląda to trochę tak, jakbyśmy wywoływali specjalną funkcję, do której przekazujemy nazwę zmiennej jako jej argument;-)

Tyle z nowości. Poniżej kod całej strony wykorzystującej zmienne:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8" />
		<title></title>
		<style>
		html {
			var-bg: #ABCDEF;
			-webkit-var-bg: #ABCDEF;
		}
		body {
			background: var(bg);
			background: -webkit-var(bg);
		}
p {
	color: #FFF;
	text-transform: uppercase;
}
		</style>
	</head>
	<body>
		<p>WOW! Twoja przeglądarka obsługuje zmienne. Niebieskie tło jest zasługą zmiennej CSS!</p>
	</body>
</html>

Rozwiązanie przedstawia się bardzo prosto. W sytuacji gdy przeglądarka nie obsługuje zmiennych, to na ekranie nie zobaczymy nic - puste białe tło. W przeciwnym przypadku w oknie przeglądarki ujrzycie biały tekst na niebieskim tle.

Wsparcie

W praktyce ze zmiennymi obecnie można spotkać się chyba tylko i wyłącznie w przeglądarce Chrome. Ponadto nie są one standardowo włączone (nawet w kanałach beta itp.). Aby aktywować tego typu funkcjonalność, należy w pasku adresu wpisać:

chrome://flags

A następnie włączyć opcję Włącz eksperymentalne funkcje platformy internetowej. Konieczny będzie restart przeglądarki.

Zmienne CSS zapowiadają się naprawdę interesująco i pozostaje mieć nadzieję, że konsorcjum W3C wyda zielone światło dla tego projektu.

Źródła

Data ostatniej modyfikacji: 18.09.2013, 20:50.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus