1. Scroll-snap

Je navigeert door een webpagina en plotseling stopt het scrollen abrupt op een willekeurig deel van de pagina, zoals een afbeelding of een klap in het midden van een alinea. Dit komt omdat scrollen mist inherent precisie , iets dat ontwikkelaars al eeuwen proberen op te lossen met JavaScript.

Dat leidde echter niet altijd tot de beste resultaten, en JavaScript-bibliotheken voor carrousels, animaties en horizontale en verticale scroll-interacties verbruiken veel CPU-kracht. Met de CSS-eigenschap van het scroll-snap-type geef je JavaScript de kans! Deze nieuwe module vergrendelt de viewport van de gebruiker op het gewenste deel van jouw website of component nadat de gebruiker klaar is met scrollen. Het beste deel? Het effect is volledig gecontroleerd binnen CSS.

Wat is er zo cool aan?

Scroll-snapping biedt je een geweldige optie om overgangen te creëren en de aandacht van gebruikers te vestigen op de belangrijkste elementen van de webpagina terwijl ze scrollen. Dit effect, dat al zijn intrede heeft gedaan in mobiele apps, kun je nu ook op websites toepassen zonder dat je voor eventuele aanpassingen je toevlucht hoeft te nemen tot JavaScript. Je zult bereiken grotere precisie en een soepelere gebruikerservaring voor de eindgebruikers.

Hoe gebruik je het?

De eigenschap scroll-snap-* is vrij eenvoudig. CSS-scrollmodule heeft eigenschappen voor zowel de ouder als de container van een component. Je past eenvoudigweg het type scroll-klik toe op de container en waar de kinderen naartoe zullen klikken. 

De ouder- of containereigenschap bepaalt de richting van de scroll (x, y, blok, inline of beide) en het gedrag van de scroll-snap (striktheid geen, nabijheid of verplicht). De onderliggende eigenschap is scroll-snap-align om de elementen uit te lijnen wanneer de CSS-scroll-snap plaatsvindt.

2. Containerquery's

Probeer het bevatten jouw opwinding! Zie je wat we daar deden? CSS-containerquery's zijn eindelijk gearriveerd! Ze staan ​​al lang op het verlanglijstje van veel ontwikkelaars, en met goede reden. 

Mediaquery's zijn geweldig, maar ze zijn niet geschikt voor elk afzonderlijk scenario, aangezien ze alleen de viewport doorzoeken en geen rekening houden met de context van het element. Voor responsive design heb je dus voor elk onderdeel van de layout aparte mediaquery’s nodig, wat tot omslachtigere code leidt. Dit is waar containervragen binnenkomen! De mijlpaal die je dat eindelijk mogelijk maakt stijl een component op basis van de grootte van de bovenliggende container.

Wat is er zo cool aan?

Met containerquery's passen componenten zich aan hun context aan in plaats van aan het gezichtspunt. Deze aanpak is baanbrekend omdat je hetzelfde onderdeel op verschillende plaatsen kunt hergebruiken, waardoor je effectief creaties kunt maken componenten met een flexibele lay-out . Stel je een e-commercewebsite voor en je kunt één component gebruiken voor het productraster op de hoofdpagina en de rij ‘aanbevolen producten’ op elke productpagina.

Hoe gebruik je het?

Allereerst moet je een containertype of containereigenschap (afkorting voor containertype en containernaam) gebruiken om het element als een querycontainer te definiëren. Als de container klaar is, hoeft je alleen maar @container te gebruiken in plaats van @media-query's. Hierdoor worden alle stijlen aan de container gebonden.

3. Aangepaste CSS-eigenschappen

Leun achterover en geniet van het lezen. Deze nog steeds onderbenutte functie staat op het punt jouw leven een stuk eenvoudiger te maken! Aangepaste CSS-eigenschappen, vaak CSS-variabelen of trapsgewijze variabelen genoemd, zijn een zeer krachtige functie voor het bouwen van complexe apps of websites . Het geeft je ongelooflijke flexibiliteit en ontgrendelt interessante mogelijkheden. 

Websites worden steeds complexer met grote hoeveelheden CSS en veel waarden die op verschillende plaatsen worden herhaald. Neem bijvoorbeeld kleurthema’s. Als je een specifieke kleur moet vervangen die op talloze verschillende locaties wordt gebruikt, moet je een uitgebreide zoekopdracht uitvoeren. Met aangepaste eigenschappen kunt je variabelen (her)definiëren, waardoor dit een stuk eenvoudiger wordt onderhoud jouw CSS en bereik schonere stijlen .

