Overslaan en naar de inhoud gaan

CSS Day 2013

CSS Day 2013

Een dag lang CSS-nerden op de Wallen in Amsterdam. In het Compagnietheater werd dit jaar het CSS Day congres gehouden. In sessies van 45 tot 50 minuten werd elke keer een techniek uitgelicht en besproken. Van @font-face tot een sessie van 50 minuten over border-radius.

Programma

De sessies waren verdeeld in sloten van 50 minuten met voldoende ruimte voor pauzes ertussen. De locatie was het compagnietheater in Amsterdam. Op loopafstand van het CS dus prima met het openbaar vervoer te bereiken.

Fonts & texts (Eric Meyer)

Eric Meyer begon met de geschiedenis van de typografie op het internet en de eeuwenoude wens om andere fonts te gebruiken dan de aanwezige systeem fonts. Daarna ging hij over naar een aantal mooi truukjes hoe @font-face te gebruiken. Een tip was om je custom font als eerste lokaal proberen in te laden, voor het geval je bezoeker hem op het systeem heeft staan, scheelt weer een request. Daarna kwamen de unicode selectors aanbod om per karakter een font of stijl aan de kunnen hangen. Dit is nog redelijk experimenteel en werkt bijvoorbeeld niet in Firefox. Daarnaast kan je per familie ook nog eens verschillende fonts aanduiden, dat werkt als volgt:

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: myFont;
  src: local(Arial);
}
@font-face {
  font-family: myFont;
  src: local(Impact);
  unicode-range: U+41-5A, U+61-7A, U+C0-FF;
}

Selectors (Bert Bos)

Voor een gespecialiseerd congres als dit was dit waarschijnlijk een van de meest basis sessies. Over selectors binnen CSS in het algemeen. Een van de weinige dingen die ik opgedaan heb is de selector :target. Hiermee kan je elementen stylen die “getarget” zijn via de # in de url. Verder ging Bert in op de geschiedenis van CSS.

Flexbox (Stephen Hay)

Flexbox, de heilige graal. De oplossing voor heel veel problemen die er nu spelen. Een nieuwe manier voor het opzetten van een layout. Het wordt alleen niet aangeraden om het voor je complete layout te gebruiken maar meer voor aparte onderdelen. De kans op teveel nesting wordt dan vrij groot waarbij je al snel het overzicht kan verliezen.

Filters & compositing (Divya Manian)

Leuk praatje over filters en effecten op HTML elementen. Een van de leukere ontwikkelingen op het web, eentje waarmee desktop applicaties zoals Photoshop binnen een rappe tijd vervangen worden door webapps (voor diegene die bullshit bingo spelen, dat was er eentje). Divya werkt zelf bij Adobe en het is goed om te weten dat ze bij Adobe niet vast blijven houden aan oude apps maar ook veel webapps ontwikkelen.

Variables & conditionals (Tab Atkins)

De grote populariteit van CSS preprocessors toont aan dat heel veel developers functionaliteiten missen in CSS. Zoals bijvoorbeeld variabelen en nesting, dingen die met preprocessors simpel te doen zijn. Tab legde uit dat het niet het doel is van de CSS werkgroep om deze preprocessors bij te blijven of te overtreffen qua functionaliteiten. Sterker nog, ze wachten af welke functionaliteiten populair zijn en proberen die net zo goed of zelfs beter te implementeren in CSS.

Media queries (Daniel Glazman)

Deze sessie ging in op het gebruik van media queries en de bijbehorende instellingen daarvan. Omdat ik gebruik maar van preprocessors en grids generators doe ik zelf vrij weinig met media queries. Desalniettemin was het een leuke sessie. Opvallend is dat veel voorstellen vanuit de specs nauwelijks tot helemaal niet gebruik worden in de browsers.

Animations & transitions (Peter Gasston)

De Flash-killer, CSS animaties en transities. Er zijn tegenwoordig leuke dingen te doen met animaties, helemaal wanneer je ze combineert met filters. Deze sessie ging wat dieper in op de instellingen van animaties en de bijbehorende keyframes.

Border-radius (Lea Verou)

Er waren wat vragen bij de organisatie of ze wel 50 minuten kon vullen met een sessie over border-radius. Achteraf bleek ze nog wel wat meer tijd nodig te hebben. Dit was een van de meest grappige en grafische sessies van de dag. De presentatie was interactief (in de browser) en was ook meteen een sandbox voor code voorbeelden.

Ze ging redelijk diep in op de border-radius-materie waarbij ze ook nog wat animaties en transities erbij haalde.