CSS grid nedavno je postao dostupan u svim modernim internetskim preglednicima. Vrijeme je to u kojem je Microsoftov Edge izašao u svojoj 16. verziji te se pridružio Mozillinom Firefoxu, Googleovom Chromeu, Appleovom Safariju te Operi, koji su već ranije podržali novu CSS grid sintaksu. U ovom popisu najčešće korištenih internetskih preglednika nedostaje samo Microsoftov Internet Explorer, preglednik koji u svojim zadnjim verzijama (10 i 11) podržava originalnu, ograničenu i prefiksiranu CSS grid sintaksu. Razlog zašto je Internet Explorer ponovno korak iza konkurencije, u najmanju je ruku ironičan, a leži u činjenici da je upravo Microsoft prvi predložio CSS grid specifikaciju W3C (World Wide Web) konzorciju.

Godina je 2012., Microsoft poziva dizajnere i programere da razvijaju aplikacije za njihovo novo sučelje Metro za operacijski sustav Windows 8. Programira se u ​novom Microsoftovom Visual Studiju u proširenju Microsoft Blend, namijenjenom za UX dizajn. Pogled u CSS kôd iza pozicioniranja elemenata unutar Metro dizajna otkriva do tada nepoznatu grid sintaksu, koju Microsoft ugrađuje u core operacijskog sustava, s ciljem da Metro aplikacije mogu raditi i izvan internetskog preglednika. Logički ispravan potez u to vrijeme, pokazat će se kao promašaj u godinama koje slijede. Zajednica prihvaća i proširuje sintaksu, no nemogućnost Microsofta da promjene implementira unutar Internet Explorera, bez mijenjanja corea operacijskog sustava ostavlja preglednik u nezavidnom položaju.

20 godina hakiranja

Od 1989. godine, kada je Tim Berners-Lee objavio prvu web-stranicu i 1994., kada je Håkon Wium Lie predložio prvu verziju CSS-a (Cascading Style Sheets) za vizualno njihovo uređivanje pa sve do danas, web-dizajn nikad nije imao mogućnost pozicioniranja grupa elemenata na stranici horizontalno i vertikalno. CSS je oduvijek bio zamišljen i proširivan tako da vizualno podrži digitalizaciju postojećih dokumenata, koji su u pravilu bili nizovi tekstova i slika jednih ispod drugih (uz neke iznimke da se određeni manji pojedinačni elementi mogu pozicionirati jedni pokraj ili oko drugih).

No, kako su računalni ekrani s vremenom postali sve širi i podataka za prikaz bilo je sve više, pojavila se potreba da se određene grupe elemenata na stranici pozicioniraju jedni pokraj drugih. Kako CSS sintaksa nije poznavala potrebu za horizontalnim pozicioniranjem grupa elemenata, zajednica je tijekom godina kreirala mnoštvo načina kako to postići. Od tablica, preko floatanja i inline-blokova pa sve do flexboxa, svi ti dostupni načini koji se danas koriste za pozicioniranje grupa elemenata, zapravo su hakiranje – niti jedan od njih nije ispravan niti preporučen. Sva danas dostupna CSS sintaksa rađena je isključivo za rad sa sadržajem i jednom dimenzijom, nikada nije bila zamišljena da služi za strukturiranje prezentacije, niti u službi dvije dimenzije.

Danas su sve web-stranice koje imaju pozicionirane grupe elemenata zapravo pokušaji da se preglednik natjera prikazati nešto što nikada nije bilo zamišljeno da tako radi. Twitterov razvojni okvir Bootstrap uvelike je popularizirao upotrebu velike količine HTML (HyperText Markup Language) kôda i CSS klasa, kojima se postiže efekt stupaca, odnosno vertikalnog grida u koji se potom mogu stavljati međusobno strukturirani elementi. Pojava pojma clearfix, koji osigurava da element (koji u sebi ima float elemente koji služe za horizontalno pozicioniranje) ne izgubi svoju visinu ili postavljanje font-sizea na 0, kako bi se postigao inline-block horizontalna pozicioniranja najbolje pokazuje razinu istrganosti trenutačno najpopularnijih rješenja koja se sigurno mogu koristiti u svim relevantnim preglednicima. Pojava CSS flexboxa uvelike je olakšala pozicioniranje elementa horizontalno i vertikalno, no ni on nikada nije bio zamišljen da služi za strukturiranje cijele prezentacije.

Pet godina razvoja

