Bruk av CSS3

Bakgrunn

Epinova lanserte ny hjemmeside på EPiServer CMS6 23. mars 2010. 50 dager før lanseringen startet vi med daglige blogg innlegg om hvordan vi gjennomførte prosjektet:

• markedsstrategi for internett, brukskvalitet og innhold for web
• hjemmesiden i forhold til andre kommunikasjonskanaler og sosiale medier
• teknisk implementering i publiseringsløsningen EPiServer

Trinn 32: Bruk av CSS3

Websider som sendes til nettleser består gjerne av tre deler:

• HTML eller XHTML for å angi struktur på siden, f.eks. avsnitt og overskrifter
• JavaScript for å håndtere interaksjoner, animasjoner og annen "live" respons
• Cascading Style Sheets for å definere utseende

CSS forteller nettleseren hvordan elementer på siden skal se ut:

• blokker av innhold, plassering og marger på disse
• typografi, skrifttype, størrelse og formattering
• bakgrunnsfarger, forgrunnsfarger, ornamentering

… og mye mer.

Selv om CSS har vært tilgjengelig som avklart teknologistandard siden 1996 har det tatt lang tid å få nettlesere til å følge standarder. Enten har det vært manglende støtte for definisjonene, eller de har vært fulle av feil.

CSS2 ble sluttført i 1998 og har de seneste årene hatt brukbar støtte av mange nettlesere.

CSS3 er fortsatt under utvikling. Deler er avsluttet og delvis implentert i noen nettlesere. Her er det mange nyheter, noen av dem har vi valgt å teste ut i vårt prosjekt. Det gir spennende muligheter for mer smidig web design i årene som kommer.

Runde hjørner

CSS3 gjør det mulig å lage runde hjørner uten ekstra arbeid. Ulempen er at f.eks. IE ikke støtter dette ennå. For oss er dette et fin måte å vise frem at et design kan fungerer fint på ulike måter og at det ikke alltid er nødvendig å bruke ekstra ressurser på at alt nødvendigvis skal se helt likt ut i alle nettlesere. Vi ønsker å bruker teknologien så langt den er kommet. De ulike nettleserne vil støtte ulike elementer fremover, men det betyr ikke at vi ikke kan bruke det. Vi gleder oss til å høre responsen nettopp på dette med runde hjørner. 

Nedlastbare fonter i CSS3

En stor begrensning for mange web designere har vært svært få skrifttyper å spille på. Når alle nettets brukere må ha samme skrifttyper installert i systemet på datamaskinen gir det store begrensninger. Den store utbredelsen til Microsofts nettleser Internet Explorer har sikret at skrifttyper fra Microsoft har blitt de facto standard. Til nå har dette vært de mest utbredte skriftypene:

• Times eller Times New Roman
• Helvetica eller Arial
• Verdana, Trebuchet, Georgia, Lucida (inkludert i IE og Office-pakken fra Microsofty)

Med CSS3 får vi helt nye muligheter. Her kan det angis en @font-face med tilhørende lenke til standardisert TrueType-fil for nedlasting og implementering i nettleser. Dermed blir det mulig å definere helt nye skrifttyper i designet.

Underlig nok er en forgrunnsfiguren til CSS internasjonalt en norsk teknologidirektør i Opera, Håkon Wium Lie, se en av hans glimrende artikler om skrifttyper i CSS3.