Ik ben naar de CSS days geweest. 1 avond en 2 dagen zijn compleet gevuld met veel presentaties over de ontwikkelingen in het CSS gebied. Ik vond het heel gaaf dat ik mee mocht en heb een heleboel inspiratie opgedaan over dingen die ik zelf een keer wil gaan uitproberen en toepassen op websites.

Making websites like it's 1999

Tijdens de pre-CSS Days avond kwam Sophie Koonin iets vertellen over websites uit de jaren 90. Ik vond dit een leuke presentatie om te zien hoe websites er vroeger uitzagen. Vroeger waren mensen heel speels met allerlei kleuren en leuke gifs, je kan eraan zien dat mensen er plezier aan hadden om deze websites te maken. Zelf heeft ze op de 1e dag van de CSS Days nog een presentatie gegeven waar ze iedereen oproept om zelf een persoonlijke website te gaan maken gewoon voor de lol. sophie.omg.lol/

Ze vertelde ook dat het belangrijk is om rekenening te houden met mensen die niet van veel animaties of bewegingen op het scherm houden en 'reduced motion' op hun apparaat hebben ingesteld. Ze gaf ons een code voorbeeld hoe je dit kan doen voor gifjes. Ik wil reduced motion opties toepassen in toekomstige websites. Sophie houdt ook een blog bij: localghost.dev

oklch

Adam Argyle gaf een presentatie over oklch kleuren in css op de pre-CSS days avond. Klik hier voor Adam's codepen voorbeeld. Hij liet zien dat je met oklch veel meer kleurenopties hebt dan met andere kleureenheden. Ik wil hier in de toekomst nog meer onderzoek naar doen en het gebruiken op mijn websites. oklch

State of the CSS community

Una Kravets gaf de eerste presentatie op de 1e CSS day. Wat ik heb opgeschreven van haar presentatie zijn een paar dingen waar ik meer onderzoek naar ga doen:

• Popover

Met popover kan je elementen laten op poppen met enkel CSS, hier is dan dus geen JavaScript meer voor nodig. Dit is beter om verschillende redenen. Bijvoorbeeld dat ook mensen zonder JavaScript in hun browser leuke popovers kunnen krijgen. Lees hier een blogpost van Una over popovers.

• Text-wrap

Met 'text-wrap:balance;' kan je text mooi netjes laten uitlijnen in balans met de andere zinnen. onderstaande foto bron: developer.chrome.com

• @support

Soms ondersteunen sommige nieuwe CSS technieken nog niet. Daarom is het handig om in CSS een soort functie te plaatsen die eerst controleert of je het kan gebruiken. Daar is @support handig voor. Hiermee controleer je eerst of de browser bijvoorbeeld 'display: grid' ondersteunt. Bekijk het volgende code voorbeeld:

CSS speech

Léoni Watson gaf een presentatie over screenreader geluid en wat er mogelijk is om dat te 'stylen' met verschillende stemmen. Je kan bijvoorbeeld een 'voice-family' toevoegen. Met 'voice-family' kan je aangeven met welke stem je website of bepaalde onderdelen worden voorgelezen. Met deze website wordt er gecontroleerd hoeveel stemmen er worden ondersteunt op je browser.

Er zijn verschillende properties die je mee kan geven in de CSS om je website voor een screenreader luisteraar aangenaam te maken. Probeer deze de volgende keer te implementeren op je website voor een fijnere gebruikerservaring voor screenreader gebruikers.

• voice-family: "Voice Name 1", "Voice Name 2";
• voice-stress: strong;
• speak-as: spell-out;
• voice-pitch
• voice-rate
• voice-volume
• speak

Lees hier een artikel van Léoni over waarom we CSS speech nodig hebben.

Tinkerer by Night

Sanne 't Hooft, bij wie ik ook de CSS week heb gevolgd kwam een leuke en interessante presentatie geven over allerlei coole dingen die hij heeft gemaakt met CSS. Sanne laat zien dat je in CSS bijzondere dingen kan maken door complexe berekeningen in CSS uit te voeren. Op Sanne's codepen kan je al zijn mooie projecten vinden.

Iets wat ik voor de CSS Days nog niet kende was 'clamp()'. Ik heb aan ChatGPT gevraagd het mij uit te leggen:

In CSS wordt de clamp()-functie gebruikt om een waarde binnen een specifiek bereik te definiëren. Hiermee kun je een minimum-, gewenste- en maximumwaarde instellen, en de browser kiest automatisch de waarde die het beste past binnen dat bereik. De syntaxis voor clamp() is als volgt: clamp(min, preferred, max)

• min vertegenwoordigt de minimumwaarde die de eigenschap kan aannemen.
• preferred vertegenwoordigt de gewenste of ideale waarde voor de eigenschap.
• max vertegenwoordigt de maximumwaarde die de eigenschap kan aannemen.

De clamp()-functie wordt vaak gebruikt bij CSS-eigenschappen die lengtewaarden accepteren, zoals breedte, hoogte, lettergrootte, enzovoort. Het biedt een flexibele en responsieve manier om waarden te definiëren op basis van de beschikbare ruimte of beperkingen.

Ik vond de presentatie van Sanne inspirerend, deze codepen vind ik erg cool, zoiets wil ik ook een keer gaan maken.

Container Queries

Miriam Suzanne kwam iets vertellen over container queries. Het was een leuke presentatie. Ik ga hieronder beschrijven wat een container query is.

Een container querie is eigenlijk een soort media querie maar dan voor een container. Je kan met een container query de stijl van de elementen binnen de container veranderen op basis van de grootte van de container. Je zou bijvoorbeeld ook bepaalde elementen weg kunnen laten als de container te klein is.

Lees hier meer over container queries.

Tooling & Workflows

Umar Hansa gaf bloop.ai en ghosttext als tips om te gaan gebruiken. Verder heeft hij op zijn website een blog geschreven met allemaal handige developer tips.

Kom later terug!🌞

Voor de rest van mijn verhaal over de presentaties en wat ik nog meer geleerd heb op de CSS Days. Dit blog is nog in de maak😃.