Aihearkisto: CSS

Uuden Yle Urheilun etusivun ongelmat

Tässä pari kuukautta sitten Yle asetti kaikille lukijoille käyttöön uuden Yle Urheilun etusivun.  Se markkinoi itseään aggressiivisesti ”tuunattavana” eli muokattavana sivuna, joka lienee useimmille lukijoille toiminto luokkaa ”yhtä tyhjän kanssa”. Tai mistäpä minä tiedän, ehkä olen jo antiikkinen kapistus kun haluan etusivun tarjoavan olennaiset toimittajan huolella valikoimat ajankohtaiset aiheet ensin, sitä kun halutessaan osaa kyllä koluta niitä syvempiä sivuja jos haluaa ”tuunausta”. Tuunaus-toiminnon toteutuksen suurin heikkous on se, että se ei tapahdu automaattisesti, vaan käyttäjän tarvitsee nähdä vaivaa. Onko tätä käyttäjätestattu?

Continue reading

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.

Continue reading

CSS-opas alkanut laajentua

Kunhan päivittelen tilannetta, jotta CSS-opas koostuu nyt jonkin sortin yleiskuvan ja historian antavasta alustuksesta, sekä sitten ensimmäisestä varsinaisesta opettavasta kappaleesta. Opas olettaa tässä vaiheessa lukijalta, että on ollut tarpeeksi kiinnostusta selvittää joitakin peruskäsitteitä ja nyt on sitten halua päästä kiinni mahdollisimman nopeasti ns. kunnon tekemiseen. Ja totesin että tehokkain tapa tähän lähestymistapaan on tehdä laatikkomalli tutuksi sekä sitten näyttää, miten monella eri tavalla saa tehtyä täsmälleen saman lopputuloksen.

Hyvänä puolena tällä lähestymistavalla on se, että pystyn myös käymään lävitse itseäni kiinnostavia seikkoja samalla kun vertailen eri taittotapoja keskenään mahdollisimman tasapistävään tyyliin.

Sininen laatikko

Codepenissä tapahtui jotain höpsöä ja kaikki tekivät sinisiä laatikoita eri tavoin. CSS Tricks noteerasi asian toki myös.

Siispä pidin kivaa ja tein kymmenen eri tapaa tehdä sinisiä laatikoita, mutta rajasin vähän pakottamalla itseni pelkkään CSS:ään.

Jotkut tarkkasilmäiset ovat ehkä jo huomanneetkin, että aloittelin CSS-opasta. Sieltä ehkä ilmestyy jotain hienoa tekstiä ja upeita esimerkkejä jossain vaiheessa. Nyt se on vasta alustusraakile.

CSS-leiskan taittotapoja vuonna 2013

Olen pitänyt jonkin tason vapaata HTML:n ja CSS:n maailmasta pari viime vuotta. En ole kauheasti käyttänyt aikaani uusien asioiden opetteluun ja kaiken maailman kokeiluihin. Maailma on kuitenkin edennyt eteenpäin tässä vuosien kuluessa ja tilanne on muuttunut varsin ratkaisevasti kun hyvin vanhat Internet Explorerit ovat päivä päivältä pienempi riesa mielen perukoilla. Tämä on osaltaan saanut innostettua minut päivittämään tietoihini nykyisiä mahdollisuuksia.

CSS-taittotavat

Continue reading

Lajittelujärjestyksen valinta

Yksi asioista jonka koen kusevan mm. monissa verkkokaupoissa on tuotteiden lajittelujärjestyksen valinta. Usein homma menee sillä tavalla, että tuotteet voi lajitella vain yhden säännön mukaisesti (esim. pelkän hinnan mukaan). Toisaalta jos useampi taso on mahdollista valita, niin homma pitää hoitaa käänteisessä järjestyksessä, eli jos haluan vaikka järjestyksen saatavuus, hinta ja nimi, niin tuotteet pitää ensin järjestää nimen mukaan (sivu latautuu uudelleen), sitten hinta (taas sivu latautuu uudelleen) ja lopulta saavatuuden mukaan (ja taas sivu latautuu uudelleen).

Joten sitten leikin vähän CSS:n kanssa: Sort order selector

Tuotteiden lajittelujärjestys

Tekninen toteutus on semmoinen, että taustalla on radiopainikkeita, joihin viittaavat label-elementit. Radionappulat on piilotettu, mutta label-elementtien napsuttelu aktivoi radiopainikkeita. Sitten vaan label-elementtejä siirrellään sen verran nätisti, että käyttäjälle kerrotaan virheelliset valinnat ja ensimmäisiksi kullakin rivillä sijoitetaan se nykyinen valinta.

Käyttöliittymä on isompikokoinen kuin haluaisin, mutta halusin toteuttaa pelkän CSS:n voimalla toimivan ratkaisun tähän hankalaan ongelmaan. jQueryllä sitten voisikin toteuttaa jo aika näppärän käyttöliittymän…