CSS onder de knie krijgen: Aangepaste eigenschappen registreren met @property

Aangepaste eigenschappen (ook bekend als CSS-variabelen) hebben een revolutie teweeggebracht in de manier waarop we CSS schrijven en onderhouden. Ze stellen ons in staat herbruikbare waarden te definiëren, waardoor onze stylesheets flexibeler en beter te onderhouden zijn. Maar wat als je verder zou kunnen gaan dan alleen het definiëren van waarden? Wat als je het type waarde dat een aangepaste eigenschap bevat, samen met de initiële waarde en het overervingsgedrag, zou kunnen definiëren? Dat is waar @property om de hoek komt kijken.

Wat is @property?

@property is een CSS at-rule waarmee je een aangepaste eigenschap expliciet bij de browser kunt registreren. Dit registratieproces geeft de browser informatie over het verwachte type van de eigenschap, de initiële waarde en of deze moet overerven van het bovenliggende element. Dit ontgrendelt verschillende geavanceerde mogelijkheden, waaronder:

• Typecontrole: Zorgt ervoor dat de aangepaste eigenschap een waarde van het juiste type krijgt toegewezen.
• Animatie: Maakt vloeiende overgangen en animaties mogelijk voor aangepaste eigenschappen van specifieke typen, zoals getallen of kleuren.
• Standaardwaarden: Biedt een terugvalwaarde als de aangepaste eigenschap niet expliciet is gedefinieerd.
• Overervingscontrole: Bepaalt of de aangepaste eigenschap zijn waarde overerft van het bovenliggende element.

Zie het als het toevoegen van typeveiligheid aan je CSS-variabelen. Het stelt je in staat robuustere en voorspelbaardere stylesheets te creëren.

De syntaxis van @property

De @property-regel volgt deze basis syntaxis:

@property --property-name {
  syntax: '<value-syntax>';
  inherits: true | false;
  initial-value: <value>;
}

Laten we elk onderdeel uitsplitsen:

• --property-name: De naam van de aangepaste eigenschap die je wilt registreren. Deze moet beginnen met twee koppeltekens (--).
• syntax: Definieert het verwachte type waarde voor de eigenschap. Dit is cruciaal voor typecontrole en animatie. We zullen de beschikbare syntax-waarden hieronder gedetailleerd verkennen.
• inherits: Een booleaanse waarde die aangeeft of de eigenschap moet overerven van het bovenliggende element. Standaard false indien niet gespecificeerd.
• initial-value: De standaardwaarde voor de eigenschap als deze niet expliciet op een element is ingesteld. Dit zorgt ervoor dat er altijd een terugvalwaarde beschikbaar is.

De syntax descriptor begrijpen

De syntax descriptor is het belangrijkste onderdeel van de @property-regel. Het vertelt de browser welk type waarde te verwachten voor de aangepaste eigenschap. Hier zijn enkele veelvoorkomende syntax-waarden:

• *: Staat elke waarde toe. Dit is de meest permissieve syntaxis en bootst in wezen het gedrag van een standaard CSS-variabele na zonder registratie. Gebruik dit spaarzaam.
• <length>: Verwacht een lengtewaarde (bijv. 10px, 2em, 50%). Dit maakt vloeiende animaties tussen verschillende lengtewaarden mogelijk.
• <number>: Verwacht een numerieke waarde (bijv. 1, 3.14, -5). Nuttig voor het animeren van numerieke eigenschappen zoals dekking of schaal.
• <percentage>: Verwacht een percentagewaarde (bijv. 25%, 100%).
• <color>: Verwacht een kleurwaarde (bijv. #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Maakt vloeiende kleurovergangen en animaties mogelijk.
• <image>: Verwacht een afbeeldingswaarde (bijv. url(image.jpg), linear-gradient(...)).
• <integer>: Verwacht een geheel getal (bijv. 1, -10, 0).
• <angle>: Verwacht een hoekwaarde (bijv. 45deg, 0.5rad, 200grad). Nuttig voor het animeren van rotaties.
• <time>: Verwacht een tijdwaarde (bijv. 1s, 500ms). Nuttig voor het regelen van animatieduur of vertragingen via aangepaste eigenschappen.
• <resolution>: Verwacht een resolutiewaarde (bijv. 300dpi, 96dpi).
• <transform-list>: Verwacht een lijst van transformatiefuncties (bijv. translateX(10px) rotate(45deg)). Maakt het animeren van complexe transformaties mogelijk.
• <custom-ident>: Verwacht een aangepaste identificatie (een string). Vergelijkbaar met een enum.
• <string>: Verwacht een stringwaarde (bijv. "Hello World"). Wees voorzichtig hiermee, aangezien het animeren van strings over het algemeen niet wordt ondersteund.
• Aangepaste Syntaxis: Je kunt complexere syntaxis creëren door combinaties van het bovenstaande en de operators | (of), `[]` (groeperen), `+` (één of meer), `*` (nul of meer), en `?` (nul of één) te gebruiken. Bijvoorbeeld: <length> | <percentage> staat een lengte- of een percentagewaarde toe.

Het kiezen van de juiste syntax is essentieel om de volledige kracht van @property te benutten.

Praktische voorbeelden van @property

Laten we kijken naar enkele praktische voorbeelden van hoe je @property in je CSS kunt gebruiken.

Voorbeeld 1: Een achtergrondkleur animeren

Stel dat je de achtergrondkleur van een knop wilt animeren. Je kunt @property gebruiken om een aangepaste eigenschap voor de achtergrondkleur te registreren en deze vervolgens te animeren met CSS-transities.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Rood */
}

