Tässä vihdoinkin ehtii hieman käyttää aikaa CSS:n vääntämiseen Hain-sivulle jotta se toimisi paremmin mobiiliselaimissakin ja heti törmää ihanaan Nokiamaisuuteen. Miten seuraavan pitäisi näkyä:
HTML
<img class="visual" style="float:left" />
CSS
.visual { display: none; }
Arvauksia? Tietystihän normaalit selaimet toimivat oikein ja jättävät kuvan näyttämättä. Vielä sitten kun tuon .visual-määritteen laittaa @media handheldin sisään, saadaan hienosti piilotettua turhat leiskakuvat, eikös?
Ei. Nokian insinöörit (tai keneltä esimerkiksi 6680:n selaimen ovatkaan repineet) ovat päättäneet, että jos class-määreen mukaisesti on sanottu ettei näytetä, ei näytetä paitsi jos style-määreessä on sanottu vielä float. Silloin näytetään aina! Niin, miksikös sitä floattaisi jos kerran ei haluta kuvaa näyttääkään, sivuntekijän mokahan tuo.
Argh brgh!
Joudun siis tekemään class="visual fl" ja määrittämään fl { float: left; } jotta homma toimisi. Kiitos, Nokia, kun pidätte huolta että selaimetkin toimivat.
Positiivista sentään se, että selain tottelee handheld-mediaa.
Mutta sitten huomaankin, että attribuuttien periytyminen ei toimi. Jos määritän h1:lle class="visual" ja sen sisälle laitan img, tietystikään tuota kuvaakaan ei näytetä. Mutta Nokian laatuajatteluun tietysti käy se, että kuva näytetään. Hienoa!
Samoin jos määritetään elementille marginaali, floatataan se ja asetetaan ei-näytettäväksi, silti selain käsittelee marginaalit ja muut ja siirtää muuta sisältöä vastaavasti. Jes!
Jos joku kuvitteli IE vs Netscape vs Mozilla vs Opera -touhun olevan vaikeaa, tervetuloa Nokiaselaamisen ihmeelliseen maailmaan.