Wat is er zo cool aan?

Niemand vindt het leuk om zichzelf te moeten herhalen. Met aangepaste eigenschappen kunt je eenvoudig één waarde bijwerken en deze op meerdere plaatsen laten weerspiegelen, waardoor herhaling in jouw CSS wordt vermeden. Aangepaste eigenschappen hebben een dynamisch bereik, wat betekent dat dit het geval is onderworpen aan overerving en cascade . Je kunt de waarde van een aangepaste eigenschap wijzigen via mediaquery's, met een pseudo-selector zoals hover of rechtstreeks via JavaScript. 

Er is ook het voordeel van semantische identificatiegegevens . --main-text-color is bijvoorbeeld veel gemakkelijker in één oogopslag te begrijpen dan #00ff00, vooral als deze kleur ook in andere contexten wordt gebruikt. 

Hoe gebruik je het?

Aangepaste eigenschappen gebruiken een voorvoegsel met een dubbel streepje. Om een ​​aangepaste eigenschap te definiëren, gebruikt je het dubbele streepje gevolgd door de naam die je heeft gekozen, bijvoorbeeld: - - hoofdtekstkleur. Vervolgens kunt je de CSS-functie var() gebruiken om de waarde van de eigenschap op te halen. 

4. CSS-rasterindeling

CSS heeft niet bepaald het beste trackrecord voor omgaan met complexe lay-outs . Hoewel dit in het begin waarschijnlijk geen groot probleem was, werd het een vrij algemene ergernis. Maar we hebben al een lange weg afgelegd, van op tabellen gebaseerde lay-outs tot het creatieve gebruik van positionering en floats. Tegenwoordig hebben we naast flexbox eindelijk ook toegang tot een rasterlay-out die de manier waarop je gebruikersinterfaces ontwerpt volledig zal veranderen!

CSS-rasterindeling biedt een flexibele en responsieve tweedimensionale rasterindeling dat maakt het eenvoudiger om complexere lay-outs te bouwen met kolommen en rijen.

Wat is er zo cool aan?

Een groot voordeel van CSS-rasters is dat ze zorgen voor: echte scheiding van lay-out en inhoud . De visuele volgorde van elementen op de pagina staat los van de volgorde van elementen in de opmaak (HTML-code). Dit betekent dat je de toegankelijkheid van de opmaak kunt optimaliseren, onafhankelijk van het visuele resultaat. Een wijziging aan de inhoud of de lay-out zal de andere niet beïnvloeden of verbreken. 

Het raster zelf is volledig gedefinieerd binnen CSS . Afgezien van het bovenliggende HTML-element waarop het raster wordt toegepast, is het niet nodig om aanvullende elementen voor de kolommen, rijen, cellen of gebieden te definiëren. Zo kunnen ontwerpers bijvoorbeeld experimenteren met nieuwe lay-outs met alleen CSS. Je hoeft de opmaak (HTML-code) niet te wijzigen om de positie van een item te wijzigen met behulp van het CSS-raster.  

Hier is nog een verbetering. In plaats van te moeten worstelen met (negatieve) marges en opvullingen, kun je de kloof eigendom ! Deze functie, die de ruimte tussen rijen (row-gap) en kolommen (kolom-gap) definieert, is niet alleen beschikbaar in CSS Grid Layouts, maar ook in combinatie met Flexbox.

Hoe gebruik je het?

Om een ​​raster te definiëren heeft je slechts één HTML-element nodig: de bovenliggende container van het raster. Dat is het element waarop de lay-out zal worden toegepast. Je kunt een rastercontainer maken via de weergave-eigenschap met de waarde grid of inline-grid. Vervolgens stelt je de kolom- en rijgroottes in met raster-sjabloon-kolommen en raster-sjabloon-rijen. Alle directe onderliggende elementen van rastercontainers worden rasteritems. Hun bronvolgorde doet er niet toe, je kunt eenvoudigweg media- of containerquery's gebruiken om jouw raster opnieuw in te delen.

5. CSS logische eigenschappen en waarden

Soms zijn het de kleine dingen die een groot verschil maken! Met CSS Logical Properties kunt je nu de lay-out bepalen logisch , in plaats van fysiek, richtingen en dimensietoewijzingen . 

Deze nieuwe sneltoetsen zijn handig voor randen, maar je kunt ook de logische trefwoorden inline en block, start en end in veel andere eigenschappen gebruiken. Bijvoorbeeld als je aan het creëren bent een website in meerdere talen en je moet rekening houden met schrijfmodi en tekstrichting.

