Nieuwe CSS features waarvan je nog niet vanaf weet header image

Nieuwe CSS features waarvan je nog niet vanaf weet

zondag 9 januari 2022 ·Leestijd: 2 minuten
contacteer auteur:

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.


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º