Conferentie verslag: dotCSS

-

De CSS conferentie dotCSS is onderdeel van een reeks tech conferenties die sinds 2012 in het hartje van Parijs wordt gehouden. Wij waren daar op vrijdag 4 december aanwezig, evenals op de zusterconferentie dotJS de maandag er op.

De organisatie had een middag gevuld met interessante, prominente sprekers. Het was duidelijk dat ze moeite hadden om een hele dag aan praatjes over CSS-innovatie te plannen. Niet verwonderlijk aangezien het een taal is wier syntax al sinds jaar en dag vrijwel ongewijzigd is gebleven.

Toch zitten er heel wat spannende veranderingen aan te komen. Lees verder voor een kort verslag van de besproken onderwerpen.

dotCSS

De nieuwe CSS layout

Spreker Rachel Andrew trapte de conferentie af. Ze besprak de meest recente Box Alignment Module Level 3 specificatie. Deze specificatie omvat naast Flexbox – waar ze de zaal even kort de inhoud van opfriste – ook de nieuwe CSS Grid specificatie. Deze moet de community CSS grids overbodig maken.

Met CSS grids heb je via properties als grid-template-columns en grid-template-rows complete controle over de horizontale en verticale positionering en uitlijning van elementen. Het mooiste van deze specificatie is dat deze is ontworpen met het web van nu in gedachten. Dat wil zeggen: geoptimaliseerd voor liquid layouts en responsive web.

Het idee is dat je met CSS Grids voor tweedimensionale layout (hoogte en breedte) in combinatie met Flexbox voor eendimensionale layout (inline) straks niet of nauwelijks meer media queries nodig hebt om je layout responsive te maken. Nieuwsgierig? Browser support is nog beperkt tot IE/Edge, maar op gridbyexample.com kun je al wat toffe voorbeelden zien.

PostCSS, een concurrent voor SASS?

De volgende spreker was de bedenker van PostCSS, Andrey Sitnik. PostCSS is een tool die razendsnel populariteit wint in de community. In tegenstelling tot preprocessors als SASS is dit geen pre-of postprocessor maar een CSS-transformatietool. Het is een modulaire basis voor Javascript-plugins die je kunt incorporeren in Gulp, Webpack en vele andere build tools.

Het doel van PostCSS is niet om custom syntax te introduceren, maar om je zo veel mogelijk naturel CSS te laten schrijven met zo min mogelijk code. Voorbeelden van beschikbare plugins zijn autoprefixer, die automatisch vendor prefixes aan je CSS toevoegt en SASS mixins hiervoor overbodig maakt, en cssnext, die functionaliteiten van de nieuwe CSS4-specificatie mogelijk maakt in je code (zie het als wat Babel voor Javascript is).

Omdat PostCSS met Javascript plugins werkt is het supersnel, maar het mooiste nog dat plugin development hierdoor makkelijk is en er een grote community zich mee bezighoudt. Gelukkig hoef je niet te kiezen voor het één of het ander: je kunt je favoriete preprocessor naast PostCSS blijven gebruiken, maar je zult zien dat je deze steeds minder nodig gaat hebben.

CSS-chaos bij Dropbox

Een goed getimede luchtige talk van Daniel Eden bracht ons naar het klimaat van Dropbox, waar dagelijks wordt gevochten met de puinhoop die ze in hun CSS-codebase hebben. Er werken tal van developers, front-end en back-end, tegelijk aan CSS-code die slecht is opgezet en slecht is gedocumenteerd. En als ontwikkelaars er niet uit komen met de bestaande CSS, schrijven ze gewoon nieuwe CSS. Of erger nog, ze passen de bestaande CSS aan, niet wetend welk onderdeel van de website ze daarmee vernietigen.

De les die je kunt leren van Dropbox is: documenteer je elementen (d.m.v. een stijlgids of pattern library), zorg voor een goede abstractie in je code die herbruikbaarheid en uitbreidbaarheid stimuleert, en hou malafide CSS-praktijken zoals topzware turbospecifieke CSS-selectors in de gaten met een CSS-analysetool naar keuze.

Blenden met CSS

Wie wel eens met Photoshop heeft gewerkt, kon ongetwijfeld aardig wat aanknopingspunten vinden in het pratje van Una Kravets over CSS blend modes. Ze legde uit hoe welbekende blend modes als color burn, overlay en hard light werken in CSS en welke berekeningen er achter zitten om de resulterende beeldeffecten te geven.