Wat is er zo cool aan?

In plaats van dat je zich met elke fysieke richting afzonderlijk hoeft bezig te houden, kunt je het handige gebruiken steno geleverd door de logische CSS-eigenschappen om de marges, randen en opvullingen links en rechts, of boven- en ondermarges, efficiënt in te stellen. Zie het onderstaande voorbeeld. 

Deze snelkoppelingen zijn vooral erg handig als je aan het creëren bent een website in meerdere talen en je moet rekening houden met meerdere tekstrichtingen en/of schrijfmodi. Logische eigenschappen en waarden gebruiken termen om de richting te definiëren waarin ze stromen. Inline is de afmeting waarlangs een tekstregel wordt geschreven in de gebruikte schrijfwijze. Bijvoorbeeld in een Engels document is de tekst horizontaal van links naar rechts. In het Japans is de inline-afmeting echter verticaal omdat de schrijfmodus verticaal is. De blokdimensie weerspiegelt de volgorde van de blokken op de pagina. In het Engels zijn ze verticaal, terwijl ze in elke verticale schrijfmodus horizontaal worden uitgevoerd. 

Hoe gebruik je het?

Als je over links en rechts wilt praten, gebruik dan inline. Als je naar de boven- en onderkant wilt verwijzen, gebruik je block. 

Als je bijvoorbeeld hebt geprobeerd iets te centreren, zou je zoiets als dit kunnen hebben geschreven:

Op dezelfde manier stelt de eigenschap margin-block zowel margin-top als margin-bottom in. En deze functie is niet beperkt tot marges. Logische eigenschappen bieden vergelijkbare afkortingen voor het instellen van randen, opvulling, formaten, ... 

6. Beeldverhouding

De afmetingen van een element op een webpagina precies goed krijgen is altijd een grote zorg geweest voor ontwerpers en ontwikkelaars. Het is tenslotte heel belangrijk voor de gebruikerservaring. Maar telkens wanneer je de uiteindelijke breedte van het element aanpast, moet je ook de hoogte aanpassen. Het kan daarom een ​​frustrerende aangelegenheid zijn om te proberen een element er perfect uit te laten zien op verschillende apparaten. 

Met deze nieuwe CSS-eigenschap kunt je de beeldverhouding van een element instellen. Wanneer je de breedte van een element instelt, wordt de hoogte van het element automatisch berekend zodat deze overeenkomt met de opgegeven verhouding. De afmetingen worden vervolgens aangepast voor verschillende schermformaten, waarbij a responsief ontwerp op alle apparaten .

Wat is er zo cool aan?

De aspectratio-functie is vooral handig voor afbeeldingen, video's en iframes die moeten worden aangepast specifieke afmetingen zoals 1:1, 16:9, enz. Het bespaart je het gedoe van het instellen van een vaste breedte en hoogte van een element en het wijzigen ervan voor verschillende schermformaten voor responsieve lay-outs of het gebruik van omslachtige hacks om een ​​bepaalde verhouding af te dwingen. Het enige wat je hoeft te doen is een beeldverhouding instellen en de breedte of de hoogte (of zelfs geen) instellen. CSS verzorgt dan de berekening voor je.

Hier is een voorbeeld van wanneer het standaardgedrag van de beeldverhoudingsfunctie nuttig voor je is. Neem bijvoorbeeld een call to action die bestaat uit een onderdeel met tekst aan de ene kant en een afbeelding aan de andere kant. Als je een beeldverhouding op de afbeelding instelt, wordt de tekstkolom hoog genoeg om op zijn minst overeen te komen met de hoogte van de afbeelding. Als de tekst echter langer is, wordt de afbeelding groter zodat deze overeenkomt met de hoogte van de tekst.

Hoe gebruik je het?

Enkele voorbeeldverhoudingen:

• een verhouding van 1/2: de hoogte van het element is tweemaal de breedte van het element

• 16/9: de hoogte van het element is 9/16 maal de breedte van het element.

• 1/1: de hoogte van het element is gelijk aan de breedte van het element.

• U kunt ook zwevende getallen gebruiken. In plaats van breuk 1/2 kunt je 0,5 gebruiken.

7. CSS-cascadelagen