In dit voorbeeld registreren we de aangepaste eigenschap --bg-color met de <color> syntaxis, wat betekent dat het een kleurwaarde verwacht. De initial-value is ingesteld op wit (#fff). Wanneer over de knop wordt gehoverd, verandert de --bg-color naar rood (#f00), en de transitie animeert vloeiend de verandering van de achtergrondkleur.

Voorbeeld 2: Randradius beheren met een getal

Je kunt @property gebruiken om de randradius van een element te beheren en te animeren.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

Hier registreren we --border-radius als een <length>, wat ervoor zorgt dat het lengtewaarden accepteert zoals px, em, of %. De initiële waarde is 0px. Bij het hoveren over de .rounded-box, animeert de randradius naar 20px.

Voorbeeld 3: Een schaduwverschuiving animeren

Stel dat je de horizontale verschuiving van een box-shadow wilt animeren.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

In dit geval is --shadow-offset-x geregistreerd als een <length>, en de initiële waarde is 0px. De box-shadow-eigenschap gebruikt deze aangepaste eigenschap voor zijn horizontale verschuiving. Bij hover animeert de verschuiving naar 10px.

Voorbeeld 4: Gebruik van <custom-ident> voor theming

De <custom-ident> syntaxis stelt je in staat om een set van vooraf gedefinieerde stringwaarden te definiëren, waardoor je effectief een enum creëert voor je CSS-variabelen. Dit is nuttig voor theming of het controleren van verschillende statussen.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Standaard Thema */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

Hier is --theme geregistreerd met de <custom-ident> syntaxis. Hoewel we de toegestane identifiers niet expliciet in de @property-regel zelf vermelden, impliceert de code dat het `light` en `dark` zijn. De CSS gebruikt vervolgens conditionele logica (var(--theme) == light ? ... : ...) om verschillende stijlen toe te passen op basis van het huidige thema. Het toevoegen van de klasse `dark-theme` aan een element zal het thema naar donker schakelen. Merk op dat conditionele logica met var() geen standaard CSS is en vaak preprocessors of JavaScript vereist. Een meer standaard benadering zou het gebruik van CSS-klassen en cascading zijn:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript om het thema te schakelen */
/* document.body.setAttribute('data-theme', 'dark'); */

In dit herziene voorbeeld gebruiken we een data-theme attribuut op het body-element om het thema te beheren. JavaScript (uitgecommentarieerd) zou worden gebruikt om het attribuut tussen `light` en `dark` te schakelen. Dit is een robuustere en standaardbenadering voor theming met CSS-variabelen.

Voordelen van het gebruik van @property

Het gebruik van @property biedt verschillende voordelen:

• Verbeterde leesbaarheid en onderhoudbaarheid van code: Door expliciet het verwachte type waarde voor een aangepaste eigenschap te definiëren, maak je je code beter begrijpbaar en minder foutgevoelig.
• Verbeterde animatiemogelijkheden: @property maakt vloeiende overgangen en animaties mogelijk voor aangepaste eigenschappen, wat nieuwe mogelijkheden opent voor het creëren van dynamische en boeiende gebruikersinterfaces.
• Betere prestaties: Browsers kunnen de rendering van elementen die geregistreerde aangepaste eigenschappen gebruiken optimaliseren, wat leidt tot verbeterde prestaties.
• Typeveiligheid: De browser valideert dat de toegewezen waarde overeenkomt met de gedeclareerde syntaxis, waardoor onverwacht gedrag wordt voorkomen en debuggen eenvoudiger wordt. Dit is vooral nuttig in grote projecten waar veel ontwikkelaars bijdragen aan de codebase.
• Standaardwaarden: Ervoor zorgen dat een aangepaste eigenschap altijd een geldige waarde heeft, zelfs als deze niet expliciet is ingesteld, voorkomt fouten en verbetert de robuustheid van je CSS.

Browsercompatibiliteit

Eind 2023 heeft @property goede, maar geen universele, browserondersteuning. Het wordt ondersteund in de meeste moderne browsers, waaronder Chrome, Firefox, Safari en Edge. Echter, oudere browsers ondersteunen het mogelijk niet. Controleer altijd de meest recente informatie over browsercompatibiliteit op websites zoals Can I use... voordat je @property in productie gebruikt.

Om oudere browsers af te handelen, kun je feature queries (@supports) gebruiken om fallback-stijlen te bieden:

@supports (--property: value) {
  /* Stijlen die @property gebruiken */
}

@supports not (--property: value) {
  /* Fallback-stijlen voor browsers die @property niet ondersteunen */
}

Vervang --property en value door een daadwerkelijke aangepaste eigenschap en de bijbehorende waarde.

Wanneer gebruik je @property?

Overweeg het gebruik van @property in de volgende scenario's:

• Wanneer je aangepaste eigenschappen moet animeren: Dit is de primaire gebruikssituatie voor @property. Het registreren van de eigenschap met de juiste syntaxis maakt vloeiende animaties mogelijk.
• Wanneer je typeveiligheid voor aangepaste eigenschappen wilt afdwingen: Als je ervoor wilt zorgen dat een aangepaste eigenschap altijd een waarde van een specifiek type bevat, gebruik dan @property om deze te registreren.
• Wanneer je een standaardwaarde wilt bieden voor een aangepaste eigenschap: De initial-value descriptor stelt je in staat een terugvalwaarde op te geven.
• In grote projecten: @property verbetert de onderhoudbaarheid van code en voorkomt fouten, waardoor het bijzonder nuttig is voor grote projecten met veel ontwikkelaars.
• Bij het maken van herbruikbare componenten of ontwerpsystemen: @property kan helpen consistentie en voorspelbaarheid in je componenten te waarborgen.

Veelvoorkomende fouten om te vermijden

• De syntax descriptor vergeten: Zonder de syntax descriptor weet de browser niet welk type waarde wordt verwacht en zullen animaties niet correct werken.
• De verkeerde syntax waarde gebruiken: Het kiezen van de verkeerde syntaxis kan leiden tot onverwacht gedrag. Zorg ervoor dat je de syntaxis selecteert die nauwkeurig het verwachte type waarde weergeeft.
• Geen initial-value opgeven: Zonder een initiële waarde kan de aangepaste eigenschap ongedefinieerd zijn, wat tot fouten leidt. Geef altijd een zinvolle standaardwaarde op.
• Overmatig gebruik van * als syntaxis: Hoewel handig, tenietdoet het gebruik van * de voordelen van typecontrole en animatie. Gebruik het alleen wanneer je echt elk type waarde wilt toestaan.
• Browsercompatibiliteit negeren: Controleer altijd de browsercompatibiliteit en zorg voor fallback-stijlen voor oudere browsers.

@property en CSS Houdini

@property is onderdeel van een grotere set API's genaamd CSS Houdini. Houdini stelt ontwikkelaars in staat om in de rendering-engine van de browser te duiken, waardoor ze ongekende controle krijgen over het styling- en lay-outproces. Andere Houdini API's zijn onder andere:

• Paint API: Hiermee kun je aangepaste achtergrondafbeeldingen en randen definiëren.
• Animation Worklet API: Biedt een manier om hoogwaardige animaties te creëren die direct in de compositor-thread van de browser worden uitgevoerd.
• Layout API: Maakt het mogelijk om aangepaste lay-outalgoritmen te definiëren.
• Parser API: Biedt toegang tot de CSS-parser van de browser.

@property is een relatief eenvoudige Houdini API om te leren, maar het opent de deur naar het verkennen van meer geavanceerde Houdini-functies.

Conclusie

@property is een krachtige CSS at-rule die geavanceerde mogelijkheden ontgrendelt voor aangepaste eigenschappen. Door aangepaste eigenschappen te registreren bij de browser, kun je typeveiligheid afdwingen, vloeiende animaties mogelijk maken en de algehele robuustheid van je CSS-code verbeteren. Hoewel de browserondersteuning niet universeel is, maken de voordelen van het gebruik van @property, vooral in grote projecten en ontwerpsystemen, het een waardevol hulpmiddel voor moderne webontwikkeling. Omarm @property en til je CSS-vaardigheden naar een hoger niveau!