De nieuwste CSS features van 2022
Ben jij op zoek naar de nieuwste CSS trends van 2022? Dan ben je bij ons aan het juiste adres. Onze front-end developers hebben voor jou de nieuwste CSS features op een rij gezet. Deze lijst zal in de toekomst worden aangevuld, dus houd ons vooral in de gaten.
Wat is CSS?
“Ja, wat is CSS eigenlijk en kun je het zelf toepassen?” Het lijkt voor de meeste mensen ingewikkelde materie en dat is het soms ook. De basis is makkelijk te begrijpen, maar om een website er aantrekkelijker uit te laten zien, is kennis en ervaring van belang. Daarom zorgen onze front-end developers ervoor dat ze kennis en ervaring opdoen en op de hoogte zijn van de laatste CSS features. Wellicht ben je al bekend met de programmeertaal CSS, maar we leggen het nog eens uit.
Om direct met de deur in huis te vallen: CSS, ofwel Cascading Style Sheet, is een programmeertaal die ervoor zorgt dat HTML bestanden betekenis krijgen door de opmaak en vormgeving. HTML bestanden vormen de basis van iedere webpagina zoals tekst, afbeeldingen en links.
Front-end developers zorgen ervoor dat de ‘voorkant’ van een website wordt vormgegeven. Denk hierbij aan kleuren, lettertypen, letter afstanden, letterdikte etc. Zij voegen bepaalde codes toe in een zogeheten CSS bestand. Deze vind je weer terug in het CMS van de website. En ziet er als volgt uit:
Top 3 nieuwste CSS features
Iedere dag worden er over de hele wereld nieuwe CSS features bedacht. Het is voor ons dan de uitdaging om de bruikbare features eruit te halen, want niet iedere CSS feature is geschikt om toe te passen op de websites van onze klanten.
De volgende CSS features zijn relatief makkelijk toepasbaar en behouden de gebruiksvriendelijkheid:
1. Container queries
Wanneer er een responsive webdesign wordt gemaakt, dan wordt er vaak gebruik gemaakt van de media query. Dit wordt meestal op basis van de viewport gedaan (gebruikersomgeving van de website) en maakt dat het niet altijd makkelijk aanpasbaar is, maar hier is nu een beter alternatief voor.
De container queries zijn een onderdeel van CSS 3 en laat de gebruikers makkelijk elementen opmaken op basis van de grootte van een container. Het is vergelijkbaar met een media query, maar met deze optie kun je zelf de grootte van een container bepalen en ben je dus niet afhankelijk van de gehele viewport.
2. CSS clip path
De CSS clip path tool maakt het mogelijk om complexe vormen (veelhoeken, cirkels, ellipsen enz.) te maken. Met de eigenschap clip path in CSS kun je een specifiek gebied binnen een element selecteren. Hetgeen wat geselecteerd is zal worden weergegeven. Het overige gedeelte wordt verborgen of afgeknipt.
Om het voor de gebruiker makkelijker te maken en het visueel vorm te geven, wordt er een clip path generator gebruikt. Maar je hebt de optie om het zo gek/complex te maken als je zelf wilt.
Deze tool wordt vaak gebruikt voor afbeeldingen, maar je kan het ook op andere elementen toepassen zoals bij paragrafen.
3. Content visibility
Content visibility is een nieuwe CSS-functie die websiteprestaties verbeterd. Het werkt in feite als een lazy loading (het vertraagd het inladen van afbeeldingen). Maar dan niet alleen voor afbeeldingen, maar voor elk HTML-element. Hiermee voorkom je dat de website pas zichtbaar wordt nadat alle elementen zijn geladen.
Het gebruik is ook makkelijk. Je kan het op ieder gewenst element toepassen met de volgende code:
.content-below {
content-visibility: auto;
}
Content-visibility heeft drie waarden. Standaard staat deze ingesteld op ‘zichtbaar’ en wordt dan ook automatisch weergegeven. Als alternatief kun je het instellen op ‘verborgen’ en zal dan niet worden weergegeven. Wanneer je kiest voor ‘automatisch’, dan worden elementen buiten het zichtbare gebied overgeslagen en vervolgens weergegeven zodra ze op het scherm verschijnen.
Daarnaast kan de wezenlijke grootte ook van groot belang zijn. Wanneer elementen staan ingesteld op ‘verborgen’, zijn ze in feite 0 wat betreft de grootte. Maar je kan de hoogte en breedte aanpassen op verborgen elementen, zodat de browser er direct rekening mee kan houden vanaf het moment dat een element wordt geladen. Op deze manier zorg je ervoor dat plotselinge lay-out wijzigingen tijdens het scrollen worden voorkomen.