Posljednjih pet godina specifikacija CSS grid bila je razvijana i testirana iza zastavica u komercijalnim preglednicima, odnosno u posebnim verzijama namijenjenim isključivo web-razvoju. Drugim riječima, bilo je potrebno otići u postavke preglednika i omogućiti prikaz grid sintakse, odnosno morala se skinuti posebna verzija (Chrome Canary, Firefox Developer Edition, Safari Technology Preview...). Iz višegodišnje agonije koju je prouzročio CSS flexbox, koji se postupno uvodio i testirao preko CSS prefiksa u komercijalnim preglednicima, odgovorni su naučili da to nije bio pravi način za razvijanje i testiranje novih stvari od šire razvojne zajednice.

Specifikacija CSS grid zbog toga je vjerojatno dobila puno manje komentara i potpore šire razvojne zajednice nego što bi to bio slučaj da se postupno uvodila u komercijalne preglednike. No, s druge strane, ovakvim pristupom postigli su se ujednačenost i nesmetan razvoj od zainteresirane razvojne javnosti te se osigurala mogućnost puštanja u produkciju kada se za to stvore odgovarajući uvjeti. I stvorili su se; u razdoblju od nekoliko mjeseci svi moderni komercijalni preglednici dobili su podršku za novu sintaksu. Internetski su to preglednici koji se u pravilu sami ažuriraju u pozadini tako da se, u svega nekoliko mjeseci i u trenutku pisanja ovog članka, podrška za novu CSS grid sintaksu popela na 75% korisničkih uređaja na svjetskoj razini (caniuse.com).

Neograničene mogućnosti

Prvi put od početka implementacije web-dizajna u internetske preglednike moguće je semantički pozicionirati strukture elemenata bilo gdje na stranici, bilo to horizontalno i/ili vertikalno. Dosad se grid radio prema principu dodavanja sadržaja kojem se potom određivala širina, no nova CSS grid sintaksa izlazi iz tog modela i odvaja vizualnu strukturu od samog sadržaja. Grid pozicioniranje i sadržaj koji ide u njega međusobno nisu povezani veličinom. Kako elementi grida postoje i bez postojanja sadržaja u sebi, prazne prostore moguće je kreirati bez nepregledne šume HTML i CSS kôda u pozadini.

Elemente grida moguće je proizvoljno premještati bilo gdje po gridu, međusobno ih preklapati ili spajati, u cilju dobivanja nove strukture za sadržaj koji se u njemu nalazi. Specifikacija CSS grid rađena je s responsive dizajnom na umu, što u prijevodu znači da je podršku za različite veličine ekrana, s različitim pozicijama grupa elemenata, vrlo jednostavno postići. Također, ako je potrebno, moguće je definirati grid unutar grida te za one upućenije u flexbox, element koji je definiran kao grid, koji sa svojim podelementima poprima ujedno i flex obilježja, što dodatno proširuje paletu mogućnosti pozicioniranja. Uz novu sintaksu za definiranje grida te postojeću za flexbox koja je nadopunjuje, u moderne preglednike došla je i nova jedinica fr za određivanje veličina te funkcije repeat i minmax koje dodatno proširuju dizajnerske mogućnosti definiranja struktura pomoću CSS grida.

Promjena paradigme

“Web-stranica jednako treba izgledati u svim preglednicima”, glasi demistificirana rečenica koju klijenti upućuju mnogim agencijama, pa tako i nama u Krikstudiju. No, zašto web-stranice moraju jednako izgledati u svim internetskim preglednicima? Izgleda li responsive dizajn jednako na različitim širinama uređaja? Izgledaju li boje jednako na ekranima različitih proizvođača? Možda je konačno došlo vrijeme da se promijeni paradigma web-prodaje i razvoja te nove mogućnosti počnu implementirati u produkcijska rješenja, bez straha od činjenice da stranice neće raditi jednako (ili uopće) u svim internetskim preglednicima. Upotreba CSS grida nikako ne znači da treba raditi dvije verzije stranice.

Potrebno je samo osigurati da se ona, u onom malom broju preglednika u kojima grid neće raditi, ne prikazuje istrgano. No, ta “neistrgana” stranica nikako ne mora biti identična onoj s gridom. Zašto se agencije i razvojna zajednica stalno prilagođavaju onom malom broju korisnika koji su ostali u nekom prošlom stoljeću internetskih preglednika i ne znaju, ne mogu ili ne žele bolje? Nužno je prestati s tom politikom i fokusirati se na većinu onih koji prihvaćaju promjene. Takvim korisnicima pokazat će se bolje korisničko iskustvo, koje se temelji na modernim rješenjima, a onaj mali broj korisnika, koji isto iskustvo tehnički ne mogu prikazati, dobit će vizualno nešto jednostavniju verziju. Mali je to kompromis u novoj paradigmi, no veliki iskorak za prihvaćanje promjena prema prosperitetu svih njegovih sudionika i budućnosti preglednika kao internetske platforme za iduće generacije rješenja.

Terminologija – Mala škola CSS grid naziva

NAPOMENA: Ovaj tekst je izvorno objavljen u časopisu Mreža