Pred kratkim sem objavil, da sem se odločil za uporabo Opere v demonstracijah HTML5 za RMOUG Training Days 2011. Kot sem že navedel v prispevku, je velik razlog za dodajanje spletnega brskalnika Opera v predstavljeni nabor ta, da podpira nekatere funkcije HTML5 boljši od ostalih brskalnikov. Ta objava bo ponazorila enega od teh primerov: izbirniki datumov HTML5.
Ena od majhnih, a lepih stvari pri uporabi Flex-a ali knjižnice JavaScript, kot je JQuery, je razpoložljivost vgrajenih mehanizmov za uporabniku prijazne kontrole vnosa. Zlasti se vedno ceni dober nabiralec zmenkov.
HTML5 je trenutno načrtovan tako, da ponuja standardni pripomoček za izbiro datuma, ki ga je mogoče uporabiti z oznakami HTML. V tej objavi si ogledam stanje izbirnikov datumov HTML5 v nedavnih različicah petih priljubljenih spletnih brskalnikov (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 in Opera 11), ki niso beta različice.
HTML podpira vnosna polja prek vhodne oznake. Različne vrste vnosnih polj so določene prek vhod elementov tip atribut. HTML5 dramatično poveča število razpoložljivih tips, ki jih je mogoče določiti. Nekaj novih vrednosti za tip atribut vključuje tiste, povezane z datumom / uro: datum, Datum čas, datetime-local, mesec, teden, in čas. Vsak od njih je prikazan v naslednjem delčku kode HTML.
Prikazan izbirnik datumov HTML5 Vrsta vnosa Vnosno polje datum Datum čas datetime-local mesec teden čas
Od petih spletnih brskalnikov, ki sem jih prej navedel, Opera ponuja daleč najbolj dodelano izvedbo datuma / časa tips vhod oznaka. Začenši s pozitivnim, prvih nekaj posnetkov zaslona kaže, kako ta preprost HTML upodablja v Opera 11.
Opera 11 Začetno upodabljanje strani
Opera 11 Atribut vhodne oznake "datum"
Atribut vhodne oznake Opera 11 "datetime"
Atribut vhodne oznake Opera 11 "datetime-local"
Opera 11 Atribut vhodne oznake "mesec"
Izvedba Opera poudarja ves mesec, ki bo izbran.
Opera 11 Atribut vhodne oznake "teden"
Opera izpostavlja teden, ki bo izbran.
Atribut atributa "time" vhodne oznake Opera 11
Opera 11 - Izbrana so vsa vnosna polja
Izvedba polj za vnos datuma / ure s strani Opera je impresivna. Želim si, da bi enako lahko rekli tudi za druge brskalnike, ki niso beta. Na žalost drugi brskalniki ne nudijo podpore za te vrste polj v bližini tega elegantnega. Pravzaprav se mi zdi, da sploh ni vredno vključiti vseh njihovih posnetkov zaslona. Namesto tega po prikazu vseh polj preprosto pokažem posnetek zaslona vsakega. V večini primerov so brskalniki ta polja preprosto obravnavali kot preprosta polja z besedilom.
Firefox 3.6 Izbirniki datumov: so samo besedilo
Izbirniki datumov v Internet Explorerju 8: so samo besedilo
Izbirniki datumov Safari 5: so samo besedilo s poudarkom na fokusu
Izbirniki datumov za Chrome 8: ni povsem tam
Čeprav brskalnik Chrome ni tako eleganten kot Opera pri obdelavi polj za datum / čas, brskalnik Chrome ta polja obravnava kot več kot besedilo in omejuje, kaj lahko vnesete v polja. Na žalost ni lepih pojavnih oken za izbiro datuma / časa, kot jih ponuja Opera. Kljub temu je poudarjeno poudarjeno polje lepo in pomaga dejstvo, da so izbrani podatki nekako datum / čas kot v obliki.
Zaključek
Veselim se dneva, ko bodo glavni brskalniki dosledno podpirali standardiziran nadzor nad datumom in časom, tako da bodo preproste HTML "vhodne" oznake z ustreznimi atributi v katerem koli brskalniku prikazovale elegantne in slogovne izbirnike datuma / časa. Opera 11 trenutno vodi paket in daje najboljše ilustracije, kaj bi lahko bilo.
To zgodbo "Izbirnik datumov HTML5" je prvotno objavil JavaWorld.
