Monet webbisivut noudattavat pohjimmiltaan samaa rakennetta. Ylhäällä on otsake, sisältö on jaettu sarakkeisiin ja alhaalla saattaa olla alatunniste. Tuleva HTML5-standardi ottaa tämän huomioon ja tarjoaa mm. erilliset header, nav, article ja aside-tagit. Näiden avulla sivun sisällön voi jaotella loogisesti.

Asiaan löyhästi liittyen, CSS3 tarjoaa tulevaisuudessa myös oman ratkaisunsa siihen, miten teksti voidaan jakaa sarakkeisiin:

DIV {
    column-count: 2;
    column-width: 12em;
    column-gap: 1em;
}

Tämä määrittely esimerkiksi jakaisi DIV-elementin kahteen 12em leveään sarakkeeseen, joiden väliin jää 1em:n rako. (Lisää aiheesta W3C:n luonnostelmassa: CSS3 multi-column layout). Standardeja työstävä W3C on kuitenkin tunnettu hitaudestaan, joten molempia uudistuksia saadaan odottaa vielä.

Yahoo UI Grids CSS

Grids CSS on osa laajempaa Yahoon käyttöliittymäkirjastoa. Se on käytännössä yksittäinen CSS-tiedosto, jonka avulla voidaan helposti toteuttaa erilaisia layoutteja. Grids tarjoaa eri levyisiä templateja, jotka on sovitettu yleisimpiin monitorien resoluutioihin. Leveyden ja sivun jaottelun voi toki myös päättää itse. Sivua pystyy jakamaan sarakkeisiin yksinkertaisilla elementeillä, joiden leveydet on määritelty suhteellisesti, esimerkiksi 1/3 - 2/3.

Nopea esimerkki:

<body>
  <div id="doc">
    <div id="hd"><!-- header --></div>
    <div id="bd"><!-- body -->
      <div id="yui-main">
        <div class="yui-b">
          <div class="yui-g">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="ft"></div> <!-- footer -->
  </div>
</body>

Ylläoleva määrittely tuottaa tällaisen rakenteen. Myönnettäköön että sisäkkäiset yui-main, yui-b, yui-g -määrittelyt näyttävät aluksi vähän pelottavilta. Rakenne on kuitenkin selkeä:

  • yui-main: kertoo että tämän sisällä olevat yui-b elementit nousevat sivulla ylimmäksi. Tämä ansiosta elementtien visuaalinen järjestys ei riipu lähdekoodissa olevasta järjestyksestä.
  • yui-b: B niin kuin "Block". Jakaa sivua vaakasuunnassa.
  • yui-g: grid, jakaa elementin pystysuunnassa kahtia. Puoliskoiden leveyksiä voidaan hallita erikois-grideillä, esimerkiksi yui-gd jakaa osat suhteessa 1/3 - 2/3, yui-ge suhteessa 3/4 - 1/4 jne.
  • yui-u: perimmäinen yksikkö, jonka sisälle sijoitetaan varsinainen sisältö.

Koska leveydet ovat suhteellisia, voidaan yksittäinen yui-u -elementti aina korvata grid-elementillä (yui-g) ja jakaa se vielä pienempiin osiin. Jos rakenne ei tunnu heti aukeavan, tarjoaa Yahoo Grid Builderin, jonka avulla rakennetta voi suunnitella visuaalisesti.

Hyödyt

Mitä hyötyä Grids CSS:n käytöstä on verrattuna itse määriteltyyn sivurakenteeseen? Tärkein on mielestäni suunnittelun nopeus. Normaalin sivun prototyypin voi koostaa helposti koskematta itse css-tiedostoon. Toinen on yhteensopivuus. Yhdistettynä Yahoon Reset CSS:n kanssa saatu lopputulos näyttää kaikilla selaimilla samalta, ilman kikkailua ja selainkohtaisia CSS-sääntöjä. (Yahoo hoitaa kikkailun puolestasi).

Kokeile tätä kun seuraavan kerran suunnittelet uutta layouttia. Yahoo UI Libraryyn kuuluu myös monia muita hyödyllisiä palikoita, eesimerkiksi javascript-kalentereita ja AJAX-wrappereita. Näistä ehkä lisää myöhemmin.

PS. Levitän CSS-suunnittelun sanomaa osittain siksi, että töissä tekemäni Grids-layout oli eräänä päivänä muutettu taulukko-layoutiksi, joka mm. meni Firefoxilla rikki :) . Tekemistä riittää...

Kategoria: web-kehitys