CSS3 - mine favoritter

Hva er CSS3

CSS, eller Cascading Style Sheet, er et språk som brukes til å beskrive utseende til websider. Dette innebærer alt fra tekstformattering til layout av siden. Generelt sett skriver man selve innholdet (teksten) i et annet språk, HTML, og bruker så CSS til å endre på hvordan innholdet skal presenteres (hvor menyen er, hva som skal ha runde hjørner, marginer, skriftstørrelser osv.)

CSS3 er den nyeste versjonen av dette språket, og gir webutviklere mer fleksibilitet til utforming av websider.

Hva er nytt i CSS3?

Her kommer en liste med de endringene jeg liker best til nå. Har du en eldre nettleser (Internet Explorer versjon 8 eller lavere) vil ikke mine eksempler vises, men det kan du fort endre på !

Runde hjørner ( border-radius )

Dette er en liten endring som vil spare verden for mye tid. Runde hjørner har selvsagt alltid vært mulig i webverden, men ikke like enkelt som nå. Tidligere var det vanlig å lage 4 bilder av hvert hjørne, og enten legge det i hjørnene av en tabell med 9 celler, eller å gjøre det slik .

Slik gjør man det med CSS3:

<div id="erna" />

#erna {
  background-color: #aaa;
  border-radius: 20px;
  width: 200px;
  height: 200px;
}

Skygger ( box-shadow )

Som med de runde hjørnene, er dette også en "komfortendring" for webutviklere. Det har blitt latterlig enkelt å legge til skygger i et element:

<div id="darkwing_duck" />

#darkwing_duck {
  width: 200px; height: 200px;
  border-radius: 10px;
  background-color: #eee;
  box-shadow: 5px 5px 20px #444;
}

Gjennomsiktighet ( opacity )

Denne funksjonen har jeg brukt i flere år uten å være klar over at det er en del av CSS3 spesifikasjonen - den har tydligvis vært støttet i lang tid. Den brukes ofte til å gi en ekstra effekt når man tar musa over et element, slik som følgende eksempel:

<img id="madcat" src="cat.jpg" />

#madcat:hover {
  opacity: 0.6;
}

Webfonter ( font-face )

Tidligere har det vært få valgmuligheter når det gjelder fonter på web. Problemet er at forskjellige nettlesere og operativsystemer har tilgang på forskjellige fonter, så for å være sikker på at sidene skal se likt ut overalt er utvalget lite .

Dette endret seg i CSS3 med font-face, som gir oss muligheten til å bruke helt vilkårlige fonter ved å la brukerene laste de ned først.

<p id="proverb"> ... </p>

@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  src: local('Sacramento'),
       url(Sacramento.woff)
       format('woff');
}

#proverb {
  font-family: Sacramento;
}

"Multiple Columns" ( column-* )

I CSS3 har vi nå muligheten til å dele opp tekst i flere kolonner, på samme måte som i aviser. OBS! Fungerer ikke i Internet Explorer!

<p id="quote"> ... </p>

#quote {
  column-count: 3;
  column-gap: 3;
}

Animasjoner ( animation , transition )

Vi har nå fått to nye metoder for å animere HTML-elementer på: animate og transition . Begge to brukes til å visualisere endringer av CSS-attributter som top , background-color eller font-size. Hovedforskjellen er at du med transition bare kan animere endringer fra et startpunkt til et sluttpunkt (f.eks. fra top: 0px; til top: 50px; ), ofte brukt i kombinasjon med :hover, mens du med animate kan ha flere steg imellom, noe som gir deg større fleksibilitet.

En annen forskjell er at animate kan loope, noe som demonstreres under; monsteret animeres vha. transition som stopper opp når den når endepunktet sitt (hjørnet nede til høyre), mens teksten animeres med animate . OBS! Fungerer ikke i Internet Exlorer.

<div id="wrapper">
  <img src="discotime.png" id="monster" />
  <p id="discotime">Discotime!</p>
</div>

#wrapper {
  position: relative;
}

#monster {
  transition: transform 2s 0s, left 2s 0s, top 2s 0s;
  position: absolute;
}

#wrapper:hover #monster {
  transform: rotateZ(3600deg);
  top: 200px;
  left: 200px;
}

#discotime {
  display: none;
  position: absolute;
}

@keyframes discotime {
    0% { top: 50px; left: 50px; font-size: 40px; color: red;
         background-color: yellow; }
   20% { top: 260px; left: 180px; font-size: 50px; color: gray;
         background-color: blue; }
   40% { top: 180px; left: 240px; font-size: 60px; color: blue;
         background-color: green; }
   60% { top: 240px; left: 120px; font-size: 60px; color: green;
         background-color: gray; }
   80% { top: 80px; left: 180px; font-size: 50px; color: gray;
         background-color: red; }
  100% { top: 50px; left: 50px; font-size: 40px; color: red;
         background-color: yellow; }
}

#wrapper:hover #discotime {
  animation: discotime 1s infinite;
  display: block;
}

Discotime!

Kan vi bruke CSS3 nå ?

Svaret er: Ja - men ikke alt i CSS3. Som man kan se på denne listen , er en stor del av CSS3 uten nettleserstøtte per dags dato - særlig for Internet Explorer.

Det er også slik at man må bruke prefiksene "-webkit-", "-moz-", "-o-" og "-ms-" foran visse CSS3 attributter for å støtte alle nettleserene, noe som gjør det mer tungvindt å bruke. Grunnen til dette er at nettleserene ønsker å signalisere at implementasjonen fortsatt er eksperimentell, så dette vil bli bedre med tiden.

Men som alltid når det gjelder layout, er det ikke superviktig at alt ser helt identisk ut i alle nettlesere. Jeg legger gjerne på goodies (som runde hjørner eller skygger) for de nettleserene som støtter dette, så lenge det ser bra ut uten òg.