icon blogAltijd iets te leren

CSSDay – Zoveel mogelijkheden

10-06-2014 door Jarno de Wit

Voor sommigen is CSS een verschrikking, voor anderen is het een fantastische wereld. Ik weet dat er meerdere collega's rondlopen bij Virtual Sciences die er het liefst niets mee te maken hebben, ik kan er geen genoeg van krijgen. CSSDay is een conferentie die zich richt op die laatste. Veel aandacht voor de mogelijkheden en onmogelijkheden.

CSSDay – Zoveel mogelijkheden

Tijdens de conferentie, een dag, een track, kwamen verschillende sprekers aan bod over uiteenlopende onderwerpen. Via hands-on oplossing die direct zijn toe te passen, naar heerlijke hoe-is-het-mogelijk-momenten, tot uitleg van de techniek achter Response Web Design (RWD) naar mooie oplossingen van RWD.

Nu toepassen

Een probleem waar Frontenders al lang tegenaan lopen is een handige manier om layout te regelen. Vroeger deden we dit met tabellen, maar die zijn gelukkig al jaren 'not done'. Daar kwamen alternatieven voor zoals

{
display: block|inline-block|inline|table|table-cell;
float: left|right;
}

Helaas blijft het daarmee altijd lastig om tot een echte intelligente oplossing te komen. De complexiteit hierbij zit vooral in de onvoorspelbaarheid van content. Denk aan de lengte van een menu-item en hoe die moet worden verdeeld in de rest van een menu. De oplossing is de Flexible Box Layout. Een studie op zichzelf, maar wel heel krachtig. En nu het meest positieve aan het verhaal: de meest recente versies van de grote browsers ondersteunen de techniek eindelijk, prefix-vrij.

Hoe-is-het-mogelijk-momenten

Mensen houden van animaties. Ik kan er niets aan doen. Animaties in grote en kleine mate. CSS kan hier heel aardig in meegaan. Kleine subtiele zaken als een menu dat openklapt. Of een (achtergrond)kleur die geleidelijk veranderd als je met je muis boven een link 'hangt'.

Maar met CSS kan nog veel meer. Heel veel meer. Een van de spreeksters, Ana Tudor, is daarin een expert. Het leverde wel de nodige hoe-is-het-mogelijk-momenten, want dit is bijna geen CSS meer. Het is eerder hogere wiskunde met levendige toepassing van sin, cos, tan en asin formules, liefst verwerkt in SASS en gerenderd met Compass. Maar de resultaten zijn er wel naar :-)

Meer voorbeelden van Ana Tudor op CodePen.

Responsive Web Design

Over veel presentaties heen kwam RWD terug. De laatste twee presentaties, door Peter Paul Koch en Ethan Marcotte legden hier echter de nadruk op. Peter Paul door uitleg te geven waarom media-queries, de techniek die we vanuit CSS gebruiken om te bepalen hoe 'groot' een scherm is eigenlijk werken. Anders gezegd, hij vertelde over viewports. Dit leverde een paar conclusies:

  • Vertrouw (Google) Analytics niet als het aankomt op schermresoluties, want dat is niet consistent te bepalen over devices heen;

  • Gebruik bij media-queries min-width en max-width voor je grenzen;

  • Al die eigennaardigheden, dat is de schuld van de iPhone.

Ethan Marcotte ging meer in op de toepassing van RWD. De mogelijkheden en onmogelijkheden, maar vooral ook door te bedenken hoe je zaken zo eenvoudig mogelijk kunt doen. Zoals hij zelf zij, 'be lazy'. En dat RWD meer is dan je site op twee resoluties ontwerpen en klaar. Nee, ga verder. Bepaal een minimale set van functionaliteit en zorg dat die werkt. En werken houdt in, de content is bruikbaar! Vandaar kun je verder werken naar steeds meer UI, steeds meer mogelijkheden. Een mooi voorbeeld is m.bbc.com/news (echt met je mobiel doen!). Deze is geschikt vanaf antieke mobieltjes tot moderne toestellen als een Nexus of Jolla.

Minder Javascript, meer CSS.

Een ontwikkeling die ik zelf erg positief vind en die ook steeds meer opkomt is de bewustwording van ontwikkelaars dat de juiste tool op het juiste moment moet worden gebruikt. En binnen Frontend ontwikkeling betekend dit o.a. dat er minder met Javascript/jQuery moet worden gedaan en meer met CSS. Veel zaken die wellicht een jaar of twee geleden niet mogelijk waren zonder jQuery zijn dat nu wel. Ook nu kwam dit weer naar voren.

Dit geldt niet alleen voor Javascript. Ook HTML kan eenvoudiger. Heydon Pickering gaf een mooie presentatie hierover. Hiervoor gebruikte hij de 'use-case Victoria'. Zij schrijft artikelen voor een website. Doel is dat ze dit zo efficiënt mogelijk kan doen, zonder dat ze hoeft na te denken over hoe het eindresultaat moet worden gestyled. Heydon haalde vele voorbeelden aan die hierbij kunnen helpen. Niet zozeer nieuwe zaken, als wel bewustwording van hoe eenvoudig iets kan.

Denk aan eenvoudige oplossing als afwijkende styling van de eerste paragraaf:

p:first-child {}

Inspringen van elke volgende paragraaf:

p + p {}

Iconen op basis van de url, met als bekendste voorbeeld wel de pdf:

a[href$='.pdf'] {}

Of markeren van https url's:

a[href^="https"]

En een die voor mij toch ook nieuw was, externe links, behalve je eigen domein:

a[href^="http"]:not(a[href*="example"])

Al met al een interessante conferentie die voor mij niet onder doet voor Fronteers, met de kanttekening dat Fronteers wat meer aspecten van Frontend Development belicht.