8 State-of-the-art CSS-functies (en hoe ze ze gebruiken)

CSS is voortdurend evoluerend en er is een groot aantal spannende nieuwe functies toegevoegd om de specificatie een nog krachtiger wapen in de toolset van een webontwerper te maken.

CSS-raster neemt lay-outs naar nieuwe niveaus die niet eerder worden gezien, aangepaste eigenschappen introduceren het concept van variabelen terwijl de functiequery's controleren op browserondersteuning. Media-query's verplaatsen een niveau met nieuwe toegankelijkheidseigenschappen, variabele lettertypen bieden maximale creativiteit met minimale code terwijl scroll-hapjes de noodzaak van JavaScript elimineert. Bekijk ons ​​cool CSS-animatie voorbeelden om te zien wat u kunt maken. Of, om een ​​site te bouwen zonder code, probeer deze Website-bouwers ​

Voor degenen die creatief willen worden, zijn er CSS-vormen voor unieke lay-outs en een groot aantal mix-modi en filters om Photoshop-stijlontwerpeffecten te introduceren. Lees verder om erachter te komen hoe u deze must-try-functies kunt gebruiken in uw nieuwste builds. Maar vergeet niet, een complexe website betekent dat je een hebt web hosting Service die uw behoeften kan ondersteunen.

01. Aangepaste eigenschappen

