CSS Regions käyttöön
Taitto-ohjelmissa on printtiä tehtäessä ollut mahdollista juoksuttaa tekstiä kentästä toiseen jo ammoisista ajoista lähtien. Webissä vastaavaa tekniikkaa ei ole ollut. Eikä oikeastaan ole vieläkään.
Asemointialueille juoksevan tekstin tuomiseksi webiin on kuitenkin hankkeita. CSS Columns on yksi vaihtoehto ja jo varsin toimiva. Vielä hyvin pitkälti kehityksen alkuvaiheissa on CSS Regions. Tässä blogikirjoituksessa on pikainen katsaus jonnekin kauas tulevaisuuteen, jossa tekstin ja sisällön asemointi voisi onnistua printin kaltaisesti. Kunhan teknologia kypsyy, voi erityisesti julkaisualalla olla kiinnostusta tämän käyttämiseen.
Selaintuki
Selaintuki, mikä selaintuki? Jonkinlaista tukea ominaisuudelle kyllä löytyy mutta hyvin vähäisesti. Älä siis edes kuvittele, että tätä tekniikkaa voisi käyttää tuotannossa. Propelipäät voivat leikkä ja testailla. Se on sekä hauskaa että kehittävää. Tällä hetkellä selaintuki on jotakuinkin seuraava (muista, että muuttuu koko ajan):
- IE 10 osittain prefixillä
- IE 10 Mobile osittain prefixillä
- Safari (webkit) prefixillä
- Safari iOS (webkit) prefixillä
- Muut Ei tukea
Chromen pitäisi tukea tätä jos käy enabloimassa experimentaaliset ominaisuudet selaimen asetuksissa. Kirjoita osoiteriville about:flags ja valitse Enable Experimental Web Platform Features. Sekin toimii vain jos Chromesi on riittävän uusi. Itse käytän testiin webkit nightly buildia.
Tein pienen demon, joka sekin toimii ainoastaan webkit selaimen nightly build versiolla. Voi toimia muokattuna IE10:llä ja Chromella mutta en ole testannut. Voit ladata ”testiselaimen” osoitteesta http://nightly.webkit.org/
CSS Regions, miksi?
Ajatuksena on, että selain osaisi tuoda sisällön CSS tiedostossa määriteltyihin elementteihiin sivun renderöinnin aikaisesti. Responsiivisissa toteutuksissa tällä saavutettaisiin joustavasti kentästä toiseen juokseva sisältö.
Lainaus spesifikaatiosta ” The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules such as the Multi-Column Module [CSS3COL] or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions where content flows.”
Sisältö voisi luontevasti juosta asemointielementeistä toiseen vaikkapa tabletjulkaisussa laitteen asentoa muutettaessa.
DOM ja sisällön järjestys
Esimerkistäni käy ilmi kuinka sivulle tuotava teksti on vasta asemointiin käytettävien elementtien jälkeen html-tiedostossa. Tämä osoittaa sen kuinka sisältö haetaan erikseen ”näyttöelementteihin”. Tämähän tarkoittaa edelleen sitä, että sivulla voi olla useampia sisältöjä ja niille omia asemointielementtejä mikä mahdollistaa huomattavasti monipuolisemman taiton. Esimerkissäni on vain yksi sisältö, sillä halusin pitää demon edes kohtuullisen pienenä.
Huomaa kuinka varsinainen sisältö on omassa <div> -elementissään (class=”content”) mutta kuten seuraavassa kuvassa näet CSS koodista, sisältö näytetään yllä olevissa erillisissä alueissa <div>.
Ja selaimessa sivu näyttää tällaiselta (sillä edellytyksellä, että käytössäsi on tekniikkaa tukeva selain).
CSS muotoiluja
Kuten esimerkistä näkyy – Onnistuin lisäämään siihen Comic Sanssia kuten kaikkiin hyviin designeihin kuuluu 😉 Eli CSS Regions asemointimallin käyttö ei estä muiden CSS muotoilujen käyttöä. Muotoiluilla voidaan tehdä julkaisusta entistä enemmän perinteisen julkaisun nälköinen, jos sellaista tahdotaan.
Voit kokeilla demoa täällä http://seloit.fi/demos/cssregions/regions.html . Mutta muista, se toimii vain jos käytössäsi on edellä mainitsemani übermoderni selain. Ellei sinulla ole sellaista voi katsoa tästä pienen videopätkän, jossa näytän miten sisältö vierittyy. Jos haluat tutustua Demon koodiin voit ladata sen tästä.
Lopuksi
Mikä tämän merkitys sitten on sinulle? No, ei ehkä tänään vielä kovin paljon mutta on hyvä tietää mitä on tulossa ja suunnitteilla. Silloin tällöin täytyy katse suunnata tarpeeksi kauas horisonttiin ja vähän ylikin jos mahdollista. Täytyy tietää mihin ollaan matkalla jotta voisi suunnistaa näkyvissä olevassa maastossa.
Etene askel kerrallaan mutta katse kaukana horisontissa.
Ensi kerralla kirjoittelen jotain vähän konkreettisempaa ja tähän päivään liittyvää.