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 ä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 funnits med i webbens utveckling sedan 1990-talet och CSS3 är den tredje utgåvan av standarden för CSS. CSS3 öppnar helt nya och förbättrade möjligheter när det handlar om att presentera HTML-baserat innehåll och kommer att spela en mycket större roll i webbprogramering än tidigare. Precis som HTML5 så är CSS3 en standard under utveckling där vissa delar kan användas redan idag och andra kommer att mogna fram över tid.

World Wide Web Consortium leder arbetet med den nya CSS3-specifikationen och för första gången i webbens historia verkar det som om både webbläsar-tillverkare och utvecklare kan enas om en gemensam webbstandard.

Några av de nya egenskaperna

1) Runda hörn
Förutom att skapa rundade hörn på Html-element så har CSS3 nya egenskaper för att skapa kanter på Html-elemenet. Du är inte längre begränsad till linjer, streck och punkter utan kan enklare skapa visuella gränssnitt utan att förlita dig på bildgrafik och omfattande koder.

2) Skuggor, genomskinlighet och toningar.
Andra egenskaper i CSS3 är möjligheten att lägga till skuggor på såväl text som andra HTML-element, samt att styra färger, toningar och genom-skinlighet 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 för presentation av Html-element.

3) MediaQueries
En stor förändring i CSS3 är användandet av s.k mediaqueries som låter dig anpassa ett HTML-dokument till en rad olika visningsmedia som skärmar, läsplattor och mobiler genom att använda mediastilmallar.

4) Animationer och Övergångar
Flera kraftfulla egenskaper som lagts till CSS3 är Animationer och Övergångar. Övergångar är stilar som styr förvandlingen av ett elements visuella visning och kan skalas, rotera, förflyttas 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.

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 dessa. Ett utmärkt verktyg för att verifiera hur CSS3-egenskaper fungerar i olika webbläsare är www.caniuse.com som listar webbläsarestöd för enskilda CSS3-egenskaper.

Framtiden

CSS3 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 Html5 så kommer CSS3 att spela en mycket större roll i webbprogramering än tidigare.

Resurser

Caniuse

Dela

Kommentarer

Flera artiklar

CSS 3

Html5

Creative Cloud

Design & layout

Bildhantering

Blandat