CSS-magie ontgrendelen: Een diepgaande duik in @property en aangepaste definitie van eigenschapstypen

CSS custom properties (ook bekend als CSS-variabelen) hebben een revolutie teweeggebracht in de manier waarop we CSS schrijven en onderhouden. Ze bieden herbruikbaarheid, flexibiliteit en onderhoudbaarheid, waardoor onze stylesheets dynamischer en beter beheersbaar worden. Tot voor kort ontbrak het custom properties echter aan de mogelijkheid om hun verwachte datatypes te definiëren, waardoor hun potentieel voor geavanceerde styling en animaties werd beperkt. Betreed de @property-regel – een game-changer waarmee we expliciet het type, de syntax en de beginwaarde van onze custom properties kunnen definiëren.

Wat is de @property-regel?

De @property-regel maakt deel uit van de CSS Houdini-familie van API's, die tot doel heeft de innerlijke werking van de CSS-engine aan ontwikkelaars bloot te leggen. In het bijzonder maakt @property deel uit van de Custom Properties and Values API. Hiermee kunt u een custom property registreren bij de browser, waarbij u het volgende specificeert:

• name: De naam van de custom property (bijv. --mijn-kleur).
• syntax: Het verwachte datatype van de property (bijv. <color>, <number>, <length>).
• inherits: Of de property zijn waarde moet overerven van het bovenliggende element (true of false).
• initial-value: De standaardwaarde van de property als er geen andere waarde is opgegeven.

Door deze kenmerken te definiëren, krijgt u meer controle over hoe custom properties worden gebruikt en hoe ze zich gedragen, met name in animaties en overgangen.

Waarom @property gebruiken? De voordelen

Het gebruik van @property biedt verschillende belangrijke voordelen:

1. Typeveiligheid en -validatie

Zonder @property behandelt CSS alle custom properties als strings. Dit kan leiden tot onverwacht gedrag wanneer u ze probeert te gebruiken in berekeningen of animaties die specifieke datatypes vereisen. Als u bijvoorbeeld wilt dat een custom property een getal voorstelt, maar u er per ongeluk een stringwaarde aan toewijst, kunnen uw animaties breken of onjuiste resultaten opleveren.

@property lost dit op door u in staat te stellen de verwachte syntax (datatype) van de custom property te specificeren. De browser valideert vervolgens de toegewezen waarde aan de hand van deze syntax en zorgt ervoor dat deze voldoet aan het verwachte type. Als de waarde niet overeenkomt met de syntax, gebruikt de browser de beginwaarde (indien aanwezig) of behandelt de property als ongeldig.

2. Naadloze animaties en overgangen

De echte kracht van @property komt tot uiting bij animaties en overgangen. Zonder deze functie kan het animeren van custom properties lastig zijn, omdat de browser niet weet hoe te interpoleren tussen verschillende waarden van een generieke string. Mogelijk moet u uw toevlucht nemen tot JavaScript-hacks of beperkte CSS-functies gebruiken om het gewenste effect te bereiken.

Door de syntax van een custom property te definiëren, vertelt u de browser hoe hij tussen de waarden ervan moet interpoleren tijdens animaties en overgangen. Als u bijvoorbeeld een custom property definieert met de <color> syntax, weet de browser dat hij tussen de kleuren moet interpoleren met behulp van een vloeiend kleurverloop. Op dezelfde manier, als u een property definieert met de <number> syntax, weet de browser dat hij tussen de getallen moet interpoleren met behulp van een lineaire progressie.

3. Verbeterde codeleesbaarheid en onderhoudbaarheid

@property verbetert de leesbaarheid en onderhoudbaarheid van uw CSS-code door duidelijk te maken welk datatype een custom property moet vertegenwoordigen. Dit helpt andere ontwikkelaars (en uw toekomstige zelf) het doel van de property en hoe deze moet worden gebruikt, te begrijpen.

Door bovendien expliciet de beginwaarde van een custom property te definiëren, biedt u een duidelijke terugvalwaarde die zal worden gebruikt als er geen andere waarde is opgegeven. Dit kan onverwachte visuele fouten voorkomen en uw code robuuster maken.

4. Verbeterde prestaties

In sommige gevallen kan het gebruik van @property de prestaties van uw CSS-code verbeteren. Door de browser meer informatie te geven over de verwachte datatypes van uw custom properties, kunt u het renderingproces optimaliseren. Dit kan leiden tot snellere animaties en overgangen, vooral bij complexe lay-outs.

De syntax van @property

De @property-regel wordt gedefinieerd met de volgende syntax:

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

              
                Copy
              
            
          

Laten we elk van deze componenten eens nader bekijken:

• --property-name: Dit is de naam van de custom property die u definieert. Het moet beginnen met twee koppeltekens (--) en kan alle geldige CSS-identificator-tekens bevatten. Bijvoorbeeld: --primary-color, --font-size, --spacing-unit.
• syntax: Dit specificeert het verwachte datatype van de custom property. Het wordt gedefinieerd met behulp van een CSS-waarde-type descriptor. Enkele veelvoorkomende syntaxwaarden zijn:
• <color>: Vertegenwoordigt een kleurwaarde (bijv. #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Vertegenwoordigt een numerieke waarde (bijv. 1, 3.14, -42).
• <length>: Vertegenwoordigt een lengtewaarde (bijv. 10px, 2em, 50vh, 1rem).
• <percentage>: Vertegenwoordigt een percentagewaarde (bijv. 50%, 100%, 25.5%).
• <string>: Vertegenwoordigt een stringwaarde (bijv. "Hallo", "Wereld").
• <image>: Vertegenwoordigt een afbeeldingwaarde (bijv. url("image.jpg"), linear-gradient(...)).
• <angle>: Vertegenwoordigt een hoekwaarde (bijv. 45deg, 0.5rad, 1turn).
• *: Vertegenwoordigt elke geldige CSS-waarde. Wees voorzichtig met het gebruik ervan, omdat het het doel van typecontrole tenietdoet.
• Aangepaste syntax: Hiermee kunt u complexe syntaxes definiëren met behulp van reguliere expressie-achtige patronen.
• inherits: Deze booleaanse waarde bepaalt of de custom property zijn waarde moet overerven van het bovenliggende element. Als deze is ingesteld op true, erft de property. Als deze is ingesteld op false, erft de property niet en gebruikt deze de beginwaarde als deze niet expliciet op het element is gedefinieerd. De standaardwaarde is false.
• initial-value: Dit specificeert de standaardwaarde van de custom property. Als de property niet expliciet op een element is ingesteld, gebruikt deze deze waarde. De beginwaarde moet een geldige waarde zijn volgens de opgegeven syntax. Als er geen beginwaarde is opgegeven en er geen andere waarde is ingesteld, wordt de property behandeld alsof deze de unset-waarde heeft.

Praktische voorbeelden van @property in actie

Laten we eens kijken naar enkele praktische voorbeelden van hoe u @property in uw CSS-code kunt gebruiken.

Voorbeeld 1: Een kleur animeren

In dit voorbeeld maken we een custom property met de naam --background-color en animeren we deze met behulp van CSS-overgangen. We definiëren de syntax als <color> om ervoor te zorgen dat de browser correct tussen de kleuren interpoleert.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* Wit */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blauw */
}
            

              
                Copy
              
            
          

In deze code:

