HTML og CSS: To skridt frem og et tilbage, men helt klart den rigtige retning!

Hvad?

En af udfordringerne ved at designe et lækkert website er at HTML og CSS ikke tidligere har haft direkte understøttelse for mange af de ting man forventer af et moderne design. Det gælder alt fra kolonne og strukturerede layouts til skygger og runde hjørner. For at kunne lave avancerede layouts har vi måtte være kreative i forhold til brug af HTML og CSS, hvor meget har været muligt ved at bruge elementer og styling til sit yderste. Den slags ”hacks” kommer med en pris, da det har indvirkning på hvor svært et site er at udbygge, vedligeholde og hvor godt det performer.

Hvorfor?

I forhold til vedligeholdelse har det som udgangspunkt udviklerens og designerens problem, men i sidste ende også kundens. Den tid der går med at få et design til at fungere på tværs af browsere er tid der enten koster i kroner og ører eller er tid der går væk fra at udvikle funktionalitet. Performance omkostningerne har længe været set som bagateller, da det ikke har været mærkbart på en hurtig internetforbindelse. Idag kommer en stadig større del af trafikken fra mobile enheder, og så har det pludselig stor betydning for brugsoplevelsen.

Hvordan?

CSSMeget naturligt er en række af de nye dele af HTML5 og CSS3 derfor møntet på at browserne skal have indbygget understøttelse for at udtrykke de elementer som indgår i et moderne design. Noget af det mest væsentlige, i mine øjne, er at man får mulighed for at definere grids, kolonner og flexboxe – hvor det sidste nok er det mindst åbenlyse at forstå uden uderligere forklaring. Det gennemgående tema er at disse features understøttes delvist, så man er nød til at træffe nogle valg undervejs. Mulighederne falder ofte inden for 3 kategorier. Kan leve med at der vil være forskelle browserne imellem? Vil man bruge et polyfill der simulerer understøttelse i de browsere der ikke har det? Eller vil man være kreativ som man har været hidtil og lave noget som virker men har førnævnte ulemper?

Grid layouts – det vi drømmer om men ikke må få endnu

Et hurtigt kik på caniuse.com afslører at grid layouts desværre ser ud til at have meget lav prioritet hos browser producenterne, da det kun er IE der har nogen kendte planer om at implementere standarden – og det er først i kortene i forhold til IE10. Så selvom standarden definerer et format vil jeg lade det være en øvelse at google mere om emnet 🙂

Ideen bag grid layouts er at man i CSS kan definere et grid og angive for de forskellige elementer på siden hvor i det grid de skal vises. Det er super fleksibelt og ligger op af den tankegang man bruger andre steder end på web, som f.eks. i Silverlight og WPF applikationer. Det afspejler meget direkte den måde de fleste sites er opbygget op på, så det er en del af HTML5 specifikationen som jeg ser frem til bliver implementeret.

Multi-column layouts

Multiple column layouts er heldigvis en anden historie, da det har meget bred understøttelse selvom det kræver vendor-prefixes. Det er her faktisk kun er IE der halter efter og igen angiver IE10 som første version der vil understøtte det. Vil man benytte multi column layouts er det derfor relevant at spørge sig selv om det er acceptabelt at have IE som en undtagelse, da det i mange tilfælde ikke er kritisk hvis teksten ikke opdeles i kolonner. Hvis det ikke er acceptabelt, så findes der et polyfill, som ved hjælp af javascript tilbyder et fallback der virker i IE. Syntaxen er nem at gå til, så lad os tage et hurtigt illustrativt eksempel.

div.twoColumn
{
-moz-column-count:2;
-moz-column-gap:50px;
-moz-column-rule:1px solid black;
-webkit-column-count:2;
-webkit-column-gap:50px;
-webkit-column-rule:1px solid black;
}

Eksemplet vil dele div-tags op i to kolonner med 50px imellem dem og med en sort lodret streg til at adskille dem. Desværre betyder vendor-prefix at vi er nød til at gentage det for hver browser type.

Som man kan se giver det en god fleksibilitet i forhold til at ændre layout af tekst, og det gør at man nemt kan give en oplevelse i stil med at læse en avis.

Flexboxes

Med flexboxes er historien næsten den samme i forhold til understøttelse som ved multi-column layouts – den primære forskel er at Opera ikke har understøttelse endnu. Der findes polyfills så det er muligt at benytte dem i IE og Opera. Flexie.js har iøvrigt en legeplads hvor man kan prøve hvordan flexboxes fungerer. Deres legeplads er uden tvivl et bedre eksempel end jeg lige kan strikke sammen, så prøv at brug et par minutter til at lege med det.

Som man kan se giver flexboxes mulighed for at styre hvordan et antal bokse opfører sig i forhold til hinanden – hvordan de placeres, hvor store de er og selv hvilken rækkefølge de står i. Til moderne fluent layouts giver flexbokse derfor nogle rigtigt gode muligheder, og de kan bruges til at løse nogle af de samme udfordringer som f.eks et grid layout ville kunne.

Konklusion

Som titlen på denne blogpost afslører, og som eksemplerne viser, så er det desværre sjældent nogen helt glat oplevelse når standarder udvides. Det ender derfor med nye udfordringer i at vælge hvornår man vil med på vognen, og om man synes at to skridt og et tilbage er fremdrift nok til at man vil med. Personligt mener jeg selv at vi har et ansvar for at være med til at trække i den rigtige retning, og lade vores handlinger tale – men det er naturligvis altid en afvejning hvornår man præcis synes at teknologi er modent nok. Heldigvis hjælper mobil-revolutionen os på vej, da nogle fordele bliver mere tydelige, og den høje udskiftningsfremvens der er på telefoner gør det muligt at “aflive” ældre browsere.

Christian Holm Nielsen
Vertica A/S

Kategorier: Design, Frontend, Mobil, Udvikling

Tagged as: , ,

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s