IN DEZE HANDLEIDING:
CSS Custom Properties variabelen root
CSS Custom Properties of CSS Aangepaste Eigenschappen (aka variabelen) staan je toe een eigenschap eenmalig te definiëren en op veel plaatsen te gebruiken. Dit is heel handig zonet noodzakelijk voor het beheer van je WordPress website als je een groot (extern) CSS bestand hebt.
Een grote frustratie bij het werken met CSS is dat je vaak een eigenschap moet declareren in meerdere verschillende regels, maar dat je wilt dat het hetzelfde blijft. Dat kan een lettertype familie zijn, of een kleur, of een marge, of een breedte, of iets anders. En elke keer dat je een update moet maken van die lettertype familie, of kleur, of wat dan ook, moet je een update maken van elke instantie van die eigenschap, wat een deur openzet voor een hoop fouten.
Om dit probleem te omzeilen, hebben preprocessors zoals Sass variabelen geïntroduceerd. Je declareert de waarde eenmalig in een variabele, en dan roep je die variabele later gewoon aan. Als je dan de waarde wilt veranderen, verander je die in de variabele, en de verandering verspreidt zich door de rest van het CSS stylesheet.
Nu, we hebben dezelfde functionaliteit in pure CSS, alleen heet het niet “CSS Variabelen”, het heet “CSS Aangepaste Eigenschappen”. Maar het is precies hetzelfde.
Het is vrij eenvoudig: je declareert een nieuwe aangepaste eigenschap door het een naam te geven, streepje, streepje, en dan welke naam je maar wilt, en dan zet je welke waarde je maar wilt in die aangepaste eigenschap, ernaast net als een gewone eigenschap. Als je dan de aangepaste eigenschap wil gebruiken, roep je ze aan met “var” en dan roep je gewoon de naam op die je tussen haakjes verklaarde.
Voorbeeld variabelen en root
:root {
/* Kleurenpalet */
--primary: #007bff;
--success: #28a745;
--warning: #ffc107;
--white: #f9f9f9;
--light-grey: #d8d8d8;
/* Borders */
/* It is possible to use an already declared variable within the definition of another variable */
--border-primary: 1px solid var(--primary);
--border-success: 1px solid var(--success);
--border-warning: 1px solid var(--warning);
}
/* Container */
.container-1 {
/* The var() function replaces itself with the value of the variable */
border: var(--border-primary);
color: var(--primary);
background-color: var(--white);
}
.container-2 {
/* The var() function replaces itself with the value of the variable */
border: var(--border-success);
color: var(--success);
background-color: var(--white);
}
.container-3 {
/* The var() function replaces itself with the value of the variable */
border: var(--border-warning);
color: var(--warning);
background-color: var(--white);
}
Browsers en variabelen
Dit werkt in alle moderne browsers. Telkens wanneer een moderne browser dit ziet, zal hij de aanroep naar de aangepaste eigenschap vervangen door een waarde in de aangepaste eigenschap. Dit werkt echter niet in sommige oudere browsers. Oudere browsers zullen dit zien en gewoon aannemen dat er niets is. Het zal geen foutmelding geven, het zal het gewoon niet begrijpen en gewoon verder gaan. Dat betekent dat als je aangepaste eigenschappen wilt gebruiken en je wilt oudere browsers ondersteunen, je moet zorgen voor een fallback.
De manier waarop we dat doen is door exact dezelfde eigenschap direct erboven te declareren. Dus in dit geval, achtergrondkleur, en dan de werkelijke waarde in te voeren. Dus de eerste kleurwaarde hier, dat is de hex waarde. Dit introduceert een beetje een wegversperring voor een van de coole eigenschappen van aangepaste eigenschappen, namelijk nesting en scoping, maar als je nu achterwaartse compatibiliteit wilt hebben, moet je deze fallbacks voorzien, wat klinkt als veel werk, nietwaar? Je moet het eerst een custom property verklaren en dan moet je ook nog de hard-coded waarde invoeren.
Beperkingen CSS Aangepaste Eigenschappen
Het beperkt wel wat je kunt doen. Je kunt geen scoping en nesting doen, maar je kunt nog steeds aangepaste eigenschappen gebruiken om te doen wat je wilt. Deze aangepaste eigenschappen worden gebruikt in de verschillende stylesheets. Je kunt een voorbeeld zien in het Typografie deel. Er is een color custom property, de font family, de font size, en de line height. In _custom-properties.css, zijn er nog een heleboel andere aangepaste eigenschappen gedeclareerd. Het idee hier is, dat in plaats van door de hele stapel stylesheets te gaan en waarden te veranderen telkens als je iets wilt veranderen, je ze gewoon hier verandert of nieuwe aangepaste eigenschappen toevoegt in dit bestand, en dan gebruik je de aangepaste eigenschappen waar ze ook voorkomen voor consistentie in het hele thema.
Voorbeeld CSS Root en Aangepaste Eigenschappen
Om een lang verhaal kort te maken is dit wat je nodig hebt voor in de root van je CSS:
:root {
--arthur-kleur-0: #0170B9;
--arthur-kleur-1: #3a3a3a;
--arthur-kleur-2: #444444;
--arthur-kleur-3: #4B4F58;
--arthur-kleur-4: #F5F5F5;
--arthur-kleur-5: #FFFFFF;
--arthur-kleur-6: #F2F5F7;
--arthur-kleur-7: #424242;
--arthur-kleur-8: #000000;
}
H2 {color: var(--arthur-kleur-0);}
H3 {color: var(--arthur-kleur-1);}
p {color: var(--arthur-kleur-2);}Variabelen root voor responsive design
Variabelen zijn ook handig voor in de root voor responsive design
De oude manier
Dit alles zou mogelijk zijn zonder CSS Variabelen. Maar het zou een onnodige hoeveelheid code vereisen, omdat de meeste van de bovenstaande punten hun eigen selector binnen de media query nodig zouden hebben, zoals dit:
@media all and (max-width: 450px) {
De nieuwe manier
Laten we nu eens kijken hoe dit kan worden opgelost met CSS Variabelen. Om te beginnen slaan we de waarden die we hergebruiken of veranderen liever op in variabelen:
Als we dit eenmaal hebben ingesteld, kunnen we eenvoudig de waarden van de variabelen in de media query veranderen:
Dit is veel netter dan wat we eerst hadden. We richten ons alleen op de :root, in plaats van alle selectors te specificeren. We hebben onze media query teruggebracht van vier selectors naar één en van dertien regels naar vier.
Ondersteuning van CSS Variabelen in Sass
CSS is al jaren mijn favoriete taal om te schrijven tijdens het ontwikkelen van een WordPress website. De dag dat ik Sass leerde kennen was ik er meteen door afgeschrikt. Ik dacht bij mezelf: “Waarom zou ik het mezelf in hemelsnaam moeilijker maken bij het ontwikkelen van een website. Ik heb al genoeg aan mijn hoofd…”
Van buitenaf gezien zag ik Sass als een geavanceerde taal die zowel nutteloze complexiteit als geestdodende configuraties aan mijn projecten toevoegde. Ik had er geen idee van dat de taal die ik zo moeilijk vond, me tijd en hoofdpijn zou besparen en mijn workflow zou verbeteren.
De realiteit is dat Sass (en andere CSS preprocessors) een zeer krachtige vriend kan zijn voor elke ontwerper of ontwikkelaar die minder wil schrijven en meer wil doen. Uiteindelijk worden al deze preprocessing talen gecompileerd tot CSS. Dus, als je gewoon niet van het idee houdt om een preprocessing taal te gebruiken, dan is er nog steeds niets aan de hand.
Ik kan niet zeggen dat ik de Sass scene echt bijgehouden heb. Voor persoonlijke projecten ben ik in principe gestopt met het te gebruiken waar ik maar kan. Het schrijven van gewone CSS bestanden is veel vriendelijker op de lange termijn, omdat ik over twee jaar terug kan komen naar een project en geen build tools etc. hoef aan te raken en mijn CSS nog steeds werkt.
Echter, voor grotere projecten kan ik de noodzaak begrijpen en ik gebruik nog steeds Sass voor een paar werk-gerelateerde projecten.
Meer handleidingen en links over Aangepaste Eigenschappen en root
https://blog.jim-nielsen.com/2019/generating-shades-of-color-using-css-variables/
https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/