U heeft een nieuwe CSS-regel geschreven en je controleert jouw browser om te zien dat jouw stijlwijziging niet is doorgevoerd. Misschien is er een conflict met een andere CSS-regel die een hogere specificiteit heeft? Of heeft je misschien een bibliotheek van derden gebruikt met stijlregels die in strijd zijn met die van u? Om een ​​grote puinhoop (zoals het vervuilen van regels met !important's) te voorkomen in een poging de controle terug te krijgen, is er de nieuwe Cascade Layers-functie.

Met deze functie kunt je bepaalde CSS-stijlen overschrijven vermijd stijlconflicten. CSS maakt gebruik van selectorspecificiteit en volgorde van weergave om te beslissen welke stijlen op welk element worden toegepast. Stijlen met een hogere specificiteit kunnen ook stijlen met een lagere specificiteit overschrijven. Voor grotere projecten , is het bijna onmogelijk om alle stijldefinities bij te houden en dat zal onvermijdelijk tot conflicten leiden. CSS Cascade Layers is de ultieme oplossing om conflicten tussen meerdere stijlenbronnen op te lossen.

Wat is er zo cool aan?

Ongeacht hoe je CSS schrijft, je werkt nog steeds binnen de oorsprong van de auteur. Dat betekent dat je te maken hebt met specificiteit en volgorde van verschijnen als de bepalende factoren om de juiste stijl te bepalen die op een element moet worden toegepast. 

Door het gebruik van @layer bepaalt je hoe stijlen uit verschillende bronnen worden geëvalueerd en geprioriteerd. Dit betekent dat je daartoe in staat bent maak jouw eigen aangepaste CSS-lagen die de specificiteitshiërarchie van al jouw CSS-code bepalen, inclusief externe stijlen.

Hoe gebruik je het?

Maak jouw aangepaste lagen in de gewenste volgorde. Om een ​​laag te definiëren, gebruikt je het trefwoord @layer gevolgd door de naam van de laag. Plaats vervolgens al jouw CSS-code tussen accolades, {}. De lagen zijn allemaal volledig van elkaar gescheiden. 

Net als in Figma of Adobe Photoshop zal de laatst gedefinieerde laag of laagste laag in CSS de eerste zijn in de lijst met lagen in de visual en prioriteit hebben boven de andere lagen. Het wordt beschouwd als specifieker in de laaghiërarchie en alle stijlen in die laag zullen daarom stijlen uit de hogere lagen overschrijven, zelfs als een selector in de hogere laag een hogere specificiteit heeft.

Om CSS-code aan jouw lagen toe te voegen, kunt je dezelfde laag opnieuw definiëren met @layer. Dit heeft geen invloed op de volgorde van de lagen, aangezien de hiërarchie wordt gedefinieerd door de initiële code waarmee de lagen zijn gemaakt. Het enige verschil is dat je op deze manier extra stijlen aan een bepaalde laag kunt toevoegen.

8. CSS-kiezers - :is(), :where() & :has()

Wanneer je CSS schrijft, krijgt je vaak lange selectielijsten waarin je de HTML-elementen kunt selecteren die je wilt targeten met dezelfde stijlregels. Om te voorkomen dat alle combinaties als afzonderlijke selectors moeten worden geschreven, heeft CSS de nieuwe pseudo-klasse selectors :is(), :where() en :has() geïntroduceerd. Hierdoor wordt de lijst met selectors korter en kunt je dat doen verminder herhaling in jouw markup .

Wat is er zo cool aan?

Pseudo-klasse selectors zoals :is(), :where() en :has() selecteren elementen op basis van een specifieke status. :is() en :where() zijn handige nieuwe selectors waarmee je elementen in het midden, begin of einde van een selector kunt groeperen, het verbeteren van de leesbaarheid van jouw opmaak . Ze geven je ook de kracht om dat te doen specificiteit tenietdoen of vergroten. :has() daarentegen is een krachtige nieuwe selector waarmee je sommige elementen nauwkeuriger kunt matchen op basis van de onderliggende elementen, ook wel beschreven als de langverwachte bovenliggende selector.

:is() en :where()

:is() en :where() zijn vrijwel identiek in die zin dat ze controleren of het element op zijn positie in de buitenste selector overeenkomt met een van de selectors in zijn selectorlijst. Waar ze verschillen, is dat :is() de specificiteit van de meest specifieke selector aanneemt, terwijl de specificiteit van :where() altijd nul is, waardoor het gemakkelijker wordt om deze te overschrijven.

:heeft()

Met :has() wordt een element alleen geselecteerd als het ten minste één element bevat dat overeenkomt met de selector die je doorgeeft aan de functie :has(). a:has(img) selecteert bijvoorbeeld alle <a> elementen die een <img> kind bevatten. Het is in wezen een ouderkiezer, maar met enkele extra voordelen! 

Stel je bijvoorbeeld voor dat je alle <div>s kunt selecteren, maar alleen als ze een <p> bevatten. Of je kunt een afbeelding anders opmaken in een <figure>, afhankelijk van of deze vergezeld gaat van een <figcaption> of niet. De mogelijkheden zijn vrijwel eindeloos. 

Hoe gebruik je het?

9. CSS-gebruikersvoorkeuren

Het leveren van een eersteklas gebruikerservaring daar gaat het om! Deze opwindende CSS-functies maken het je gemakkelijker Houd rekening met verschillende gebruikersbehoeften en creëer een ervaring op maat. Sommige van deze functies zijn vooral belangrijk als het gaat om het verbeteren van de webtoegankelijkheid.

Websites met veel beweging zijn bijvoorbeeld niet altijd wenselijk! Het is belangrijk om te beseffen dat niet iedereen beweging op dezelfde manier ervaart. Sommige mensen hebben mogelijk een handicap of worden negatief beïnvloed. Voor hen kan beweging leiden tot migraine, misselijkheid, evenwichtsverlies of zelfs epileptische aanvallen. Websites met veel beweging kunnen de batterijduur van mobiele apparaten ook veel sneller leegmaken of meer data verbruiken. Het is daarom essentieel om altijd rekening te houden met gebruikersvoorkeuren.

Wat is er zo cool aan?

Heeft jouw gebruiker de neiging om aanraking te gebruiken in plaats van een muis? Zijn ze gevoelig voor animaties of geven ze de voorkeur aan een donker thema boven een licht thema? Een paar karakters code zijn voldoende om aan hun behoeften te voldoen en hun gebruikerservaring te verbeteren.

Geeft de voorkeur aan verminderde beweging

Deze mediaquery detecteert of deze gebruikers de verminderde bewegingsvoorkeur hebben geactiveerd om het aantal bewegingen en animaties te minimaliseren. De waarden bestaan ​​uit óf no-preference, wat betekent dat er geen bekende gebruikersvoorkeur is, óf reduce, wat betekent dat de gebruiker heeft aangegeven de voorkeur te geven aan een interface met minimale beweging. 

Geeft de voorkeur aan kleurenschema

Deze mediafunctie detecteert of een gebruiker een donker of licht kleurthema heeft aangevraagd. De gebruiker geeft zijn voorkeur aan via een besturingssysteeminstelling (bijvoorbeeld lichte of donkere modus) of een user-agentinstelling. De standaardwaarde is een licht kleurenthema.

Interactie

Interactie gaat over de manier waarop de gebruiker met de webpagina omgaat. Deze mediaquery detecteert de invoer die door de gebruiker wordt gebruikt, b.v. muis, pen, aanraking, … Je kunt een mediaquery instellen op basis van het aanwijsapparaat van een gebruiker en of deze over elementen op de pagina kan bewegen. 

Veelvoorkomende gebruiksscenario's voor interactiemediafuncties kunnen bijvoorbeeld het groter/kleiner maken van de bedieningselementen zijn, afhankelijk van of de gebruiker een touchscreen-apparaat heeft of een muis gebruikt. Of alleen een CSS-dropdownmenu gebruiken als de gebruiker een invoer heeft waarmee hij of zij over bepaalde elementen kan bewegen.

Hoe gebruik je het?

Een gebruikersgerichte ervaring voor de toekomst creëren

CSS bloeit en hoewel elk systeem onvermijdelijk zijn nadelen heeft, komen er voortdurend nieuwe ontwikkelingen bij die het leven van ontwikkelaars en ontwerpers aanzienlijk gemakkelijker maken. Met deze nieuwe functies kunt je schonere ontwerpen en efficiëntere code maken, terwijl je ook wordt aangemoedigd de flexibiliteit van het internet te omarmen en rekening te houden met het surfgedrag van gebruikers . 

Websites worden steeds complexer en gebruikers hebben een hele reeks apparaten tot hun beschikking om op internet te surfen. Kaders die enkele jaren geleden zijn bedacht, evolueren als reactie op de vele veranderingen die plaatsvinden. Het gaat er niet om of er iets gedaan kan worden. Het gaat erom dat je de tools begrijpt die je tot jouw beschikking heeft en dat je de gebruiker centraal stelt bij jouw ontwikkelingsbeslissingen .