Blogi — — Tuomas

Näkymiä CSS:n tulevaisuudesta

Julkisivun rakentamiseen voidaan käyttää monia tapoja. Tässä pohdintoja kahdesta tulevaisuudessa yleistyvästä CSS:n layout-moduulista.

Olipa aikoinaan jäänyt opinnäytetyö roikkumaan, mutta päätin keväällä kirjoittaa sen loppuun ja valmistua. Aiheenani oli tylsältä ja tekniseltä kuulostava ”Grid Layout ja Flexible Box frontend-ohjelmistokehyksissä”. Kirjoitinkin tekniikasta ja CSS:n uusista ominaisuuksista ulkoasujen toteutukseen. Samalla työssä hahmottelimme myös G-Worksin tuotantomenetelmien tulevaisuutta.

Viimeiset vuosikymmenet verkkosivustojen ulkoasuja on toteutettu hyvinkin erilaisin menetelmin ja melkoisin purkkaratkaisuin. Lähes kaikkien verkkosivustojen ulkoasu on perustunut 90-luvulta lähtien grideihin. Ongelmana on ollut, että järkevän gridin rakentamiseen ei ole ollut siihen soveltuvia työkaluja. Aluksi käytettiin <table>-elementtejä ja CSS2-standardi (1998) toi mukanaan display ja float -määritykset. Näidenkin käyttöönotossa tosin selainvalmistajat olivat hitaita ja ne tulivat täydellisesti käyttöön kaikissa selaimissa vasta vuonna 2009 IE8:n julkaisun myötä.

Ne toimivat periaatteessa mainiosti, mutta ne lisäävät ylimääräisen kerroksen kehittäjän ja puhtaan CSS:n väliin.

CSS2:n myötä syntyivät myös modernit CSS-frameworkit. Ne toimivat periaatteessa mainiosti, mutta ne lisäävät ylimääräisen kerroksen kehittäjän ja puhtaan CSS:n väliin. Hyvin useassa sivustossa CSS-frameworkia ei tarvitsisi vaan vastaavan rakenteen voi toteuttaa muutamalla rivillä CSS:ää. Kuitenkin monet, kuten me G-Worksilla, käyttävät CSS-frameworkkeja niiden helppouden ja käyttöönoton nopeuden takia.

Nyt Grid Layout ja Flexible Box ovat keksimässä tätä pyörää uudestaan ja CSS-standardia ollaan tuomassa sivustojen tarpeiden tasolle CSS Working Groupin (CSSWG) toimesta. Tämä tarkoittaa natiivia tapaa toteuttaa grid-rakenteita suoraan CSS:llä. Tämä tarkoittaa myös sitä, että verkkosivustojen mukana ei tarvitse aina ladata jättimäistä CSS-frameworkia ja HTML:n sekaan ei tarvitse sekoittaa kasaa CSS:ään kuuluvia ulkoasumäärityksiä*.

*Disclaimer: Ei tarvitse välttämättä frameworkeissakaan, mutta näin ovat monet tehneet.

Grid Layout ja Flexible Box

Grid Layout ja Flexible Box ovat molemmat display-määritykselle annettavia arvoja, jotka vaikuttavat kyseisen elementin ja sen lapsielementtien asetteluun. Ne ovat luonteeltaan hyvin samankaltaisia ja niitä voidaankin hyvin pitkälti käyttää toistensa korvikkeena.

Grid Layoutin standardi määrittelee moduulin seuraavasti: ”a two-dimensional grid-based layout system, optimized for user interface design”. Suomeksi: Grid Layoutilla voidaan toteuttaa verkkosivujen ulkoasujen osia, jotka vaativat elementtien määrittelyn pysty- ja vaaka-akselilla. Käytännössä tämä soveltuu parhaiten esimerkiksi verkkosivun ylätason elementtien (header, footer, sidebar jne.) asetteluun.

Grid Layoutissa on monta erilaista tapaa toteuttaa samannäköinen verkkosivujen rakenne.

Yksi aluksi hämmentävä ominaisuus on moduulin eri syntaksit asetteluiden tekoon. Ruudukon rakenteen ja elementtien sijainnin voi määritellä joko yläelementille tai lapsielementeille. Suosittelen itse kokeilemaan ja tykästymään johonkin merkkaustapaan ja pysymään siinä.

Flexible Box on taas suunniteltu elementtien toteutukseen, jotka toistuvat vain yhden akselin suuntaisesti. Tämä soveltuu yksinkertaisimmillaan esimerkiksi erikokoisten laatikoiden asetteluun riviin (tai pystyyn), niin että elementit venyvät täyttämään koko rivin tilan tai halutessaan rivittyvät seuraavalle riville. Flexible Box elementtien logiikkaan joutuu jonkin verran paneutumaan, jotta kaikissa tilanteissa elementtien venyminen/kutistuminen käy selväksi. Erittäin hyödylliseksi tämä on koettu esimerkiksi navigaatioiden toteuttamisessa, kun usein ei vielä tiedetä montako linkkiä navigaatiossa on.

