CSS Day

Samen met enkele collega’s van Bluebird Day en E-Sites gingen we op vrijdag 15 juni naar het Compagnietheater in Amsterdam waar de zesde editie van CSS day gehouden werd. Dit was voor mij de eerste CSS day dus ik wist niet precies wat me te wachten stond. Het evenement wordt jaarlijks gehouden en staat in het teken van CSS (Cascading Style Sheets), speciaal voor front-end developers. Zelf vind ik CSS een van de leukste onderdelen van het front-end vak. Met CSS kun je namelijk lekker je gang gaan om een ontwerp om te zetten of om zelf iets te ontwerpen en ermee te experimenteren. Met CSS kun je dus erg creatief bezig zijn.

Programma
Eric Meyer – The Friction of Web Standards
Richard Rutter – Web Typography
Hidde de Vries – Great Graphic Design
Sara Soueidan – SVG Filters – The Crash Course
Greg Whitworth – Solving Container Queries Today
Chen Hui Jing – Box Alignment
Ire Aderinokun – CSS for the Next Billion Users
Bruce Lawson – CSS-in-JS: FTW || WTF?

Eric Meyer – The Friction of Web Standards
De eerste spreker van CSS day was Eric Meyer. Zijn talk ging over webstandaarden en hoe webstandaarden tot stand komen. Hij begon over de eerste webpagina, de World Wide Web en dat deze pagina vandaag de dag er nog steeds goed uitziet, met alle veranderingen die in de loop van de tijd zijn geweest. Een grote verandering in de loop van de jaren is de border-radius. Een paar jaar geleden, als je een ronde rand om je box wilde moest je dit oplossen met bijvoorbeeld achtergrondafbeeldingen. Nu doe je dit met de CSS property “border-radius” die nu onmisbaar is en vanzelfsprekend. We zouden niet meer zonder kunnen. Echter moest er heel goed nagedacht worden over deze webstandaard. Over alle variaties en beperkingen moest worden nagedacht. Hoe ging dit eruit zien met verschillende kleuren, bijvoorbeeld links en rechts een rode kleur rand en boven en onder blauw. Wanneer en waar veranderen de kleuren zodra je een border-radius gebruikt? En wat gebeurt er als je verschillende diktes gebruikt voor je border? Zo zijn er heel veel dingen waar aan gedacht moet worden bij het standaardiseren van css.

Richard Rutter – Web Typography
Richard Rutter was de tweede spreker van CSS Day en praatte in zijn talk over de gouden regels voor typografie op het web. Hij gaf aan dat zodra je een webfont gebruikt je sowieso een woff2 moet inladen voor beste resultaten. Ook vertelde hij dat je met het CSS attribuut font-display: fallback, dat de tekst dat de betreffende webfont bevat pas getoond wordt zodra deze is ingeladen, erg handig dus. Vervolgens gaf hij aan dat je het beste ook de fonts kunt pre-loaden met <link rel=“preload” href=“/assets/myfont.woff” as=“font”> zodat fonts zo snel mogelijk worden gedownload voordat je het gebruikt. Tenslotte had hij het nog over variable fonts gehad. Variable fonts is een nieuw font format die super flexibel is waarin alle variaties mogelijk zijn in maar één bestand. In plaats van dat je voor elke font-size en font-style een apart bestand moet inladen kun je met variable fonts één bestand inladen voor elke combinatie. Meer over variable fonts is te lezen in zijn artikel “Get started with variable fonts” op Medium.

De gouden regels nog even op een rijtje:

1. Don’t trust computers
2. Use the default font size for paragraphs text
3. Adjust type size according to reading distance
4. Adjust the font size if the typeface requires it
5. Set tables to be read
6. Set text at display sizes, even on small screens
7. Resize display text as you would an image
8. Reduce your payload
9. Optimize page render timing
10. Learn to use variable fonts

Hidde de Vries – Great Graphic Design

De derde spreker van CSS day was Hidde de Vries en sprak over dat het web klaar is voor graphic design. Hij begon over Modernisme in graphic design en dat het tegenwoordig beter is om iets functioneels te hebben wat helder is dan alleen maar mooi. In zijn talk verwees hij ook naar het boek van Josef Müller-Brockmann, “Grid Systems in Graphic Design” uit 1968 waar het hedendaagse grid op is gebaseerd. Met het grid kun je alles makkelijker een plaats geven. Met CSS kunnen we “great graphic design” maken. Met CSS kunnen we namelijk vanalles gebruiken zoals, variable fonts, box-sizing, HSL colors, floats etc. Tegenwoordig kunnen we ook de nieuwe layout modes flexbox en grid gebruiken. Hiermee kunnen we afvangen dat meerdere blokken met verschillende inhoud allemaal dezelfde hoogte hebben zonder hiervoor JavaScript te gebruiken. Zo liet Hidde een aantal voorbeelden zien van code hoe we flexbox en grid kunnen gebruiken en de vele mogelijkheden ervan zoals positionering en lege kolommen, berekeningen en berekeningen met viewport maten en het overlappen van content. Niet alle moderne CSS attributen worden ondersteund door alle browsers en versies. Je zult dus fallbacks moeten maken zodat het in andere browsers ook werkt. Dit kan met de @supports regel waarmee je afhankelijkheden kunt declareren voor het ondersteunen voor specifieke CSS functies. Dit wordt ook wel “feature-query” genoemd. We moeten er echter wel voor zorgen dat fallbacks simpel blijven. In elk geval zijn veel dingen in de browser al mogelijk waardoor het voor designers ook makkelijk zou zijn om ontwerpen in de browser te testen of om ermee te experimenteren. Dat maakt het web klaar voor graphic design en hiermee kan graphic design ook geïnspireerd worden door het web.

