Logga in
OBS! Se exempel på CSS-effekter och övrig CSS i menyn.
CSS (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. I praktiken har CSS använts till att formge dokument när det gäller färg, teckensnitt, justering av text och objekt mm. En enda CSS-mall kan styra tusentals dokument och det är då enkelt att ändra layouten genom att ändra formateringen i CSS-mallen.
CSS har tagit HTML ett steg längre och möjliggjort formateringar och effekter som inte tidigare fanns i HTML- standarden. Du kan tillämpa CSS med olika metoder och det är viktigt att du redan från början bestämmer dig för vilken metod som passar dig bäst. Läs mer om de olika metoderna i Läs om CSS grunder »
CSS finns specificerat i olika "nivåer" där CSS 1 (1996) innehåller information om relativt enkel formatering som bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS 2 (1998) går ett steg längre och ger möjlighet att formge hela dokument med positionerade rektangulära områden (div, boxar) som tidigare bara varit möjligt med tabeller (tables).
Nu gäller CSS 3 som idag inte har fullt stöd i alla webbläsare men ändå bör användas. Använd prefix för att öka chansen att det fungerar i fler webbläsare.
Håll dig uppdaterad om alla specifikationer i CSS genom att besöka W3C för mer information: CSS level 1 » - CSS level 2 » - CSS level 3 »
Innan CSS-specifikationen för en egenskap är helt klar kan tillverkarna av de olika webbläsarna ange att support ska finnas för det egna systemet genom att ange ett prefix till CSS-attributen. När specifikationen är helt klar kan tillverkaren bygga in stödet i nya versioner av webbläsaren och inget prefix behöver då längre användas.
Olika webbläsare använder olika prefix och ett exempel är runda hörn som kan anges så här:
Prefixen som anges är -moz (Mozilla Firefox), -webkit (Safari, iOS, Android) och -ms (Internet Explorer).
OBS! Om du använder prefix måste standard-värdet (default value) anges sist som i exemplet ovan.
Generellt gäller att för senare versioner av webbläsarna är specifikationen inbyggd och inget prefix behöver användas. Du behöver då bara ange koden nedan för runda hörn:
Du kan vilket stöd som finns hos de olika webbläsarna hos Can I use »
Stöd för Runda hörn visas på sidan CSS3 border radius »
Vad händer om du inte använder prefix? Det är ett fåtal användare som inte kommer att se den effekt eller layout du använder. Du måste själv avgöra om det är viktigt för din webbplats att CSS-formateringen fungerar och då använda prefix för att öka chansen. I vårt exempel med runda hörn kommer hörnen istället att ha vinkelräta hörn om inget stöd finns för specifikationen. Det kanske inte är en så stor förlust för användaren att inte se dina runda hörn eller skuggor att det är motiverat att använda prefix.
Prefix används under en övergångsperiod och ofta i onödan eftersom webbläsarna uppdateras hela tiden.
I exemplen i denna guide används inga prefix om detta inte särskilt anges vid exemplen.
skriv ut »