CSS-välilehtien kanssa väkertämistä

CSS-pohjaiset välilehdet ovat tässä kohtaa jo vanhaa huttua monille tekijöille. Niiden toiminta pohjautuu joko :target tai :checked -pseudovalitsimiin, sekä piilotettuihin radionappuloihin.

Välilehtien kanssa on kuitenkin tiettyjä haasteita, jotka tulevat käytännön elämässä eteen:

  • Selainyhteensopivuus: :target ja :checked toimivat vasta Internet Explorer 9 alkaen. IE8 on toistaiseksi vielä tuettavien selainten listalla.
  • Semanttinen järjestys: usein on helpointa tehdä checked-pohjaisten välilehtien HTML sillä tavoin, että radioelementit tulevat ensin, sitten niihin viittavaat label-elementit esim. ul-elementin sisällä ja lopuksi itse sisältö.
  • Sisältöön linkittäminen: mitä jos tietty välilehti tarvitsee avata suoraan sivulle tullessa? Mitä jos viittaus ei olekaan välilehtisivuun vaan elementtiin välilehden sisällä? Tuleeko se näkyville kuten sen pitäisi tulla?

Näiden kaikkien vaatimusten yhdistäminen pelkällä CSS:llä on mahdotonta. IE8 on se pahin riippakivi, joka toivottavasti katoaa tämän vuoden aikana. Sitä ennen meidän kuitenkin edelleen tarvitsee huomioida kyseinen selain ja sitä myöten JavaScript on pakollinen.

Olen tässä vapaita vietellessä miettinyt näiden ongelmien ratkaisua. En vielä ole yhtenäistä kaikkivoipaa täydellisyyttä koettanut väkertää, mutta yksittäiset ongelmat olen kyllä ratkaissut.

Vaihtoehto #1: http://codepen.io/Merri/full/bytea

Tämä toteuttaa välilehdet puhtaalla CSS:llä kaikille uudemmille selaimille. Mukaan on lisätty järkyttävän minimalistinen pätkä JavaScriptiä, jonka avulla IE8, IE7 ja jopa IE6 on otettu huomioon CSS:ssä. Lopputulos toimii yllättäen siis Internet Explorer 6:sta ylöspäin. Jos tukea haluaa rajata, niin koodin kommentit ovat varsin riittävät tuen karsimiseen.

Isoin juttu tässä on se, että kukin välilehti on oma itsenäinen kokonainen rakenne. Eli tässä ei ole käytetty helpoiten tyyliteltävää kolmiosaista ratkaisua! Tästä huolimatta lopputulos näyttää tavanomaisilta välilehdiltä.

Sisältöön linkittämistä ratkaisu ei kuitenkaan ota millään tavalla huomioon.

Vaihtoehto #2: http://codepen.io/Merri/full/qsdza

Tässä elementtien järjestys on toteutettu tyylittelyn kannalta helpolla tavalla: ensin tulevat radioelementit, sitten lista, jonka sisällä on labelit, ja lopuksi varsinaiset sisältölohkot sisältävä pääelementti. Rakenne on siis levällään semanttisesti ajateltuna.

Ykkösjuttu onkin se, että näihin välilehtiin voi linkittää: sekä suoraan itse välilehteen (jolloin oikea välilehti aukeaa) tai välilehdessä olevaan sisältöön, jolloin sivu aukeaa oikeaan kohtaan ja tarvittava välilehti avautuu. Tämä toiminnallisuus on kuitenkin JavaScriptin varassa. Muutoin välilehdet ovat käytettävissä myös ilman JS-tukea, paitsi tietty IE8:ssa. IE8:lle on kohtalaisen paljon omaa JavaScriptiä.