Artiklar

 

Publicerad 2011-11-09

Cascading Stylesheets 3

Cascading Style Sheets är en samling formateringsattribut som används för att ge egenskaper till HTML-element på en webbsida. Tillsammans med HTML så är CSS den moderna webbens viktigaste byggstenar och att förstå hur dessa fungerar och samspelar med varandra är grunden för att bygga och hantera webbplatser som möter modern webbstandard.

CSS har hängt med i webbens utveckling sedan 1990-talet och CSS 3 är den tredje utgåvan av standarden för CSS. Den nya versionen öppnar helt nya och förbättrade möjligheter när det handlar om att presentera HTML-baserat innehåll. Precis som HTML 5 så är CSS 3 en standard under utveckling där vissa delar kan användas redan nu och andra kommer att mogna fram. Flertalet av de största webbläsarna har redan nu utbyggt stöd för CSS 3.

Några av de nya egenskaperna

1) Runda hörn
Förutom att skapa rundade hörn på Html-element så har CSS 3 nya egenskaper för att skapa kanter på Html-elemenet.
Du är inte längre begränsad till linjer, streck och punkter utan med dessa nya egenskaper kan du enkelt skapa visuella gränssnitt utan att skriva så mycket kod.

2) Skuggor, genomskinlighet och toningar.
Andra egenskaper i CSS 3 är möjligheten att lägga till skuggor på såväl text som html-element samt att styra färger, toningar och genomskinlighet på samma element med:
HSL (Hue, Saturation och Lightness) eller
HSLA (med alpha-genomskinlighet) RGB och RGBA (med alpha)
Dessa egenskaper skapar helt nya dimensioner av presentation av Html-element.

3) Mediafrågor
En stor förändring i CSS 3 är användandet av s.k mediafrågor som låter dig anpassa ett html-dokument för en rad olika visningsmedia som skärmar, läsplattor och mobiler genom att använda mediastilmallar.

4) Animationer och övergångar
Ytterligare en kraftfull egenskap som lagts till CSS 3 är animationer och övergångar med CSS. Övergångar är stilar som styr förvandlingen av ett elements visuella visning och kan skalas, rotera, förändras och animeras både i 2D och 3D. Detta gör att vi inte längre behöver att förlita oss på JavaScript för dessa funktioner.

Skilja på CSS3 och HTML5

Som i fallet med Html 5 så gäller samma sak i CSS 3 att inte blanda ihop begrepp från två skilda kodspråk med varandra.
Då Html 5 används till att strukturera innehåll, navigation och layout- element så används CSS 3 till att styra utseende, placering och presentation av samma Html-dokument.

Stöd för CSS3

Av alla ledande webbläsare så är det bara de senaste versionerna som stöder huvuddelen av de nya CSS-egenskaper. Detta kan vara bra att tänka på innan du börjar använda de nya egenskaperna.

Ett utmärkt verktyg för att verifiera hur CSS 3-egenskaper fungerar i olika webbläsare är www.caniuse.com som listar webbläsarestöd för enskilda CSS-egenskaper. CSS 3 stöds i de senaste smartphone operativsystemen och gör smartphones till de visningsteknoliogier som har det bästa stödet för CSS 3 egenskaper.

Framtiden

CSS 3 tillför många och kraftfulla egenskaper till CSS-språket, något som medför att utvecklare och webbdesigners lättare kan skapa komplexa och sofistikerade layouter som använder sig av animationer, övergångar och dynamiska egenskaper som tills nu bara kunnat skapas med externa plug-in eller JavaScript. Precis som med Html 5 så kommer CSS 3 att spela en mycket större roll i webbprogramering än tidigare.

Resurser

Caniuse

Dela

Kommentarer

Flera artiklar

 

Design & layout

Html5

Cascading Stylesheets 3

Bildhantering

Blandat