Med @property kan man lage egendefinerte css-egenskaper med regler og verdier i ren CSS! På mange måter kan man si at det er nesten som CSS-variabler, bare at man kan begrense dem til visse verdier og regler.

@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 45deg;
}

I eksempelet har jeg laget to properties, en --color som har default-verdi satt til blue og sier at verdien må være av typen <color> , og en --height som har default-verdi satt til 80px og typen satt til <dimension> . Med typedefinisjoner menes at verdien ikke vil bli overskrevet hvis man for eksempel prøver å skrive en lengde på --color verdien. inherit er også satt til true som vil si at elementer som bruker disse egenskapene kan arve verdien fra forelderelementer.

I eksempelet over er første vil første element få fargen satt på body, da denne overskriver default-verdien, men den vil få default høyde. Andre element overskriver jeg både høyde og farge. På tredje element prøver jeg å overskrive høyden med en prosent. Siden typedefinisjonen min sier at høyden skal være lengder, så vil denne bli ignorert og elementet får default høyde. Fargen setter jeg til å være initial. Da får elementet default-fargen til regel og arver ikke fra body lenger.

Så nå har vi sett på hvordan @property kan vi oss typesikkerhet og fallback-verdi, men det er en tredje fordel med dette fremfor vanlige CSS variabler. Vanlige CSS variabler vil alltid bli tolket som en streng av nettleseren, men en @property er som vi vet typet, det vil si at vi kan bruke disse egenskapene som variabler i for eksempel gradienter, og vi kan til og med animere dem!

Denne regelen er fortsatt ganske ny, men skal være godt støttet siden juli 2024 og jeg tror den kommer til å bli mye brukt etterhvert.