Lähetin äskettäin, että olin päättänyt käyttää Operaa HTML5-esityksissäni RMOUG Training Days 2011 -ohjelmassa. Kuten totesin tuossa viestissä, suuri syy Opera-selaimen lisäämiseen demonstroitavaan sarjaan on, että se tukee joitain HTML5-ominaisuuksia parempi kuin muut selaimet. Tämä viesti kuvaa yhtä näistä tapauksista: HTML5-päivämäärän valitsimia.
Yksi pienistä mutta mukavista asioista Flexin tai JavaScript-kirjaston, kuten JQueryn, käytössä on sisäänrakennettujen mekanismien saatavuus käyttäjäystävällisille syöttösäädöille. Erityisesti hyvää päivämääränvalitsinta arvostetaan aina.
HTML5 tarjoaa tällä hetkellä normaalin päivämääränvalitsimen widgetin, jota voidaan käyttää HTML-tunnisteiden kanssa. Tässä viestissä tarkastelen HTML5-päivämääränvalitsimien tilaa viiden suositun verkkoselaimen (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 ja Opera 11) viimeaikaisissa muissa kuin beetaversioissa.
HTML tukee useita syöttökenttiä syötetunnisteen kautta. Eri tyyppiset syöttökentät määritetään tulo elementin tyyppi määritteen. HTML5 lisää dramaattisesti käytettävissä olevien määrää tyyppijotka voidaan määrittää. Useat uudet arvot tyyppi attribuutti sisältää päivämäärään / aikaan liittyvät ominaisuudet: Päivämäärä, treffiaika, datetime-local, kuukausi, viikkoja aika. Jokainen näistä on kuvattu seuraavassa HTML-koodinpätkässä.
HTML5-päivämäärän valitsimet on osoitettu Syötteen tyyppi Syöttökenttä Päivämäärä treffiaika datetime-local kuukausi viikko aika
Aiemmin luetelluista viidestä selaimesta Opera tarjoaa ylivoimaisesti kehittyneimmän päivämäärän / kellonajan toteutuksen tyyppis tulo tag. Positiivisesta alusta lähtien useat ensimmäiset näyttökuvat näyttävät, kuinka tämä yksinkertainen HTML-muoto toimii Opera 11: ssä.
Opera 11 Sivun alkuperäinen renderointi
Opera 11 -kenttätunniste "date" -attribuutti
Opera 11 -syöttötagin "päivämäärä" -attribuutti
Opera 11 -syöttötunnus "datetime-local" -määrite
Opera 11 -kenttätunniste "kuukausi" -attribuutti
Operan toteutus korostaa koko valitun kuukauden.
Opera 11 -kenttätunniste "viikko" -attribuutti
Opera korostaa valittavaa viikkoa.
Opera 11 -syöttötagin "aika" -attribuutti
Opera 11 - Kaikki syöttökentät valittu
Opera on toteuttanut päivämäärän ja kellonajan syöttökentät vaikuttavalla tavalla. Toivon, että sama voidaan sanoa muille ei-beeta-selaimille. Valitettavasti muut selaimet eivät tarjoa tukea näille kenttätyypeille missään lähellä tätä tyylikästä. Itse en usko, että on edes syytä sisällyttää kaikkia heidän kuvakaappauksiaan tähän. Sen sijaan näytän yksinkertaisesti näytön tilannekuvan jokaisen kentän täyttämisen jälkeen. Useimmissa tapauksissa selaimet yksinkertaisesti käsittelivät näitä kenttiä yksinkertaisina "teksti" -tyyppisinä kentinä.
Firefox 3.6 Päivämäärän valitsimet: He ovat vain tekstiä
Internet Explorer 8 -päivänvalitsimet: ne ovat vain tekstiä
Safari 5 -päivänvalitsimet: ne ovat vain tekstiä, jossa on korostettu kohokohta
Chrome 8 -päivänvalitsimet: Ei aivan siellä
Vaikka Chrome-selain ei ole yhtä tyylikäs kuin Opera käsittelee päivämäärä- ja aikakenttiä, se käsittelee näitä kenttiä enemmän kuin tekstiä ja rajoittaa kenttiin syötettävää. Valitettavasti ei ole mukavia päivämäärän ja ajan valinnan ponnahdusikkunoita, kuten Opera tarjoaa. Silti kohdennettu kentän korostus on mukavaa ja se, että valitut tiedot ovat jonkin verran päivämäärää / aikaa, kuten muodossa.
Johtopäätös
Odotan päivää, jolloin suuret selaimet tukevat johdonmukaisesti standardoituja päivämäärä / aika-säätimiä, jotta yksinkertaiset HTML "input" -tunnisteet asianmukaisilla attribuuteilla tekisivät tyylikkäitä ja tyylikkäitä päivämäärän / kellonajan valitsimia missä tahansa selaimessa. Opera 11 johtaa tällä hetkellä pakkausta ja tarjoaa parhaan kuvan siitä, mikä voisi olla.
Tämän tarinan, "HTML5 Date Picker", julkaisi alun perin JavaWorld.
