Kuopassa.net

Halusin testata kuinka HTML5:ssä sallitut map- ja area-elementit toimivat nykypäivän nettiselaimissa. Rakensin testiä varten pienen sivuston. Maanmittaushallitus julkaisi 1950-luvulla Suomen tiekarttoja. Kunkin taiteltavan ”harmonikkamallia” olevan karttaläpyskän lopussa esiteltiin autoilijoille sen ajan liikennekylttejä. Skannasin yhden sellaisen kylttisivun ja koostin siitä tällaisen sivuston, jossa etusivulla yksi img-tagi on yhdistetty yhteen map-tagiin ja se yksi mappi sisältää kaiken kaikkiaan 32 areaa.

Lue kokonaan…

Tämän uuden ulkoasun taustakuva on tehty sillä tavalla, että valokuvaan on laitettu valtavasti sumennusta eli blurria. Sen jälkeen sen päälle on laitettu aavistuksen verran contoursia, siis ääriviivoja kontrastipitoisten alueiden reunoille. Sille on hyvin todennäköisesti jokin suomenkielinen sana. Kontyyri? Kontouri?

Lue kokonaan…

Yksirivisissä tekstikentissä on iät ajat ollut sellainen attribuutti kuin maxlength. HTML5 esitteli lomakkeisiin monia hyödyllisiä lisäyksiä, kuten attribuutin placeholder. Jos lomakkeena on esimerkiksi hakukone, jolla voi etsiä blogista sisältöä, siinä on luultavasti yksirivinen tekstikenttä. Tuollaisen tyhjän HTML5-merkkauksella tehdyn lomakkeen lähettämisen estämiseksi voi tekstikentän asettaa pakolliseksi. Silloin selain tyrkkää ruudulle virheilmoituksen. Se virheilmoitus on luultavasti englanninkielinen. Firefox-selaimella virheilmoituksen voi muuttaa halutuksi kirjoittamalla attribuuttiin x-moz-errormessage oman viestin. Silloin tekstikenttä voi näyttää esimerkiksi tällaiselta: <input type="text" name="hakusana" size="25" placeholder="(Pakollinen kenttä)" maxlength="200" pattern=".{2,200}" required="required" x-moz-errormessage="Kirjoita hakusana" />. Esimerkissä mainittu pattern ehdottaa selaimille, että kenttään on kirjoitettava vähintään kaksi mutta enintään 200 merkkiä.

Lue kokonaan…