Vänta inte med att använda CSS3
Det är stor skillnad på den senaste versionen av CSS jämfört med de tidigare. Inte bara på funktionerna som specifikationen innehåller, utan även på hur den är skriven. Här reder vi ut hur du kan börja använda nyheterna redan idag. Oavsett om alla webbläsare har stöd för dem.
Alla tidigare versionerna av CSS har varit skrivna i en enda specifikation. På grund av det har antingen allt eller inget varit spikat för webbläsartillverkarna att implementera. Vissa har gått före och lagt in stöd redan innan hela specifikationen varit klar, och andra har väntat till den varit helt spikad.
Exempelvis blev inte CSS 2.1 helt klar förrän 8 september 2009. Men trots det har vi använt funktioner ur den versionen under ganska lång tid.
CSS3 är uppdelat i moduler
Fördelen med CSS3 är att det är uppdelat i moduler, där varje modul har en egen utvecklingsbana fram till att den spikas som en färdig standard. Det här gör att vissa delar kommer att bli klara betydligt tidigare än andra. Men bara för att en modul inte är en spikad standard betyder det inte att den inte går att använda. Många delar har redan idag stöd i populära webbläsare, och då finns ingen anledning till att inte börja använda dem.
En bra sajt som följer CSS3-utvecklingen är CSS3.info där de även har en lista på statusen för de olika modulerna.
En sajt behöver inte se exakt likadan ut överallt
En vanlig missuppfatting är att en sajt måste se exakt likadan ut i alla webbläsare och i alla operativsystem. Det här är något som är i princip omöjligt att åstadkomma, och det är också helt ologiskt. Man har olika behov beroende på hur man besöker sidan. Går man via en mobiltelefon så måste man göra en layout anpassad för en liten skärm, och surfar man på det ena operativsystemet så har det konventioner som andra inte har.
Zurbls sajt med CSS3-anpassade knappar i Explorer, Firefox och Safari. Funkar överallt, men skiljer sig en aning utseendemässigt.
Det här ska man utnyttja och göra en sajt som är funktionsduglig på alla plattformar och i alla läsare, men som inte nödvändigtvis är exakt likadan överallt. Ett bra exempel är att man kan använda möjligheten till rundade hörn i Safari och Firefox, men låta Internet Exploreranvändarna få raka hörn. Samma sak med skuggor och RGBa (alfatransparens i färger).
Exempel på bra grejer ur CSS3
Sajten Westciv har en uppsättning verktyg för att testa de nya reglerna och generera korrekt fungerande kod. Här kan man testa många av de nya grafikmöjlighetern, och även delar av animeringsfunktionerna.
Ett exempel på när man kan använda övertoningar är när man ska göra en knapp liknande de från Zurb. Här en submit-knapp som försöker efterlikna den på Mobile me-inloggningen.
/* Här påverkas enbart input-taggar med typen submit */
input[type=submit] {
background: rgb(133,149,166);
background: -webkit-gradient(
linear, left top, left bottom,
from(rgb(217,223,230)),
to(rgb(133,149,166)),
color-stop(0.5, rgb(163,176,191)),
color-stop(0.5, rgb(141,158,175))
);
background: -moz-linear-gradient(
0% 100% 90deg,
rgb(217,223,230),
rgb(133,149,166)
);
-webkit-box-shadow: 0 0 2px #666;
-moz-box-shadow: 0 0 2px #666;
text-shadow: 0px 1px 1px #eee;
border: 1px solid rgb(50,55,61);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 4px;
color: #000;
font-size: 12px;
min-width: 78px;
}
Koden ovan i Safari.
Samma knappar i Firefox.
Börja redan nu
Att använda ny teknik är aldrig fel. Det enda man behöver tänka på är att om man använder sajten utan stöd för den nya tekniken så ska inget sluta fungera. Ett bra exempel är i kodsnutten ovan där även en läsare som inte förstår -webkit-gradient och -moz-linear-gradient får en enfärgad bakgrund. Ingen går miste om något, och de i framkant får en ytterligare bonus i utseendet.