Als u een preprocessor zoals Sass gebruikt, of inderdaad een programmeertaal zoals JavaScript, zult u ongetwijfeld bekend zijn met het concept van variabelen - waarden die zijn gedefinieerd voor hergebruik in uw code. Aangepaste eigenschappen stellen ons in staat dit te doen in onze CSS, zonder de behoefte aan preprocessors. Variabelen kunnen worden ingesteld op het: rootniveau (het maken van globale variabelen) of scoped in een selector. Ze kunnen dan worden genoemd met behulp van de syntaxis Var (-> - MyVariablename). Bijvoorbeeld kunnen we een variabele hebben genoemd --primaire kleur zoals dit:

 / * op het root-element (een wereldwijd
variabele) * /
: Root {
- -PrimaryColor: # F45942;
​
/ * Scoped naar een selector * /
.my-component {
- -primaryColor: # 4171F4;
} 

Nu kunnen we die variabele gebruiken als een eigenschapswaarde:

 H1 {
Kleur: Var (- -primaryColor);
} 

Aangepaste eigenschappen worden geërfd, wat een aantal zeer nuttige implicaties heeft. Een van die is thema. Neem het bovenstaande voorbeeld: we kunnen een globale variabele definiëren (# F45942 - een fel sinaasappel rood) voor --primaire kleur Op het rootniveau, dus elke instantie waar we deze variabele gebruiken, is de waarde rood. Maar we herdefiniëren ook dezelfde variabele binnen een selector, met een andere waarde (# 4171F4 - Medium Blue). Dus voor elk geval waar we de --primaire kleur Variabele binnen die selector is de berekende waarde blauw.

Standaardinstellingen instellen

De scoping van variabelen is een geweldige functie, maar een die je bij gelegenheid zou kunnen ophalen! Als u een variabele probeert te gebruiken die nog niet is gedefinieerd, valt de resulterende waarde terug naar de browserstandaard of een erfelijke waarde, in plaats van een variabele die verder de Cascade heeft gedefinieerd. In sommige gevallen kan het passend zijn om een ​​standaardwaarde in te stellen:

 H1 {
Kleur: Var (- -primaryColor, Blauw);
} 

Hoe verschillen aangepaste eigenschappen van PreProcessor-variabelen?

Aangepaste eigenschappen verschillen op een paar belangrijke manieren van preprocessor. Preprocessor-variabelen worden samengesteld voordat uw code naar de browser wordt verzonden. De browser ziet nooit dat een waarde een variabele is, het ziet alleen het eindresultaat. Aangepaste eigenschappen worden berekend in de browser. U kunt ze in de moderne ontwikkelaarstools inspecteren, de variabele wijzigen en de opgeloste waarde bekijken. Het zijn dynamische variabelen, wat betekent dat hun waarden binnen CSS kunnen worden gewijzigd, of bij runtime met JavaScript.

In tegenstelling tot preprocessor-variabelen kunnen aangepaste eigenschappen niet worden gebruikt binnen selectornamen, eigendomssleutels of mediacy-query-aangiften - alleen CSS-onroerendgoedwaarden. CSS-preprocessors hebben nog steeds tal van voordelen, dus we zullen waarschijnlijk een tijdje lang zien plakken, maar ze zullen waarschijnlijk vaker worden gebruikt in combinatie met aangepaste eigenschappen.

02. Feature-query's

Feature-query's zijn een manier om te testen of een browser een bepaalde CSS-eigenschapswaarde-combinatie in uw CSS-bestand ondersteunt. Ze verwijderen vrijwel de behoefte aan functie-detectiebibliotheken zoals Modernizr. De syntaxis is vergelijkbaar met een mediaquery: u gebruikt de inleiding @supports , gevolgd door uw eigendom-waardepaar, inpakken van de code die moet worden uitgevoerd als de browser voldoet aan de opgegeven voorwaarden.

Feature-query's worden goed ondersteund in moderne browsers, maar ze zijn relatief nieuw en één "GOTCHA" is dat sommige browsers die u misschien wilt testen voor ondersteuning, mogelijk geen ondersteuning van functiequery's zelf. Vaak is de beste manier om dit te verwerken is om fallback-stijlen eerst (buiten de functie-query) te bieden, en vervolgens uw verbeteringen wikkelen voor het ondersteunen van browsers in de @supports regel.

Houd er rekening mee dat de functiequery's alleen spaarzaam moeten worden gebruikt. Een van de geweldige functies van CSS is dat browsers gewoon eventuele eigenschappen of waarden zullen negeren die ze niet begrijpen. Het is het beste om alleen functiequery's te gebruiken wanneer dit niet doet, zou een visuele bug veroorzaken, anders zou je jezelf kunnen instellen voor veel extra werk.

Gebruik van functiequery's

Te testen voor ondersteuning van een waarde van één eigenschap, kunnen we eerst de fallback leveren. In dit voorbeeld leveren we een Flexbox-fallback voor browsers die geen rasterindeling ondersteunen.

 .My-component {
Weergave: raster;
​
@supports (display: raster) {
.my-component {
Display: Flex;
​
} 

03. Mediaquery's

U zult waarschijnlijk gewend zijn aan het gebruik van media-query's om de breedte en hoogte van de viewport te detecteren en het type media (meestal scherm of afdrukken). Het niveau 5 Media Query's Specification brengt ons een aantal nieuwere mediacefuncties op (optioneel) test voor, die al in sommige browsers zijn ondersteund. Deze bieden enkele grote voordelen voor toegankelijkheid.

Gebruikers met vestibulaire aandoeningen, en degenen die lijden aan bewegingsziekte, kunnen webpagina's niet waarderen met veel beweging, zoals animaties en parallax-scroll-effecten. Met behulp van de Prefers-lagere Motion Media-query kunnen we gebruikers verstrekken die zich afmelden met een gereduceerd alternatief.

 .my-element {
Animatie: Shake 500ms Ease-In-OUT 5;
​
@Media (geeft de voorkeur aan gereduceerde beweging: verminderen) {
.my-element {
Animatie: Geen;
​
} 

Het wordt steeds populairder voor websites om een ​​alternatief donker thema te bieden. Prefers-colors-schema stelt ons in staat om te vragen of de gebruiker een systeembrede voorkeur heeft ingesteld (met behulp van de trefwoorden Donker, Licht of No-Preferention) en de juiste kleurenschema dienovereenkomstig tonen.

 / * Media query's 02 * /
lichaam {
Achtergrond: lineair -gradiënt (aan
bodem, # b5faff, # ffe2b4);
​
@media (preferen-kleuren-schema: donker) {
lichaam {
kleur wit;
Achtergrond: lineair -gradiënt (aan
onderkant, # 0c1338, # 3E3599);
​
} 

04. Variabele lettertypen

In het algemeen, als we een aantal verschillende lettertypenvlakken van dezelfde familie op onze webpagina willen opnemen, moeten we hetzelfde aantal lettertypenbestanden laden. Hoe meer lettertype bestanden u laadt, hoe meer gewicht u aan uw pagina toevoegt, met een impact op de prestaties - dus het is meestal verstandig om maximaal drie of vier lettertypenbestanden te laden (afhankelijk van uw prestatiebudget).

Variabele lettertypen veranderen die allemaal. Ze stellen ons in staat om een ​​enkel lettertype-bestand te laden voor een heel lettertype-familie. Hoewel dit bestand meestal groter is dan een enkel lettertype, zou, als u wilt profiteren van verschillende gewichten en stijlen, dan is een variabele lettertype de meer performante oplossing. Als je een hele lettertype hebt gekocht, vergeet dan niet om het veilig in te stappen cloud opslag Dus je verliest je bestanden niet!

Variatieas

Niet alleen dat, maar met variabele lettertypen, we zijn niet beperkt tot een kleine subset van doopvontgewichten. Bij het werken met regelmatige lettertypen worden de beschikbare lettertypengewichten gegeven in veelvouden van 100. Meestal kan 400 het normale gewicht zijn, 300 het lichtgewicht en 700 het gewaagde gewicht - met verschillende gezinnen die meer gewichten of minder leveren. Variabele lettertypen hebben een variatieas, die ons een reeks waarden voor eigenschappen zoals het doopvontgewicht biedt. Een lettertype kan een as van 1-900 hebben, wat ons toegang zou geven tot 900 verschillende gewichten!

De variatieas is niet alleen beperkt tot gewicht. Variabele lettertypen kunnen verschillende assen hebben voor x-hoogte, schuin, seriflengte en contrast (om slechts een paar voorbeelden te kiezen) - wat betekent dat een enkel lettertype-bestand ons toegang kan geven tot honderden, of zelfs duizenden variaties! We kunnen zelfs deze eigenschappen animeren, waardoor we een aantal echt coole effecten kunnen bereiken. Mandy Michael ( https://codepen.io/mandymichael ) heeft een hele lading creatieve demo's die de limieten echt testen.

Browserondersteuning voor variabele lettertypen is redelijk goed, en vele lettertypegebiedingen ontwikkelen actief nieuwe variabele lettertypen die u nu kunt gebruiken - hoewel deze vaak bij een premie komen, vooral voor de meer volledig uitgeruste lettertypengezinnen. Als je gewoon begint te beginnen met spelen met variabele lettertypen om te zien wat ze kunnen doen, zijn er een aantal variabele lettertypespeeltuinplaatsen:

Houd er rekening mee dat u nu een variabele lettertypen wilt gebruiken, nu moet u ervoor zorgen dat u een up-to-date besturingssysteem gebruikt - ze zullen niet werken aan oudere OSS.

Font-variatie-instellingen

Terwijl we het doopvontgewicht gemakkelijk genoeg kunnen veranderen met de lettertype dikte CSS-eigendom, Font-variatie-instellingen is een nieuw eigenschap dat ons volledige toegang geeft tot de verschillende variatie van een lettertype. Deze omvatten zowel geregistreerde assen als aangepaste assen.

Geregistreerde assen

Er zijn vijf verschillende geregistreerde assen, die overeenkomen met verschillende CSS-eigenschappen. Elk van deze heeft wat bekend staat als een "Axis-tag". De geregistreerde assen zijn: WHT (lettertype dikte), wdth (Font-rek), SLNT (lettertype-stijl: schuine / hoek), ital (Font-Style: Italic), OPSZ (Font-optical-sizing). We hebben toegang tot deze assen, hetzij door de CSS-onroerend goed, of met Font-variatie-instellingen ​

Deze assen zijn niet noodzakelijk allemaal inbegrepen in elk variabele lettertype (sommige mogen slechts één of twee assen hebben), maar ze zijn waarschijnlijk de meest voorkomende.

Aangepaste assen

Aangepaste assen zijn op maat gemaakte assen opgenomen door de doopvontontwerper en kunnen helemaal niets zijn. Ze kunnen (bijvoorbeeld) seriflengte, x-hoogte, zelfs iets creatiever (en minder typografisch typisch), zoals rotatie.

Beide soorten assen moeten worden uitgedrukt als een tag van vier tekens. Geregistreerde assen moeten kleine letters zijn, terwijl aangepaste assen hoofdletters zijn. Beide kunnen worden gecombineerd in de eigenschap Font-variatie-instellingen. Font-variatie-instellingen zijn animatable, wat een aantal zeer coole UI-effecten kan toestaan! Sommige zeer interessante experimenten zijn ook geproduceerd met behulp van pictogramlettertypen.

05. Grafische effecten

Als u bekend bent met ontwerptools zoals Photoshop en Illustrator, bent u misschien op de hoogte van mengmodi en hoe ze kunnen worden gebruikt om verschillende effecten op afbeeldingen te produceren. De manier waarop meningsmodi werkt, is om twee of meer lagen samen te mengen met behulp van wiskundige formules om een ​​resulterende waarde voor elke pixel te berekenen. De lagen kunnen alles zijn - afbeeldingen, hellingen of platte kleuren. Sommige mengmodi produceren een verduisteringsresultaat (bijvoorbeeld vermenigvuldig, dat de pixelwaarden van de lagen vermenigvuldigt), een lichtere (b.v. scherm en overlay). We hoeven de wiskunde niet te begrijpen om ze te gebruiken, maar. Spelen met verschillende mix-modi kan ons een goed gevoel geven waarvoor ze de gewenste resultaten opleveren in combinatie met verschillende lagen.

Met de CSS-eigenschappen mix-blend-modus en borduurmodus , we kunnen Photoshop-achtige beeldeffecten in de browser bereiken. Beide eigenschappen nemen dezelfde waarden in, maar werken iets anders.

Borduurmodus

Borduurmodus Mengt samen de achtergrondlagen van het element die we targeten. Ons element kan afbeeldingen, kleuren en verlopen hebben en ze zouden allemaal met elkaar worden gemengd zonder de voorgrondgehalte te beïnvloeden. We kunnen meerdere waarden opgeven voor borduurmodus , een voor elke achtergrondlaag.

 .my-element {
ACHTERGROND: URL (#MYURL),
lineaire verloop (45DEG, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5)),
RGBA (244, 65, 106, 1);
Achtergrondformaat: dekking;
Achtergrond-Blend-Mode: scherm,
vermenigvuldigen;
} 

Mix-blend-modus

Mix-blend-modus Heeft invloed op hoe het element past bij zijn ouder en zijn broers en zussen, inclusief eventuele voorgrond- en achtergrondinhoud en pseudo-elementen. Sommige interessante creatieve effecten kunnen worden bereikt door overlaid pseudo-elementen te mengen (:: vóór en:: na).

 .my-element {
ACHTERGROND: RGB (244, 65, 106);
MIX-BLEND-MODE: Vermenigvuldig;
} 

CSS-filters

CSS-filters kunnen ook worden gebruikt om opvallende visuele effecten te creëren, met behulp van de filter Eigenschap en filterfunctiewaarden. In tegenstelling tot mengmodi, passen ze een grafisch effect rechtstreeks toe op het element dat ze targeten, en kan een element meerdere filters hebben toegepast.

Converteren naar grijswaarden

We kunnen de kleuren van een element met een grotere mate van controle manipuleren dan vertrouwen op mengmodi. Filters kunnen een afbeelding naar grijswaarden converteren, de helderheid, het contrast en de verzadiging aanpassen, vervagen een element of een druppelschaduw toe te voegen. Ze kunnen ook ook worden geanimeerd en zien er geweldig uit met zwevende effecten.

SVG-filters

CSS-filters zijn in feite vereenvoudigde versies van SVG-filters. De CSS filter eigendom neemt ook een URL () Functie, waardoor we een URL doorgeven aan een SVG-filter. SVG-filters zijn extreem krachtig en zorgen voor enkele ongelooflijke beeldeffecten - maar ze zijn ook veel ingewikkelder dan CSS-filterfuncties! Sara Soueidan heeft een prachtige artikelreeks op CODROPS als u geïnteresseerd bent in het duiken in het coderen van uw eigen aangepaste SVG-filters. Bekijk het artikel op https://tympanus.net/codrops/2019/01/15/SVG-Filters-101/

Knippen en maskeren: voorbij rechthoeken

We zijn gewend aan het omgaan met dozen op het web, maar niet alles moet rechthoekig zijn! Clipping and Masking zijn twee kanten van dezelfde medaille, en zijn verschillende manieren om verschillende delen van een element te verbergen en te tonen, zodat de achtergrond erdoor wordt weergegeven. Dit geeft ons de kracht om interessante en creatieve vormen aan te geven aan onze ontwerpen.

Klempad

De Clip-pad () Eigenschap stelt ons in staat om een ​​element "uit te knippen" door een pad te definiëren. Het duurt een aantal fundamentele vormfuncties, Inzet (), cirkel (), ellips () of polygoon () , wat ons in staat stelt om meer complexe uitsparingvormen te maken met behulp van paren van XY-coördinaten om het pad te definiëren. Als alternatief kunnen we ook een SVG-pad doorgeven met behulp van de pad() functie of gebruiken URL () om een ​​SVG-pad-ID te geven.

Niet in het pad

Het knippen van een element clips alles buiten het pad dat je definieert, maar het element zelf is nog steeds een rechthoek. Als u inhoud heeft die zich uitstrekt uit de grens van de clippad, zal dat ook worden geknipt - het zal niet in de vorm inpakken.

Masker-afbeelding

masker-afbeelding Staat ons in staat om delen van het beeld te tonen en te verbergen door een afbeelding (SVG of transparant PNG) of verloop als een masker te gebruiken. in tegenstelling tot klempad , we kunnen textuur toevoegen aan onze afbeeldingen met maskering, aangezien de maskerbron geen pad hoeft te zijn - het zorgt voor graden van transparantie.

06. CSS-vormen

Met de specificatie van CSS-vormen stelt ons in staat om tekst rond drijvende geometrische vormen in te wikkelen, waardoor een aantal interessante, magazine-achtige lay-outs wordt gemaakt. Dit wordt mogelijk gemaakt met behulp van de buitenshuis eigendom. Gelijkwaardig aan klempad , we kunnen dit pand een basisvorm-functie geven Cirkel (), ellips (), inzet (), polygoon () , of een URL naar een SVG-pad, en in feite de twee werk in harmonie heel goed! buitenshuis Zal onze tekst effectief inpakken, maar het heeft geen invloed op het drijvende element. Als we willen dat de tekst eruit ziet alsof het zich in het beeld of het drijvende object inpakt, kunnen we dezelfde waarde gebruiken voor klempad ​Gebruik vormmarge om witruimte toe te voegen tussen het vormpad en de inhoud die het inpakt. Kijk eens naar de Stuff & amp; Onzin Site om te zien hoe CSS-vormen wordt gebruikt om tekst rond een centrale afbeelding in te wikkelen.

Firefox heeft een Shape-Path-editor Binnen het deelvenster Dev-gereedschap, dat vooral handig is voor het werken met complexe vormen. Gebruik echter met voorzichtigheid. Het inpakken van de voorrand van een alinea van tekst is geweldig voor artistiek effect, maar is niet altijd geweldig voor gebruikerservaring. Complexe gekartelde vormen kunnen blokken tekst harder maken om te lezen. Voor belangrijke inhoud wil je misschien duidelijk blijven.

07. Scroll Snapping

Veel websites maken gebruik van JavaScript-bibliotheken om een ​​gladde, native app-like scrollervaring te bieden, waar inhoud "snapt" naar punten als de gebruiker scrolt. Nu, met de Scroll Snap-specificatie, kunnen we dit recht doen in ons CSS-bestand - er is weinig nodig om te importeren in zware JS-modules om uw pagina te vergroten!

Om Scroll-Snaking te implementeren, hebben we een element nodig om op te treden als onze scrollcontainer. De directe kinderen van de container dicteren de punten die zullen worden ingepakt en kunnen op verschillende manieren worden uitgelijnd binnen het klikgebied.

Scroll-snapping kan nog effectiever zijn in combinatie met een andere nieuwe CSS-eigenschapswaarde - Positie: kleverig ​Deze positiewaarde "steekt" een element in op een opgegeven positie tijdens het scrollen in de container - een ander gedrag dat voorheen alleen mogelijk was met JavaScript. Bekijk deze scroll-snap met positie: kleverig en intersectionobserver voorbeeld ​

08. CSS-raster en lay-outs

Front-end-ontwikkelaars hebben de lay-out gehackt met welke tools op het moment beschikbaar waren om te gebruiken op het moment - meest recent Flexbox, die veel moderne rastersystemen gebruiken. Maar Flexbox is nooit ontworpen voor het bouwen van strikte rasters - het doel is flexibiliteit!

CSS-raster is de eerste specificatie die is ontworpen voor tweedimensionale lay-out, waardoor we volledige controle kunnen maken over het bouwen van een lay-out en het plaatsen van items op zowel de rij als de kolomas. Het bouwen van een responsieve lay-out met raster vereist geen calc () of hacking rond met negatieve marges. Het geheime wapen is de FR-eenheid - een nieuwe eenheid exclusief voor raster. De FR-eenheidsmaten raster tracks (rijen en kolommen) als een aandeel van de beschikbare ruimte. Het houdt rekening met eventuele vaste tracks, dakgoten en inhoud, verdeelt vervolgens de resterende ruimte dienovereenkomstig. Jen Simmons bedacht de term "Intrinsic Web Design" om het nieuwe tijdperk van Web Layout te beschrijven dat Raster Ushers in.

Hoe CSS-raster te gebruiken

Net vereist een element met de weergave van het display-eigenschap in het rooster, om op te treden als de netcontainer. De directe kinderen van de rastercontainer zijn de items die op het raster kunnen worden geplaatst. We gebruiken de eigenschappen rasterjabloonrijen en Rasterjabloon-kolommen Om de nummers (rijen en kolommen) van het raster te definiëren, en kolomkloof en rij-gap om de goten te definiëren (de openingen tussen de nummers).

 .grid {
Weergave: raster;
Rasterjabloon-kolommen: herhaal (4, 1fr);
raster-sjabloon-rijen: herhaal (4, 200px);
GAP: 20PX;
} 

We gebruiken de herhaling() Functie om de Code meer beknopt te houden, als een alternatief voor de lange weg (bijvoorbeeld Rasterjabloon-kolommen: 1fr 1fr 1fr 1fr ​Dit voorbeeld gebruikt ook de steno kloof voor rij-gap en kolomkloof ​

De bovenstaande code geeft ons vier rijsporen, elke 100px hoge en vier kolomtracks die elk een gelijke hoeveelheid van de beschikbare ruimte vullen, met behulp van de FR-eenheid.

Het is vermeldenswaard dat dit niet de enige manier is om rastracks te maken. Impliciete nummers kunnen ook worden gecreëerd door rasteritems te plaatsen. Het is handig om hier een beetje over te lezen als u raster gebruikt, omdat het loont om een ​​dieper inzicht te krijgen in hoe het net zich gedraagt ​​onder verschillende omstandigheden, en kan een lay-out veel gemakkelijker maken.

We kunnen items op het raster plaatsen door te verwijzen naar rasterlijnnummers, die numerieke lijnen zijn die tussen elk nummer zitten. Hier gebruiken we de steno rasterkolom en rasterrij voor rasterkolom-start ​ rasterkolom-einde ​ grid-rij-start en raster ​Deze vertellen de browser bij welke regel ons item moet beginnen en eindigen op elke as.

 .Item {
Rasterkolom: 1/4;
Rasterrij: 2;
} 

Grid biedt ons veel verschillende manieren om items te plaatsen: we kunnen in plaats daarvan onze rasterlijnen noemen:

 .grid {
Weergave: raster;
Net-sjabloon-kolommen: [Beeldstart] 1fr
 1fr 1fr [beeldstart] 1fr;
Rasterjabloon-rijen: 200px [beeldstart]
 200px 200px [beeld-end] 200px;
GAP: 20PX;
} 

Als alternatief, de raster-sjabloon-gebied Eigenschap laat ons "tekenen" een roosterlay-out met tekst.

 .grid {
Weergave: raster;
Rasterjabloon-kolommen: herhaal (4, 1fr);
raster-sjabloon-rijen: herhaal (4, 200px);
GAP: 20PX;
Rasterjabloongebieden:
​​​​
'Afbeelding afbeelding afbeelding.'
'Afbeelding afbeelding afbeelding.'
​​​​
} 

Met behulp van een van deze methoden kunnen we eenvoudig het bijbehorende rastergebied verwijzen bij het plaatsen van een rasteroptie:

 .Image {
Grid-gebied: afbeelding;
} 

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Webdesigner ​ Koop nu uitgave 290.

• 10 beste CSS-frameworks in 2019
• Hoe animatie toe te voegen aan SVG met CSS
• 52 Webontwerphulpmiddelen om u te helpen slimmer te werken in 2019