Een leuk speeltje, die blend modes, die je met de property background-blend-mode op je element naar keuze zet. Zo kun je met CSS twee foto’s, of wat vaker van toepassing is, een foto en een gradient laag, samensmelten tot indrukwekkende resultaten. Zo voorzie je een compleet fotoalbum in één keer van Instagram-effecten of geef je je achtergrond of je header een interessant tintje zonder dat je hier een Photoshopper voor nodig hebt.

De lering die we hier uit kunnen trekken is dan ook: Photoshop wordt steeds meer gedateerd als ontwerptool voor het web. Steeds meer grafische oplossingen kun je nu in je browser bewerkstelligen. Technieken als blend modes schelen je designers potentieel enorm veel tijd en openen de deuren naar nieuwe stijlen op het web. Browser support is nog verdeeld, maar niets weerhoudt je er van het nu al te gebruiken omdat een fallback vaak niet essentieel is.

Transformaties met CSS

Wat mij betreft het meest indrukwekkende praatje van de dag was van Tom Giannattasio, oprichter van Macaw, een designtool voor responsive web, en ontwikkelaar voor projecten van onder meer Twitter, Apple, MIT en Smashing Magazine. Hij liet in een paar technische demo’s het enorme potentieel zien van animaties met de CSS transform property.

In combinatie met masking en clipping kun je met 3D transformaties indrukwekkende resultaten behalen, zo liet hij zien in verschillende demonstraties. Wat ik zelf indrukwekkend vond was zijn demo van een origami kraanvogel, compleet gemodelleerd met CSS. Hij had bij wijze van experiment een Javascript lighting engine geschreven die de effen CSS-vlakken de juiste belichting gaven onder de juiste hoek, die je kon zien transformeren wanneer je met je muis de kraanvogel roteerde. Het is een monnikenwerk, maar je kunt dus 3D-modelleren met CSS en een beetje Javascript zonder zware grafische libraries.

De boodschap die Tom ons op ons hart drukte was de volgende: verken CSS-transformaties en de potentie om de uxer experience te verbeteren. Een slechte animatie kan afleiden aan de ervaring en de huisstijl van je website, maar een goede animatie kan sterke feedback geven in een interface en je gebruiker net dat beetje ervaring bezorgen dat ze je product of dienst leuk vinden om te gebruiken.

CSS als programmeertaal

Niemand minder dan de bedenker van SASS, Chris Eppstein, vertelde over de stroeve ontwikkeling van CSS, waarom zijn taal het gat opvult dat CSS open laat, en hoe SASS het CSS-landschap heeft veranderd.

CSS was nooit ontworpen als programmeertaal en bleef daarom initieel vrij van programmeerconcepten als variabelen en functies. Dit om webontwikkeling zo toegankelijk mogelijk te maken. Eppstein redeneerde echter dat CSS wel degelijk een programmeertaal is en dat de omissie van programmeerconcepten een doorn in het oog is voor vele ontwikkelaars – getuige de populariteit van SASS en andere preprocessors.

Gelukkig is dit de CSS Working Group niet onopgemerkt gebleven. Zij werken aan de CSS4 specificatie en hebben eindelijn besloten variabelen en uitbreidbaarheid van de CSS-syntax toe te laten. De invloed en ontwikkeling van SASS heeft mede geleid tot de oprichting van CSS Houdini, een zelfomschreven taskforce die zich bezig houdt met het verzamelen van ideeën uit de community en deze uit te werken voor inclusie in de CSS-standaard. Revolutie!

De toekomst van CSS

Sprekers Alan Stearns (medevoorzitter CSS Working Group) en Daniel Glazman (voormalig voorzitter) spraken beiden over de ontwikkeling van CSS, de gebreken van de taal en de toekomst er van. CSS gaat veranderen, en de community is hierop van grote invloed. Ze moedigen iedereen aan om geluid te maken online en offline om aan te geven tegen welke problemen men aanloopt en welke functionaliteit men wil zien in de nieuwe CSS-standaard.

Het goede nieuws is dat CSS eindelijk verandert en mee gaat met de ontwikkelingen op het web. De specificatie was een echte dinosaurus in vergelijking met andere standaarden en technologieën, maar we bevinden ons op een spannend keerpunt. Volg dus het goede voorbeeld en blog, tweet en zanik over CSS waar je maar kunt!

dotCSS

Bron afbeeldingen: Dot conferences