Pieni huomio tapahtumallisista pseudoluokista

24.4.05 kl2005 21:56

Jeremy Keith kirjoittaa verkkopäiväkirjassaan tiettyjen pseudoluokkien periaatteellisista ongelmista. Keithin mukaan esimerkiksi hover- ja focus-pseudoluokkien avulla toteutetut visuaaliset efektit kuuluvat toiminnallisuuden puolelle, joten ne tulisi toteuttaa DOM-skriptauksen avulla. Hän on täysin oikeassa, mutta hänen näkökulmansa muodostaa tiettyjä ongelmia.

Koska web-kehittäjien tulisi pitää esitystapa ja toiminnallisuus erillään, he eivät saisi käyttää tapahtumakäsittelijöinä pidettäviä pseudoluokkia CSS-koodauksessa. Sen sijaan heidät tulisi käyttää JavaScriptiä elementtien ulkonäön muuttamiseen käyttäjän toimien perusteella. Kuitenkaan - koska esitystapa ja toiminnallisuus on pidettävä erillään - he eivät missään tapauksessa saisi sotkea skriptin koodiin mitään ulkoasumääreitä. Parhaana toteutustapana voitaisiin pitää skriptiä, joka muuttaa elementin luokkaa esimerkiksi käyttäjän siirtäessä kursorin sen päälle. CSS-koodi muuttuu parhaassa tapauksessa vain yhdellä merkillä: 

/* Vanha tapa */
a, a:link {
	color: blue;
}
a:hover {
	color: red;
}
/* Uusi tapa */
a, a:link {
	color: blue;
}
a.hover {
	color: red;
}

Lisäksi on tietysti DOM-skripti, joka vaihtaa a-elementin luokan hoveriksi. Mihin me nyt pääsimme tällä? Miten dokumentti muuttui helpommin ylläpidettäväksi kun erotimme näin esitystavan ja toiminnallisuuden? Ainut muutos on tässä tapauksessa toimivuuden heikkeneminen niiden käyttäjien kohdalla, jotka ovat poistaneet JavaScriptin käytöstä. Totta on, että jos elementti olisi ollut jokin muu kuin linkki, olisi muutos itse asiassa parantanut toimivuutta eri selaimissa. Käytännössä tämä johtuu IE:n puutteellisesta tuesta useimmille pseudoluokille.

Mutta entä jos IE tukisi pseudoluokkia täysin? Olisiko tällaiselle DOM:in käytölle muuta syytä kuin päteminen ja perfektionismi? Miksi meidän olisi tehtävä skripti vain muuttamaan luokkanimeä kun ystävämme CSS osaisi asian aivan itse, luotettavammin, yksinkertaisemmin ja myös vähemmällä koodilla? Nämä tapahtumalliset pseudoluokat ovat sisäänrakennettu CSS:n ominaisuus, joka on tarkoitettu vain ja ainoastaan visuaalisen efektin aikaansaamiseen. Visuaaliset efektit kuuluvat mielestäni ennen kaikkea esitystapaan, vaikka ne toiminnallisuutta ovatkin. Mainitut pseudoluokat ovat kuin oikotie, tapa ohittaa pakollinen skriptauskuvio. DOM:ille on parempaakin käyttöä.

Kommentit

Ei kommentteja.

Kommentointi suljettu

Tämän merkinnän kommentointi on suljettu. Jos sinulla on tärkeää sanottavaa, laita palautetta.