_nec - webfejlesztés, front-end programozás, javascript, css, xhtml, ajax, air

CSS változók

A WebKit legfrissebb verziójába bekerült a tervezett CSS változók kezelése.

Olyan megoldásokra vannak példák IE alatt, hogy CSSben javascript számolásokat végzünk, de ezek természetesen nem szabványos megoldások, s mint ilyenek, nem feltétlenül működnek a többi böngészőben. Mások szerveroldali megoldásokkal definiálnak változókat a css-ben, pl ruby segítségével, de ez meg véleményem szerint sérti a rétegszemléletet, stíluslapokhoz ne nyúljunk szerveroldalon.

Nem, itt másról van szó, egy eszközről, amivel áttekinthetőbbé és kezelhetőbbé tudjuk tenni a stíluslapjainkat.

Pár css okítás megemlíti, hogy könnyebbé tehetjük életünk, ha bizonyos szövegformázásokat vagy oldal elemeket vázlatszerűen dokumentálunk a stíluslapokban, pl:

/**
 *	szöveg színek
 *
 *	link kék		:  #0099ff;
 *	cím piros		:  #cf1855;
 *	idézet szürke	:  #dedede;
 */
 
h1 {
	color: #cf1855;
}
p a {
	color: #0099ff;
}
blockquote {
	color: #dedede;
}

Ezt a logikát követi a most beemelt megoldás, csak igazi funkcionalitást ad az egésznek, az előző példa így nézhet ki:

/**
 *	szöveg színek
 */
@variables {
	link_kek:		#0099ff;
	cim_piros: 		#cf1855;
	idezet_szurke:	#dedede;
}
 
h1 {
	color: var(cim_piros);
}
p a {
	color: var(link_kek);
}
blockquote {
	color: var(idezet_szurke);
}

Látható, hogy segítségével apróbb, de következetes módosításokat végezhetünk a stíluslapjainkon, csak jól kell használni. A használata kiterjed az @import által beemelt stíluslapokra is, tehát nem szükséges fileonként beállítani. A @variables defíníciónál lehetőség van média típust is megadni, tehát nem szükséges komplikálni a nyomtatási stílusokat.

A WebKit nem egy elterjedt böngésző, viszont példaértékűen elöljár a szabványok beemelésében, és sok más böngészőnek a motorja. Innen már csak az a kérdés a többi böngészőfejlesztő mikor csatlakozik, illetve - érdekességképpen -  melyik Adobe AIR verzióban használhatjuk majd.

Aki kedvet kap hozzá, szerezzen be egy friss webkitet, és lesse meg a tesztoldalakat.

Hozzászólások, trackbackek [trackback url]

1. gex 11:27 | 2008.07.02

   nagyon remélem, hogy hamar implementálják a többi motorban is, mert a hasznosságához nem fér kétség. egy olyan megoldáson gondolkoztam már, ami egy ilyen css változókkal megírt fájlt reguláris kifejezésekkel átalakít hagyományos - azaz minden böngésző számára érthető - formára végül nem jutott a kísérleti stádiumon túl, de most lehet hogy újra belevágok. és ha minden böngésző érteni fogja ezeket a szabályokat, akkor majd egyszerűen csak kihagyom az átalakítást.

2. Bártházi András 12:16 | 2008.07.02

   Becsszó, becsszó, de csak nem töltötted ki azt az impresszumot. :) Írsz nekem egy emailt? Szívesen látnám a blogot a web.miner.hu válogatásban.