• We definiëren een custom property --background-color met de syntax <color>, stellen inherits in op false en stellen de initial-value in op wit (#ffffff).
• We passen deze property toe op de background-color van een .box element met behulp van var(--background-color).
• We voegen een overgang toe aan de --background-color property zodat deze soepel animeert wanneer de waarde verandert.
• We veranderen de waarde van --background-color naar blauw (#007bff) bij hover, waardoor een soepel kleurveranderingseffect ontstaat.

Voorbeeld 2: Een getal animeren

In dit voorbeeld maken we een custom property met de naam --blur-radius en animeren we deze met behulp van CSS-overgangen. We definiëren de syntax als <length> om ervoor te zorgen dat de browser correct tussen de lengtewaarden interpoleert. Dit voorbeeld laat ook een populaire use-case zien van het gebruik van lengtes: pixelwaarden. Dit zou gemakkelijk ook naar andere eenheidstypen kunnen worden vertaald. Het is ook belangrijk op te merken dat het instellen van de beginwaarde op `0px` cruciaal is, omdat de browser een basiseenheid nodig heeft om overgangen correct uit te voeren.

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

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

In deze code:

• We definiëren een custom property --blur-radius met de syntax <length>, stellen inherits in op false en stellen de initial-value in op 0px.
• We passen deze property toe op de filter: blur() functie van een .image element met behulp van var(--blur-radius).
• We voegen een overgang toe aan de --blur-radius property zodat deze soepel animeert wanneer de waarde verandert.
• We veranderen de waarde van --blur-radius naar 5px bij hover, waardoor een soepel vervagingseffect ontstaat.

Voorbeeld 3: Een thema-UI maken met overgeërfde properties

In dit voorbeeld maken we een eenvoudige thema-UI met behulp van overgeërfde custom properties. We definiëren een custom property met de naam --theme-color en stellen deze in op het :root element. Hierdoor kunnen alle onderliggende elementen de themakleur overerven.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Groen */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Donkerder Groen */
}
            

              
                Copy
              
            
          

In deze code:

• We definiëren een custom property --theme-color met de syntax <color>, stellen inherits in op true en stellen de initial-value in op groen (#4caf50).
• We stellen de waarde van --theme-color in op het :root element, waardoor deze beschikbaar is voor alle elementen in het document.
• We gebruiken deze property om de background-color van een .button element in te stellen.
• We veranderen de waarde van --theme-color naar een donkerder groen (#388e3c) bij hover, wat aantoont hoe overgeërfde properties gemakkelijk kunnen worden bijgewerkt om het thema van de UI te veranderen.

Voorbeeld 4: Een aangepaste syntax definiëren

De syntax property kan ook een string accepteren om een specifieker patroon te definiëren, wat vooral handig is voor het valideren van complexere waarden. De syntax maakt gebruik van een reguliere expressie-achtig systeem, gedocumenteerd op MDN (Mozilla Developer Network). Dit voorbeeld illustreert hoe u een aangepaste syntax definieert en gebruikt voor een achtergrondpositie die zowel de keyword opties `top`, `bottom`, `left` als `right` als geldige waarden accepteert.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Geldige posities */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Ongeldige positie (valt terug op de beginwaarde) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Hier wordt de `syntax` gespecificeerd met behulp van een stringrepresentatie van de geldige keywords. De `[ ]` notatie definieert een reeks opties, het `|` symbool scheidt ze en `{1,2}` beperkt het aantal toegestane waarden tot één of twee keywords. Als een ongeldige waarde zoals `center` wordt gebruikt, keert de browser terug naar de `initial-value` van `top left`.

Browserondersteuning

Browserondersteuning voor @property is over het algemeen goed in moderne browsers, waaronder:

• Chrome (versie 64 en hoger)
• Edge (versie 79 en hoger - gebaseerd op Chromium)
• Firefox (versie 72 en hoger)
• Safari (versie 14.1 en hoger)

Het is echter altijd een goed idee om de meest recente browsercompatibiliteitstabellen te controleren op websites zoals Can I use... om er zeker van te zijn dat de functies die u gebruikt, worden ondersteund in de browsers die uw gebruikers waarschijnlijk gebruiken.

Voor oudere browsers die @property niet ondersteunen, negeert de browser de @property-regel en behandelt de custom property gewoon als een gewone CSS-variabele. Dit betekent dat animaties en overgangen mogelijk niet werken zoals verwacht, maar de code zal nog steeds functioneel zijn.

Best practices voor het gebruik van @property

Hier zijn enkele best practices om in gedachten te houden bij het gebruik van @property:

• Definieer altijd de syntax: Zorg ervoor dat u altijd de syntax van uw custom properties definieert om typeveiligheid te garanderen en naadloze animaties en overgangen mogelijk te maken.
• Stel een beginwaarde in: Geef een initial-value op om een standaardwaarde te bieden en onverwachte visuele fouten te voorkomen.
• Gebruik beschrijvende namen: Kies beschrijvende namen voor uw custom properties die duidelijk hun doel en datatype aangeven. Gebruik bijvoorbeeld --button-background-color in plaats van --color.
• Overweeg overerving: Bepaal of uw custom properties moeten overerven van hun bovenliggende elementen of niet. Gebruik inherits: true voor properties die moeten worden gedeeld over de UI, zoals themakleuren of lettergroottes.
• Test grondig: Test uw code in verschillende browsers om er zeker van te zijn dat deze werkt zoals verwacht. Gebruik terugvalmechanismen voor oudere browsers die @property niet ondersteunen.
• Documenteer uw custom properties: Voeg opmerkingen toe aan uw CSS-code om het doel en het gebruik van uw custom properties uit te leggen. Dit maakt het voor andere ontwikkelaars (en uw toekomstige zelf) gemakkelijker om uw code te begrijpen. Tools zoals Stylelint kunnen ook worden geconfigureerd om deze best practices af te dwingen.

@property en CSS Houdini

Zoals eerder vermeld, maakt @property deel uit van de CSS Houdini-familie van API's. CSS Houdini is een verzameling low-level API's die de innerlijke werking van de CSS-engine aan ontwikkelaars blootleggen, waardoor ze CSS kunnen uitbreiden met aangepaste functies en gedragingen.

Andere Houdini API's zijn onder meer:

• Paint API: Hiermee kunt u aangepaste achtergrondafbeeldingen, randen en maskers definiëren met behulp van JavaScript.
• Animation Worklet API: Hiermee kunt u hoogwaardige animaties maken met behulp van JavaScript.
• Layout API: Hiermee kunt u aangepaste lay-outalgoritmen definiëren voor elementen, zoals gridsystemen of metselwerk lay-outs.
• Parser API: Hiermee kunt u CSS-code parseren en manipuleren met behulp van JavaScript.

Door @property te combineren met andere Houdini API's, kunt u echt krachtige en aanpasbare CSS-oplossingen creëren.

Conclusie

De @property-regel is een krachtige toevoeging aan CSS waarmee u aangepaste propertytypen kunt definiëren, waardoor geavanceerde styling, animaties en overgangen mogelijk zijn. Door @property te gebruiken, kunt u de typeveiligheid, leesbaarheid, onderhoudbaarheid en prestaties van uw CSS-code verbeteren.

Hoewel browserondersteuning over het algemeen goed is, is het belangrijk om uw code in verschillende browsers te testen en terugvalmechanismen te bieden voor oudere browsers die @property niet ondersteunen.

Door de best practices te volgen die in dit artikel worden beschreven, kunt u de kracht van @property benutten om echt geweldige webervaringen te creëren.

Verdere Verkenning

• MDN Web Docs: @property
• Houdini.how: Een gids voor CSS Houdini
• Can I use @property