Weblabor

Ugye mindenki emlékszik még a CSS hackek dicső időszakára? Aki nem használta, az felvetett fejjel üdvözli, hogy végre kivesztek, aki igen, az lesütött szemmel motyog valamit a keresztböngészős követelményekről.

De hisz megint hackelsz, nem törik le a kezed?

A CSS3 végre elhozni látszik a webes látvány várva várt aranykorát: egyedi betűtípusok, kerek sarkok, áttetszőség, színátmenetek, árnyékok, forgatás stb.

.this-is-awesome {
	border-radius: 5px;
}

Egy sornyi CSS-sel lekerekítettük a sarkokat. Elméletben. Mert ugye a böngészőgyártók úgy döntöttek, a gyakorlatban ehhez használjuk a saját specifikus előtagjukat:

.this-is-slightly-less-awesome {
	border-radius: 10px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

Na persze gondoljunk a többi böngészőre is. És még abban sem biztosak, hogy van-e összevont alak:

.this-is-absurd {
	border-radius: 10px 5px;
	-moz-border-radius: 10px 5px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 5px;
	-o-border-radius: 10px 5px;
	-khtml-border-top-left-radius: 10px;
	-khtml-border-top-right-radius: 5px;
	-khtml-border-bottom-right-radius: 10px;
	-khtml-border-bottom-left-radius: 5px;
}

Na mi ez, ha nem hackelés? Egészen olvasmányos a kód, ugye? És még csak nem is validál.

Fentieken elborzadva hozta össze Aaron Gustafson az eCSStender („extender”) nevű JavaScript könyvtárat, minek közreműködésével böngészőspecifikus előtagok nélkül használhatjuk a CSS3 lehetőségeit.

Használatához elegendő behúzni a könyvtárat és az igényünk szerinti kiterjesztést (alapból a szabvány moduljai szerint összeállítva, de lehetőségünk van sajátot csomagolni), ő pedig betöltés után megvizsgálja a stíluslapokat, ahol CSS3 tulajdonságot lát, s működik a sztenderd alak, ott békén hagyja, ahol nem, ott lecseréli a prefixes alakra.

Amikor pedig végre minden böngésző támogatja a szabványos formákat, akkor elég kivenni a szkripteket, és elérkezik a világbéke.