Sara Soueidan – SVG Filters – The Crash Course

Sara Soueidan was de vierde spreker van CSS day. Ik had haar al eerder gezien op Fronteers Conference dat zij vorig jaar mocht hosten. Ze vertelde in haar talk over SVG filters en de vele mogelijkheden ervan. Ze vertelde dat het beter was om filters in de code te maken dan in het design. Stel als een filter ooit moest veranderen dan zou je dat voor elke foto moeten veranderen. Met SVG (Scalable Vector Graphics) kun je eigenlijk alle filters wel maken. In haar technische demo liet ze zien hoe ze een gephotoshopte afbeelding met een filter kon namaken met alleen maar SVG. Ze ging een beetje snel door haar presentatie heen waardoor het moeilijk was om alle code goed te begrijpen. Het is in elk geval goed om te weten dat het bestaat en dat het allemaal kan. Haar talk sloot ook goed aan op dat van Hidde omdat ook met SVG filters wordt aangetoond dat het web klaar is voor graphic design.

Greg Whitworth – Solving Container Queries Today
De vijfde talk werd gehouden door Greg Whitworth die het over container queries ging hebben. Momenteel kunnen we met media queries voor elke scherm of formaat een mooie website ontwikkelen. Hiermee kun je dus bijvoorbeeld de achtergrond van een container rood maken op desktop en blauw op mobiel. Dit geldt alleen voor het formaat van je scherm. Container queries daarentegen gaat over een ander fenomeen. Hierbij gaat het om het formaat van de container. Eigenlijk wil je dat zodra de container kleiner is dan 300 pixels de achtergrond blauw moet zijn en bij groter dan 300 pixels rood. We willen in dit geval dan liever container queries dan media queries. Er zijn vele scenario’s waarin we liever container queries willen gebruiken dan media queries. Hier is namelijk nog geen standaard oplossing voor. Greg is hier al een tijdje mee bezig en heeft in zijn talk de huidige oplossingen op een rijtje gezet bijvoorbeeld via iFrames of via JavaScript met bijv. resizeObserver (een soort document.onresize maar dan voor elementen) en intersectionObserver (detecteert de zichtbaarheid en veranderingen van elementen ten opzichte van elkaar).

Chen Hui Jing – Box Alignment
Chen Hui Jing sprak in de zesde talk van CSS day over box alignment. Als CSS ontwikkelaars zijn we eigenlijk programmeurs van boxes. Een pagina op het web bestaan namelijk allemaal uit boxes. Chen Hui Jing had het in haar presentatie over de verschillende boxes, de display property, over het positioneren van boxes, de richting van blokken, block formatting contexts & inline formatting context, float, display: flow-root. Display: flow-root is net als display block alleen stelt het een nieuwe “block formatting context” vast voor de content ervan. Zo hoef je dus geen clearfix meer te gebruiken zodra je bijvoorbeeld “float: left” gebruikt op het linkerblok als het rechterblok minder content heeft dan het linkerblok. De block formatting context is dan kleiner dan het eigenlijk zou moeten zijn. Flow-root lost dit probleem op. Ook vertelde ze in haar talk over flexbox en grid. Zodra je flexbox of grid gebruikt hebben margin, float en vertical-align geen nut meer. Ze legde flexbox en grid uit en hoe je bijvoorbeeld wrap, nowrap en wrap-reverse kunt gebruiken. Ook kwamen de attributen flex-direction, justify-content, align-items, align-content en place-content (combinatie van justify-content en align-content in 1 property) aan bod waarmee je de positie van de boxes bepaalt en de ruimte tussen de boxes. Ze liet een aantal voorbeelden zien hoe je boxes kunt indelen met deze technieken.

Ire Aderinokun – CSS for the Next Billion Users

