Nieuwe CSS features waarvan je nog niet vanaf weet

Gebruik van variabelen

Voor het maken van variabelen van bijvoorbeeld een font-family of kleuren om een bepaalde titel te stylen gebruikte je waarschijnlijk voorheen SASS of LESS. Dit is namelijk handig voor het gebruik van CSS die je dan niet dubbel hoeft te schrijven of hoeft aan te passen. Tegenwoordig is dit in CSS mogelijk door het gebruik van :root. Zie onderstaand voorbeeld;

:root {
     --global--color-primary: #82c341;
}

a {
     color: var(--global--color-primary);
}

.social-icons a {
     background: var(--global--color-primary);
}

Wanneer je een kleur wilt aanpassen hoef je dit maar op 1 plek te doen binnen je CSS! Let op de dubbele streep ‘--’ dit maakt het een custom property.

Content-visibility

Content-visibility is een nieuwe feature in CSS wat ongeveer hetzelfde werkt als Lazyloading voor afbeeldingen, dit betekent dat je elementen in de pagina pas rendert wanneer de gebruiker gescrold heeft tot dit punt. Dat betekent dat je alles onder de vouw op content-visibility: auto kan zetten. Dit zal voor de performance van je website mooie optimalisaties opleveren.

Hierbij is het belangrijk om een tweede waarde mee te geven en dat is contain-intrinsic-size, hiermee geef je de grootte mee van het object zodat deze ruimte wel is gereserveerd voor het element dat pas gaat inladen wanneer dit zich in de viewport bevindt. Dit om layout shifts te voorkomen, dat betekent dat er in de layout van de pagina dingen gaan verschuiven doordat er elementen later inladen, dit kan de user experience weer verslechten.

Browser ondersteuning

Voor al deze nieuwe features binnen CSS is het niet altijd zeker of elke browser dit ook al ondersteunt, daarom wil je altijd kijken of de ervaring van de applicatie in een andere browser wel hetzelfde is. Dit kan heel goed op de volgende website; https://caniuse.com Soms betekent dat, dat je beter andere CSS kan gebruiken die elke browser ondersteunt.

Mocht je nou toch wel CSS willen invoeren voor een bepaalde browser, dan kun je gebruik maken van @supports. Hiermee kun je een check doen binnen CSS of de browser een CSS functie ondersteunt.

Zo kun je bijvoorbeeld het volgende doen voor het gebruik van CSS variabelen;

@supports(--css: variables) {
     a {
          color: var(--global--color-primary);
     }
}

Hiermee check je dus of de browser CSS variabelen ondersteunt, anders zul je de kleur alsnog moeten aanroepen zonder een variabelen voor browser die het niet ondersteunen.