Blogg

CSS, öl och ångest i Amsterdam

För den gränssnittsintresserade har jag glädjen att föra vidare kunskapen jag och min kollega Anton lapade i oss under en dag dedikerad till en av våra favorittekniker - CSS Day 2015 i Amsterdam.

Artikelverktyg:

Schemat var fullspäckat och hela åtta dragningar hanns med. Dessutom avslutades alla med en frågestund kurerade av Chris Heilmann.

Responsiva principer

Dagen inleddes med en filosofisk dragning om responsiva principer som man som gränssnittare bör ha i åtanke. Responsiv design handlar inte om flexibla grids, bilder och media queries utan om användare och deras behov. Naturligtvis slutanvändare, men i den alltmer spretiga och komplexa gränssnittsvärld vi lever i måste vi även tänka på andra utvecklare som användare också – användare av koden vi skriver.

Flexbox

Nästa dragning på tur handlade om Flexbox; ett relativt nytt layoutkoncept man kan använda för att lösa några av de vanligaste svårigheterna vi historiskt sett har haft i CSS, t.ex. att få element att bli lika höga, centrera saker vertikalt m.m. Webbläsarstödet är bra och en ytterligare fördel med Flexbox är att man kan fortsätta att använda t.ex. floats som fallback – saknas stöd för Flexbox används float i stället.

För dom som inte hade hunnit jobba så mycket med Flexbox erbjöd dragningen en bra genomgång av tekniken. Kika definitivt närmare på Flexbox om du inte redan gjort det!

Typografi

Det var inte så länge sedan vi endast kunde använda systemteckensnitt, men idag känns det som ett minne blott. Dock saknar webben fortfarande många andra typografiska finesser som andra medier tar för givet, t.ex. vettig kerning, ligaturer, avstavning, small-caps som inte ser ut som skräp med mera. Men räds icke! Redan idag kan vi i många webbläsare skriva CSS som gör att mycket av ovan nämnda fungerar. Firefox verkar ligga i framkant men ligaturer och kerning kan man numera aktivera i alla moderna webbläsare.

Jag är extremt taggad på att fortsatt följa denna utveckling då jag lätt blir varm i hela kroppen när jag ser riktigt snygg typografi.

Färg

Den här dragningen höll sig på en ganska låg nivå så jag nöjer mig med att nämna två saker. Den första är background-blend-mode som har förvånansvärt bra support i webbläsare. Med det kan du manipulera bilder på samma sätt som med blending options i t.ex. Photoshop: screen, overlay, darken etc. Den andra saken är att man bör fundera på att använda HSL (hue-saturation-lightness) i stället för RGB om man, som många hos oss, designar direkt i webbläsaren och vill kunna tweaka färger utan att behöva hoppa in i bildredigeringsprogram.

Grid layout

Här presenterades ännu ett nytt layoutkoncept. Så pass nytt att i stort sett ingen webbläsare stöder det ännu och specen befinner sig i ett ganska tidigt stadie. Enkelt sammanfattat kan man beskriva konceptet som en gammal god tabellayout från 90-talet, men designat på rätt sätt. Eller, eftersom specen är så pass ung, finns det vissa barnsjukdomar som vi får hoppas löses innan det börjar implementeras i webbläsare. T.ex. känns sättet man jobbar med mellanrum mellan celler i griden klumpigt (det är bara mindre celler) och jag ser ett problem med att man inte kan definiera antalet rader i griden. Mer information finns på Grid By Example.

CSS framtid..

...eller som nästa bild i dragningen sammanfattade det: "The present state of CSS isn’t CSS". Med handuppräckning visade det sig att endast sex personer av ca. 300 skrev “vanlig” CSS, utan pre- eller post-processor, en tanke som är lite skrämmande.

Personligen ser jag tre stora problem:

  • Risken att utvecklaren inte vet vad för kod som genereras i slutändan.
  • Ett lager ovanpå CSS bidrar till den ständigt växande “stacken” man, speciellt som ny i branschen, måste lära sig att behärska.
  • Att man introducerar flera alternativa sätt att komma fram till en lösning på ett problem (som det ofta finns i programmeringsspråk) vilket skapar risken för en spretig kod som är svår att sätta sig in i.

Men jag ser också några tydliga fördelar:

  • Variabler. Dels p.g.a. DRY, och dels för att konfiguration erbjuder ett säkrare och snabbare alternativ till search & replace.
  • Använder man den på rätt sätt kan man med en pre/post-processor skriva CSS som blir tydligare för andra att förstå (t.ex. extenda in en clearfix direkt i en regel i stället för att ha en :after-regel några rader under den första)

Vad som väger tyngst är nog från fall till fall (eller projekt till projekt). Det viktigaste är att man tänker på personerna som påverkas av beslutet (dig själv, dina gränssnittskollegor, dina framtida kollegor, dina kunder och deras slutanvändare m.fl.). Personligen lutar jag mot att nackdelarna väger tyngre i en situation som för oss på en webbyrå med många personer och med ansvar för många webbplatser, gamla och nya. Samtidigt tycker jag att fördelarna väger tyngre när jag jobbar med privata projekt där jag är ensam utvecklare.

Bakom CSS-kulisserna

Näst på tur väntade en inblick i hur en layoutmotor i en webbläsare fungerar lite mer i detalj. Vi fick också höra hur mycket tid och möda en specskrivare lägger på att definiera vad auto ska, och inte ska, göra. Otroligt kul att få lära sig mer om något som ligger så nära det man själv jobbar med, men som i stort sett har varit en svart, magisk låda.

cssday-netrelations-2015

En avslutande verklighetscheck

Sist men inte minst kom Stephen Hay upp på scenen och spred lite ångest. Han klankade ner på de flesta koncept såsom BEM, SMACSS och OOCSS, på de flesta delar utav “stacken” (“Tools don’t solve problems anymore; they have become the problem") och hur vi arbetar idag i allmänhet. Han menar att modularisering uppmuntrar en överdesign som är onödig för många webbplatser. I stället för att ha en hög med tekniker och koncept som man slentrianmässigt börjar projektet med bör man utgå från ingenting och addera det som just den här webbplatsen har nytta av.

Och med den tankeställaren var konferensen över, men dagen bjöd på mingel följt av några lokalbrygda öl på Bruowerij de Prael.

På Lanyrd finner du filmer och presentationer från CSS Day.

Är du nyfiken på hur vi kan hjälpa dig med dina digitala utmaningar?

Välkommen att kontakta vår försäljningschef Filip Berglund så berättar han mer.

0 kommentarer

Skriv kommentar