Molemmissa moduuleissa on myös mahdollista vaikuttaa elementtien sijaintiin akselilla helposti. Esimerkiksi aikaisemmin hankalaksi koettu vertikaalinen keskittäminen on helppoa molemmissa moduuleissa. Elementtejä voi myös esimerkiksi tasata (justify) käytettävissä olevan tilan mukaan.

Responsiivisuuden toteuttaminen Grid Layoutilla on vaivatonta.

Elementtien järjestys HTML-koodissa ei myöskään enää vaikuta niiden järjestykseen sivulla, vaan ne ovat täysin määriteltävissä CSS:n avulla. Tämä ajatusmalli voi olla aluksi outo vanhaan logiikkaan tottuneelle, mutta on hyödyllinen esimerkiksi lukulaitteita tai hakukoneita huomioitaessa.

”Tämä ajatusmalli on hyödyllinen esimerkiksi lukulaitteita tai hakukoneita huomioitaessa.”

Responsiivisuuden toteuttaminen moduuleilla on myös melko selkeää ja CSS-frameworkeja yksinkertaisempaa. Media Queryt mahdollistavat breakpointien määrittämisen kuten ennenkin, mutta nyt koko sivuston ulkoasu on helppo järjestää uusiksi eri ruutuko’oilla.

Käyttöönotto ja tulevaisuus

Grid Layoutin suurin ongelma on vajavainen selaintuki. Chromessa ja Firefoxissa on mahdollisuus ottaa selainkohtaisesti Grid Layout käyttöön, joka mahdollistaa ominaisuuden testaamisen, mutta ei julkista käyttöönottoa.

Flexible Box on selvästi Grid Layoutia valmiimpi käyttöönottoon. Kaikki modernit selaimet tukevat sitä ja myös IE:ssä olevat ongelmat ovat verrattain marginaalisia ja ratkaistavissa. Flexible Boxille löytyy myös mainioita tutoriaaleja alkuun pääsemiseksi.

Jo nyt G-Worksissa sisällytämme Flexible Boxia projekteissamme ja olemme vakuuttuneita sen mahdollisuuksista. Myös suositut CSS-frameworkit kuten Bootstrap ovat mahdollistaneet Flexible Boxin päällekytkemisen. Grid Layoutin tukea odottaessa sillä voidaan toteuttaa esimerkiksi sticky footereita tai yksinkertaisia toistuvia laatikkoelementtejä.

Flexboxiakin enemmän annan painoarvoa Grid Layoutin vaikutukselle CSS:n tulevaisuuteen. Olemme päässeet vasta toteuttamaan testimielessä verkkosivuja Grid Layoutilla, mutta se vie CSS:n toteutusta entistä selkeämpään suuntaan. Harras toiveemme on, että selainvalmistajat uskaltavat tehdä hypyn tulevaisuuteen ja kytkeä sen oikeasti päälle. Itse uskon, että Grid Layout on se puuttuva palanen ulkoasujen toteutuksessa.

Myös CSS-standardin kehittäjät uskovat tähän, Tab Atkins Jr. sanoi CSS Day konferenssissa: ”Näiden kahden moduulin yhdistelmän avulla voit ratkaista lähes kaikki mahdolliset ulkoasuvariaatiot ja en tiedä onko minulla enää tehtävää”. Onneksi kehittäjät eivät kuitenkaan oikeasti jätä työtä siihen. CSS Extensionit ovat mielenkiintoinen idea, samoin Flexbox 2 on jo ideoinnissa ja JavaScriptiä ollaan tuomassa mukaan luomaan uusia mahdollisuuksia.

Kuten jo johdannossa mainitsin, moduulit eivät tuo paljonkaan uutta CSS-frameworkien ominaisuuksiin nähden, mutta ne ovat tulevaisuudessa Se Oikea Tapa™ toteuttaa ulkoasuja. Koska CSS-frameworkitkin ovat siirtymässä kokeilemaan näitä moduuleja, on niiden yleistyminen hyvin todennäköistä.

CSS:n tulevaisuus näyttää vihdoin hyvältä.

Mainiot cheatsheetit CSS-Tricksiltä moduuleihin:
A Complete Guide to Flexible Box
A Complete Guide to Grid

Ja itse opinnäytetyön löydät halutessasi Theseuksesta.

Tuomas Velling Johtava ohjelmistosuunnittelija, partner

Tuomas vastaa G-Worksin ohjelmistotuotannosta ja kaitsee ohjelmointiopetuslapsiaan kohti parempaa koodia.