Annons:
Etikett03-html
Läst 3974 ggr
johan-ahlback
1/23/10, 1:46 AM

CSS3 - webbdesigners/programmerares våta dröm.

Bild 1. Klicka för att öppna i full storlek.

Rubriken kanske låter överdriven, men då har du ingen aning. CSS3 utlovar massor av nya attribut som får det att vattnas i munnen. Till exempel så kommer det finnas stöd för rundade kanter utan att använda bilder eller en massa krångliga fix. Det ser i alla fall bra ut på pappret, men frågan är hur bra stöd de olika webbläsarna kommer att ha.

Nytt i CSS3.

jag ska plocka ut det jag tycker är det roligaste i CSS3

Border Radius:
En sak de flesta längtar efter är att bestämma radie på borders. Utan att krångla med bilder eller andra fix och hack. Oftast vill man inte ha fyrkantiga lådor utan man vill ha rundade hörn som gör att sidan ser mjukare ut. Så det är en glad nyhet i CSS3. Du kan redan nu testa det i FireFox och safari 3. FireFox använder prefixet -moz- och safari 3 -webkit-. så här ställer du in det:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Box Shadow
ÄNTLIGEN! Var har den funktionen funnits förut? Det måste vara det jag saknat mest. hur många gånger har jag inte gjort hemsidor med en massa bilder bara för att få skuggor. Det sägs att det ska fungera i safari 3 och FireFox sedan 3.1. men jag är lite tveksam. Senaste versionen av FireFox stödjer det i alla fall. koden för FireFox ser ut så här: box-shadow: 10px 10px 5px #888.
det första pixel-värdet anger skuggans horisontala position ett positivt tal anger höger och ett negativt vänster. Det andra värdet är vertikal position där ett positivt värde ger en lägre skugga och ett negativt högre. det sista är hur luddig skuggan ska vara.

Flera bakgrundsbilder.
också en nyttig nyhet om man vill använda fler bilder i som bakgrund. det är bara safari 3 som har stöd för det just nu dock men det går rykten om att det ska finnas i FireFox tills nästa uppdatering. man kan alltid hoppas!

Word-wrap.
Inte en sådan jätte stor sak men ändå nyttig. man slipper att långa ord hamnar utanför ramarna på en box. Tacka Microsoft för den! De har haft stöd för det ett tag i sina webbläsare och nu har de tagit in det som standard i CSS3.

Attribut selektorer
Är detta döden för ? kanske inte men till en stor del. Nu kan du styla html element efter dess olika attribut. du kan till exempel Bestämma att alla p taggar med title "info" ska ha en grön bakgrund.

Flera kolumner
Här kommer en efterlängtad nyhet igen. Du kan bestämma hur många kolumner texten ska ha. just nu stödjer bara FireFox och safari 3 flera kolumner men ryktet säger att Internet explorer 9 kommer att ha stöd för det. om det inte kommer i en uppdatering till Internet explorer 8 innan dess med som ger stöd för det. Du kan prova det i FireFox respektive safari om du använder rätt prefix. -moz- är för FireFox och -webkit- för safari 3.
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

Fonter.
Det här finns Internet explorer sedan version 5. Du kan ange vilken font du vill och sen lägger man till fonten i CSS dokumentet. man kan använda TrueType (.ttf) eller OpenType (.otf). Detta gör att du slipper tänka på vilka fonts som finns som standard i datorn. Användbart!

CSS3 speech.
Det här är en av de största i min mening då jag eftersträvar total tillgänglighet på internet. När detta implementerats i webbläsare kommer man kunna ange hur viktig informationen är, hur högt det ska läsas, pitch och så vidare. Detta ska inte missbrukas och lekas med utan ska användas seriöst.

Så hur kommer stödet att vara för CSS3?

Jag ska inte lura er. Att skriva CSS för alla webbläsare kommer fortfarande att vara jobbigt. Microsoft håller på med en egen standard med CSS3 som grund. Mozilla och apple har lovat att följa standarden så mycket de kan utan att förstöra bakåtkompatibiliteten. Men jag tror att vi kan förvänta oss många nya funktioner som kommer att få oss att fundera på varför inte de fanns tidigare. Men det återstår att se

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Annons:
Upp till toppen
Annons: