Snart er det bare én moderne nettleser som ikke støtter CSS Custom Properties, også kjent som CSS-variabler. (Bilde: W3C, montasje: digi.no)

CSS Custom Properties

Mindre CSS-kluss med variabler

Støttes snart av nesten alle moderne nettlesere.

Stilsettspråket som brukes til å beskrive hvordan HTML-dokumentene på weben skal presenteres, Cascading Style Sheets (CSS), har blitt nærmest allestedsnærværende på websider siden det ble designet av Håkon Wium Lie og Bert Bos for over 21 år siden. I dag er det knapt noe større nettsted som ikke bruker CSS.

Men selv om CSS har blitt betydelig videreutviklet siden 1994, så er det behov som ennå ikke dekkes. Derfor har det kommet språk som Sass og Less, som gjør det mulig å lage stilsett som inkluderer mekanismer som variabler og funksjoner, som deretter kompileres til CSS.

CSS-variabler

Allerede for snart tre år siden skrev digi.no om planer for om å utvide CSS ved å gi det støtte for variabler. I mange stilsett går de samme verdiene igjen i flere ulike regler. For eksempel kan det være ønskelig å ha den samme fargen på ulike typer elementer.

Men dersom man senere skal erstatte fargen med en ny, kan man ikke uten videre gjøre dette bare ved å endre én eneste verdi. Man må derfor ofte endre verdiene til mange ulike regler i stilsettet for å oppnå det samme. Faren for å gjøre feil vokser med størrelsen på stilsettet.

Nevnte Sass og Less løser dette. Men CSS-variablene, som offisielt kalles for CSS Custom Properties, har en ekstra fordel, nemlig at variabelverdiene kan settes ved hjelp av JavaScript, etter at websiden og stilsettet har blitt lastet.

Bred støtte

Eksempelkode CSS Custom Properties/CSS-variabler.
Med CSS Custom Properties kan man i et stilsett definere variabler som kan leses av andre CSS-regler ved å bruke var()-funksjonen. Bilde: Google

Google kunngjorde nylig at støtte for CSS Custom Properties er blant nyhetene som kommer i Chrome 49. Det betyr trolig støtte i en kommende utgave av Opera.

Men Chrome vil langt fra være først med slik støtte. Ifølge Google fikk Firefox støtte for dette i versjon 42, Safari for OS X i versjon 9.1 og i Safari for iOS 9.3.

Dette betyr at det snart bare er Microsofts nettlesere som ikke støtter CSS Custom Properties. Microsoft vurderer dog om det skal bygges inn støtte for CSS Custom Properties i Edge.

Til toppen