De zevende presentatie werd gegeven door Ire Aderinokun, een front-end developer en user interface designer uit Nigeria. Het onderwerp ging over het ontwikkelen voor de “next billion users”. Hiermee worden de gebruikers bedoeld in ontwikkelingslanden. De lezing ging over de verschillende manieren waarop we CSS kunnen schrijven voor deze gebruikers. Vroeger in 1995 had maar 0,4% van de wereldbevolking toegang tot het internet en waren er geen ondersteunende technologieën beschikbaar. Het had geen nut om voor andere het web toegankelijk te maken. Dit had ook te maken met het feit dat computer toendertijd erg duur waren. Tegenwoordig heeft maar liefst 51,7% van de wereldbevolking toegang tot het internet en hebben we wel ondersteunende technologieën in ons bezit en hebben we een reden om het web toegankelijk te maken voor iedereen. Om het web toegankelijk te maken voor iedereen moeten we aan 3 dingen denken: performance, internationalisering en toegankelijkheid (accessibility). Performance, omdat in bijvoorbeeld Nigeria men 28 uur moet werken voor maar 500mb data terwijl dat hier maar 1 uur is. We moeten ook aan internationalisering denken omdat in veel landen nog niet iedereen Engels kan. Daarnaast zou het web ook toegankelijkheid moeten zijn voor mensen met een handicap. We moeten hierbij eraan denken dat we de juiste code gebruiken op de juiste manier. Gebruikt HTML alleen voor content. Gebruik CSS alleen voor presentatie en JavaScript alleen voor functionaliteiten. Veel mensen denken dat een site dat werkt op alleen CSS beter is (dus voor browsers zonder JavaScript). Maar dat hoeft niet altijd zo te zijn. JavaScript kan juist heel handig zijn als je een website wil laten werken door het bedienen via het toetsenbord. Zo liet ze ons ook zien hoe je het beste bijvoorbeeld HTML elementen kunt benoemen en hoe je CSS selectors het beste kunt gebruiken op bijvoorbeeld performance.

Bruce Lawson – CSS-in-JS: FTW || WTF?

Bruce Lawson was een leuke afsluiting en heeft ons veel aan het lachen gemaakt. Hij is opvallend met zijn groene mohawk en daarnaast weet ik nog steeds niet waarom hij op zijn blote voeten ging presenteren, misschien is dat gewoon zijn ding. Zijn vergelijkingen met Kim Kardashian, zijn opvattingen van zijn “alter ego’s” en zijn mr Potato voorbeeld maakte het een grappig verhaal. Naast dat het grappig was had hij ook wat leerzaams te vertellen. Zijn presentatie ging over CSS in JavaScript. Hij sprak bijvoorbeeld over “component-based development” en dat dit goed werkt doordat je het kunt hergebruiken, combineren, goed kunt testen en kunt delen. Echter is component-based development voor CSS hoe hij het zegt een PITA (pain in the *ss). Dit komt voornamelijk doordat alles “global” is, CSS is volgorde afhankelijk, afhankelijkheden met @import, is afhankelijk van HTML (classes, id’s etc) en toont onverwacht gedrag. En dat CSS in JavaScript vele moeilijkheden met zich mee brengt. Bijvoorbeeld camelCase benamingen, specifieke talen van frameworks, JSON objecten, linting en css plugins. Maar ook voornamelijk performance. CSS in JavaScript kost ons een JavaScript library die we moeten inladen, het continu compilen van stylesheets en server-side rendering. Bruce heeft samen met een team Stylable geintroduceerd dat net als Less en Sass een css-preprocessor is maar dan speciaal voor het stylen van componenten. Hij gaf een voorbeeld met het component mr Potato en dat al zijn onderdelen (ogen, top, mond etc) te hergebruiken en aan te passen zijn. Daarnaast is elk component ook uit te breiden. Verder in zijn verhaal vertelde hij dat we afscheid zullen nemen van :shadow en /deep/ waarmee je de shadow-root kon stylen en dat we dit voortaan kunnen doen met de nieuwe ::part en ::theme pseudo elementen. Ook vertelde hij over Houdini, het JavaScript in CSS verhaal (bijv: .element { background: paint(nice-thing); }) maar dat dit nog niet klaar is voor gebruikt. Wel een interessant concept!

Zo, m’n eerste keer CSS day zit erop. Ik heb veel nieuwe dingen gehoord zoals font-display fallback, variable fonts, font preloading, feature-queries (@supports), de vele mogelijkheden van SVG filters, container queries, resizeObserver, intersectionObserver, place-content, Stylable en Houdini. Daarnaast is het ook erg leerzaam om te horen hoe zaken tot stand zijn gekomen, bijvoorbeeld hoe iets een webstandaard wordt en waarnaar gekeken moet worden voordat iets een webstandaard wordt. Maar ook om te horen waar mensen nog problemen mee hebben en welke mogelijke oplossingen er zijn m.b.t. CSS, bijvoorbeeld het probleem met container queries, het positioneren van elementen en blokken in bijvoorbeeld een grid en hoe we om kunnen gaan met CSS performance en accessibility op het web. CSS day was bovenal leuk en ook erg leerzaam.