CSS3 – Eller hur jag slutade oroas och lärde mig att älska stripes

CSS3. Sällan har ett litet ord smakat så lovande. Stöd för alla funktioner saknas fortfarande i somliga browsers, vilket Lea Verou förklarade ack så pedagogiskt på senaste Geekmeet (ironisk publikfråga: ”Funkar det för IE6?” – hela salen skrattar i samförstånd och ingen bemöder sig att svara). Det här gäller förstås inte endast IE6 utan även 7/8 har problem att med CSS3. Håll alla tummar och tår för att IE10 blir Microsoft superhjälte som gör att vi slipper upprepa meningen ”självklart måste vi göra en speciallösning för IE” för 40 000 miljonte gången.

Så. För att till exempel skapa en randig bakgrundsbild som är läsbar för Mozilla Firefox kan du lägga följande kodrader i din body-, html- eller annan lämplig tag.

background-image:
-moz-linear-gradient(0deg, transparent 50%, white 50%),
-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);

Deg står förstås för lutningen på gradienten och rgba(255, 255, 255, 0.3) betyder vit färg med 30% opacitet. Då färgstoppen går in i varandra bildas skarpa gränser istället för de luddiga färgtonerna som vi vanligtvis tänker på när vi hör gradienter nämnas.

För att göra det hela lite besvärligare har Safari/Chrome en egen standard som visserligen är enklare för mindre komplicerade gradienter men som snabbt ökar i komplexitet:

background-image:
-webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.5, transparent), color-stop(.5, white)),
-webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .3)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .3)),
color-stop(.75, rgba(255, 255, 255, .3)), color-stop(.75, transparent),
to(transparent));

Här betyder 0 100%, 100% 0 att gradienten ska börja i bottom left och gå till top right, det vill säga origo i koordinatsystemet är högst upp till vänster.

På sista frågan under Geekmeet, ”var har du lärt dig allt detta”, svarade Lea att hon har läst specifikationerna. För att vara lika elit kan man kila in på WC3:s sida och totalt grotta ned sig.