Nedávno som zverejnil, že som sa rozhodol použiť Opera pri svojich ukážkach HTML5 na RMOUG Training Days 2011. Ako som uviedol v tomto príspevku, veľkým dôvodom na pridanie webového prehliadača Opera do demonštrovanej sady je, že podporuje niektoré funkcie HTML5 lepšie ako ostatné prehliadače. Tento príspevok ilustruje jeden z týchto prípadov: výber dátumu HTML5.
Jednou z malých, ale pekných vecí pri používaní Flex alebo knižnice JavaScript, ako je JQuery, je dostupnosť zabudovaných mechanizmov pre užívateľsky prívetivé ovládacie prvky vstupu. Vždy sa ocení najmä dobrý výber dátumu.
Formát HTML5 má v súčasnosti ponúkať štandardný widget na výber dátumu, ktorý je možné použiť so značkami HTML. V tomto príspevku sa pozriem na stav nástrojov na výber dátumu HTML5 v posledných non-beta verziách piatich populárnych webových prehliadačov (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 a Opera 11).
HTML podporuje rôzne vstupné polia prostredníctvom vstupnej značky. Rôzne typy vstupných polí sú špecifikované prostredníctvom vstup elementov typu atribút. HTML5 dramaticky zvyšuje počet dostupných typus, ktoré možno určiť. Niekoľko nových hodnôt pre typu medzi atribúty patria tie, ktoré súvisia s dátumom a časom: dátum, Dátum Čas, datetime-local, mesiac, týždeňa čas. Každá z nich je ilustrovaná v nasledujúcom útržku kódu HTML.
Ukážka výberu dátumu HTML5 Typ vstupu Vstupné pole dátum Dátum Čas datetime-local mesiac týždeň čas
Z piatich webových prehľadávačov, ktoré som predtým uviedol, poskytuje Opera zďaleka najsofistikovanejšiu implementáciu dátumu a času typus vstup značka. Počnúc kladom, prvých niekoľko snímok obrazovky ukazuje, ako sa tento jednoduchý kód HTML vykresľuje v Opere 11.
Opera 11 Počiatočné vykreslenie stránky
Opera 11 Vstupná značka „date“ Atribút
Opera 11 Vstupná značka „datetime“ Atribút
Atribút Vstupná značka Opera 11 „datetime-local“
Opera 11 Vstupná značka „mesiac“ Atribút
Implementácia Opery zvýrazňuje celý mesiac, ktorý bude vybraný.
Opera 11 Vstupná značka „týždeň“ Atribút
Opera zdôrazňuje týždeň, ktorý bude vybraný.
Opera 11 Vstupná značka „time“ Atribút
Opera 11 - všetky vstupné polia vybraté
Implementácia vstupných polí dátumu a času v Opera je pôsobivá. Prial by som si, aby sa to dalo povedať aj o ostatných prehliadačoch iných ako beta. Je smutné, že ostatné prehľadávače neposkytujú podporu pre tieto typy polí kdekoľvek v blízkosti tohto elegantného. V skutočnosti si nemyslím, že by stálo za to zahrnúť sem všetky ich snímky obrazovky. Namiesto toho po vyplnení všetkých polí jednoducho ukážem snímku obrazovky každého z nich. Vo väčšine prípadov prehliadače tieto polia považovali za jednoduché polia typu „text“.
Firefox 3.6 Výber dátumu: Sú to iba textové správy
Zberače dát v programe Internet Explorer 8: Sú to iba textové správy
Vyberače dátumu Safari 5: Sú to iba texty so zvýraznením zamerania
Zberače dátumov v Chrome 8: nie celkom tam
Aj keď to nie je také elegantné, ako je nastavenie polí dátumu a času v Opere, prehliadač Chrome zaobchádza s týmito poľami viac ako s textom a obmedzuje možnosti, ktoré je možné do týchto polí zadať. Bohužiaľ neexistujú žiadne pekné kontextové okná pre výber dátumu a času, aké poskytuje Opera. Stále je však zvýraznenie zameraného poľa pekné a pomáha k tomu aj fakt, že vybrané údaje majú určitý dátum a čas ako formát.
Záver
Teším sa na deň, keď hlavné prehliadače neustále podporujú štandardizované ovládacie prvky dátumu a času, takže jednoduché „vstupné“ značky HTML s príslušnými atribútmi vykreslia elegantné a štylistické selektory dátumu a času v ľubovoľnom prehliadači. Opera 11 momentálne vedie balíček a poskytuje najlepšiu ilustráciu toho, čo by mohlo byť.
Tento príbeh, „Výber dátumu HTML5“, bol pôvodne publikovaný spoločnosťou JavaWorld.
