UTVIKLING

Regne ut verdier direkte i stilsettet

Kan prøves i en testversjon av Firefox 4.

Harald BrombachHarald BrombachNyhetsleder
7. sep. 2010 - 08:06

Det tredje nivået av Cascading Style Sheets, CSS level 3 eller CSS3, er fortsatt under utvikling og vil bestå av flere moduler. Blant disse modulene er CSS3 Values and Units, som nylig ble utgitt i et nytt utkast.

Modulen beskriver ulike eksisterende og nye verdier og enheter som CSS-egenskaper aksepterer.

Blant nyhetene som modulen foreslår er muligheten til å beregne verdier i CSS ved hjelp av aritmetiske uttrykk. Modulen har dog vært under utvikling siden i alle fall 2001.

Disse operasjonene kan brukes hvor verdiene det regnes med er av typen lengde, frekvens, vinkel, tid eller antall.

Det er visse regler for hvilke enheter som kan brukes sammen. For eksempel kan man ikke multiplisere to lengder med hverandre. Men samtidig er et mulig å bruke flere ulike enheter for samme type verdi i et regnestykke.

Mozilla er etter det digi.no kjenner til først ut med å annonsere støtte for CSS-funksjonen calc(). Offisiell støtte planlegges i Firefox 4, men er nå tilgjengelig for testing i nattlige testbygg av nettleseren. Operasjonene som så langt støttes, er +, -, *, /, min og max, samt parenteser.

Foreløpig er støtten for calc-funksjonen lagt inn med et eget prefiks for Mozilla (-moz). Dette er vanlig for eksperimentell CSS-støtte.

I det eksemplet nedenfor er bredden på et element satt ved å legge samme flere ulike verdier, inkludert prosentandel oppgitt som en brøk.

I det andre eksempelet defineres to tilstøtende div-elementer, hvor det ene skal dekke 75 prosent av bredden. Det andre skal i utgangspunktet dekke resten, altså 25 prosent, men det første elementet er i tillegg utstyrt med en høyremarg på 1 em. I opplysningene om bredden til det andre div-elementet tas det hensyn til dette, ved at margbredden trekkes fra, slik at bredden på dette blir 25% - 1em.

I dette blogginnlegget skriver Mozillas David Baron om i hvilke CSS-egenskaper som støtter eller vil støtte calc-funksjonen, i tillegg til min() og max(). Noe av støtten vil ikke komme på plass før tidligst i Firefox 4 beta 6.

Les mer om:
Del
Kommentarer:
Du kan kommentere under fullt navn eller med kallenavn. Bruk BankID for automatisk oppretting av brukerkonto.