CW(3,x) Mobilní pohroma aneb od Pure CSS hover menu zase zpátky k javascriptu?

Mají nad to uživatelé najíždět nebo na to klikat? To je otázka, která trápí většinu ortodoxních tvůrců webu již bezmála 10 let. Invaze mobilistů je jedním z příkladů, proč mobilní pohroma posouvá webové tvůrce znovu dvacet let nazpátek.

Týká se to oněch sjížděcích menu (dropdown menu) v navigační sekci webů. Logicky by člověk řekl, že nejlépe bude udělat obojí a technicky by to bylo krásně proveditelné. Bohužel někdy po roce 2013 přišel mobilegeddon, tedy mobilní pohroma, velkonástup mobilů s grafickým displejem ovládaným dotykově, a bylo vymalováno.

Nejen, že vznikla pakultura mobilistů, ale s nimi onen zásadní problém, že všechna menu namapovaná na akci hover (najetí myší nad) byla najednou na všech mobilech nefunkční. A jelikož počty mobilistů rostou do rozměru standardních uživatelů internetu, musíme se jim jako tvůrci webů přizpůsobovat, bohužel. Onen zakopaný pes je v pouhé dvojstavovosti dotykového ovládání. Existují tam pouze dva stavy: Zmáčknuto a nezmáčknuto. Ovládání myší je mnohastavové: Má tři tlačítka, kolečko, a na každém stisknutí, puštění, click (stisknutí a puštění na místě), doubleclick, drag, drop, scrollup, scrolldown a jistě ještě další. Dovední uživatelé si na každou dovedli v aplikacích namapovat nějakou funkci a poté jim produktivita rostla do nebes. Často šly některé dennodenní aplikace ovládat pouze kombinací tlačítek a scrollu, nemuselo se myší ani hýbat. Božská věc! Jenže vykládejte to mobilistovi!

Ohlédnutí do historie

Z tvůrčího hlediska se historie vývoje ovládání webových aplikací měla tak: Někdy už v letech dávno před r. 2000 jsme měli DHTML na namapování oněch akcí a k nim Javascript, pomocí kterého se pak takové interaktivní menu programovalo. Bylo to zdlouhavé, krkolomné, obtížně kompatibilní, zaprasilo vám to čistý web javascriptem, takže byla to obtíž a málokdo se do toho vůbec pouštěl. Když jsme takové dropdown menu někde na západním webu viděli, koukali jsme na to jako na vymoženost. To navíc v době dial-up internetu. Snili jsme o interaktivitě bez Javascriptu a tento sen se nám splnil s příchodem CSS2 o nějakých deset let později, vlastně až pár let před nástupem mobilistů.

Asi jen tři roky jsem tak měl vytoužený ideál - interaktivní rozbalovací menu bez DHTML eventů a bez javascriptu, namapované na událost hover, řešené pouze přes CSS2 a jeho selektory odkazů (pseudotřídy, Pure CSS menu).

Pro pamětníky: Mezi tím ještě přišla technologie Macromedia Flash, kde jsem také vítězoslavně měl nakonec dynamické menu blikací a blyštivé. Flash ale jinak měl jenom samé nevýhody a proto byl brzy jako technologie webu zcela opuštěn.

- - - - Vsuvka až po konec vsuvky:

Kdo jsou to mobilisté?

Selanka mobilistů si myslí, že jakoukoli potřebu PC v moderním světě třetího tisíciletí dovedou suplovat / ošálit mobilem, nedokonalou náhražkou na cesty, která se navíc pekelně ovládá. Vzniká tak příšerná pakultura řemeslníků, řidičů a operátorů výroby, kteří se navzájem podporují ve svém ohavném řemesle!

Když potom mají děti a ty chodí do škol, když časem jednají s úřady, s lékaři, či si mají napsat životopis, nebo aspoň fakturu, najednou jsou vykulení, protože řádný počítač nemají a nic na něm nesvedou. Přitom to jsou často i mileniálové z rodin dělnického typu. Kdysi když jsem dělal na živnosťák tvorbu webových prezentací a desktop publishing, mnohokráte jsem místo toho nakonec vyučoval na počítači řemeslníka, který byl mladší než já! Někteří mívali doma aspoň notebook (náhražka o něco lepší), ale zapínali ho pouze svátečně a vlastně jenom v mojí přítomnosti, když jsem je u sebe doma na jejich notebooku vyučoval, co a jak.

Falešný nával mobilistů

Tvůrci webů jsou jimi beztak buzerováni zbytečně. Řekli jsme si, že mobilista je člověk dělnického typu, který v životě nevzal do ruky knihu, nedomluví se ani jedním cizím jazykem, neumí zpravidla pořádně ani česky, jinými slovy člověk, který by správně dnes neměl existovat.

A takoví mobilisté stejně internet nečtou. Internet pro ně přizpůsobujeme úplně zbytečně, protože mobilisté si pouze prolítnou nadpisy a pak velkohubě šíří paniku vlastními smyšlenkami, které ve skutečnosti nikdo nenapsal. Ano, jsou to také ti, kdo se spokojí s první jednořádkovou informací na Googlu, ale na vyhledané výsledky dále neklikají. Jsou to ti, kteří nečtou světový internet, nečtou ani německý a vlastně pořádně nečtou ani český. Zajímají je zcela monotematické oblasti lidského počínání, jako třeba kolem vyměňování pneumatiky, kolik v jakém obchodě stojí pytel cementu, a kde se takový obchod nejblíže rozkládá. Pokud vůbec mají koníčky, tak maximálně v hospodě nad pivem sledování sportovních výsledků a prosazování svých levicových tendencí. O tom, že jsou na politickém spektru orientováni doleva, však nemají ani zdání. 

Takže proč na ně brát ohledy při tvorbě webu?

Proč se vůbec obtěžovat posouváním webu dvacet let nazpátek do doby, kdy bylo na CRT monitorech machrovské mít rozlišení 1024x768? Bohužel Google prosazuje vůči těmto lidem svůj řitní alpinismus a pomocí monopolu na internet a své Google Webmasters Academy nutí nás, ušlechtilé webové tvůrce, rovněž přizpůsobovat vše tak, aby se lezlo do zadku mobilistům, kteří kromě tabulek sportovních výsledků stejně nic nečtou. Bohužel tak se má situace kolem 2020. Snad je teď koronavirus a zákaz hospod trochu přinutí jít do sebe. Možná i objeví, že pomocí PC se mohou věnovat spoustě koníčků, nejlépe těm nehmotným, kvůli kterým nemusí nikam jezdit ani mít žádný hmotný materiál a že vlastně ani hospody nepotřebují.

- - - - Konec vsuvky

Pak se to strhlo

Nakonec závan mobilistů, jejich dvoustavového ovládání a mrňavých obrazovek s nepřiměřeně velkým rozlišením nám tvůrcům webu přinesl takové pakárny, že to svět neviděl. Museli jsme se jim pokorně přizpůsobovat, museli jsme znovu vládnout myšlenkovými schématy patřícími do minulosti, museli jsme uřítit vývoj webu někam na počátek internetu na počítačích. 

Konkrétně v případě dropdown menu to znamenalo návrat zpět k DHTML eventům a k javascriptu, který se navíc kvůli tomu pekelně rozmohl a snad jednou nedejbóže začne fušovat do řemesla i programovacím jazykům na straně serveru (PHP, ASP). Doufejme, že se to úplně nestane. Hostingové společnosti tomu zaplať pánbů nehoví (2020). Prostě návrat v čase k technologiím 20 let nazpátek, od kterých bychom si jinak dávno oddechli a nechali je v propadlišti dějin, podobně jako Macromedia Flash.

Zástupci moderních expertů ze StackExchange nám radí

Kdykoli se uživatel dneška setká s možností dropdown, bude na to vlivem mobilů intuitivně klikat, čímž omylem klikne na odkaz, který se na vršku menu může nalézat a ve výsledku bude zmaten. Nepředpokládá totiž, že menu se spustí akcí hover, tedy najetím kurzoru nad obdélníček.

Jednoduchá rada roku 2020 tedy zní: Nemapovat menu na událost hover. U touchscreenů je totiž hover z výše popsaných důvodů nemožný. Řádný uživatel webu na PC s myší se dovtípí ihned, že na menu se nenajíždí, ale kliká, přijme to a dál se o to nestará. Takže dnes je vskutku doba řitního alpinismu mobilistům. Z tohoto důvodu bychom také měli přinutit kurzor zobrazovat se nad dynamickou oblastí ne jako ručičku nad odkazem, ale jako šipku v průzkumníku, ale to už není tak nutné.

Mark Root-Wiley z MRW Web Designu se také jasně přiklání k názoru, že hoverem spouštěná menu byla sice skvělá, ale kvůli mobilistům už dnes sotva funkční a měli bychom je navždy opustit.

On ještě navíc adresuje skutečnost, kterou známe z Windows menu ve Windows XP nebo ve Windows 7, sice, že po najetí myší musíme držet záměr na nově zobrazeném submenu, protože jakmile hneme myší jinam, menu zmizí a my musíme opakovat celou akci znovu. Tento problém osobně celkem opomíjím, protože se mi stal jen několikrát za život a sám jsem vždy menu tvořil s co největší spouštěcí i cílovou plochou, aby právě nebylo pro uživatele tak snadné ztratit záměr (focus).

Článek na UXmovement dále vypichuje tuto vlastnost, a že byla skutečně pro zlost na velkých webech v letech dvoutisících. Tam jste měli horizontální hlavní menu a ještě s horizontálními submenu. Zkrátka všechna menu jste měli jako dva úzké řádky pod sebou a uživatele jste nutili držet záměr myší po celou dobu hýbání myší dolů a ještě do strany. To bylo opravdu svinské.

Dále na pořadu je ukončení submenu: Má ho uživatel zrušit otravným klikáním znovu někam na křížek nebo prostě kliknutím do prázdna? Cestou nejmenšího odporu bych se chápal druhé možnosti, ale divili byste se, kolik ortodoxních clickerů je třeba i mezi lidmi, co dělají W3Schools - defakto učitelé webových technologií. Furt by jen klikali na křížky! Nejlepší by byl právě opouštěný způsob automatického zavření submenu ihned při ztracení záměru, jenže tomu právě není doba nakloněna.

Rozuzlení na konec - lze to!

Ale pozor! Jak jsem se rozhořčil při psaní tohoto článku, vlastně jsem omylem našel řešení! Ano, i v roce 2020 lze stále udělat čistě HTML a CSS menu, které bude dropdown a bude navíc bez Javascriptu a bez DHTML eventů. A sice s využitím tagů <details> a <summary>, které již dnes dávno mají v prohlížečích bezproblémovou podporu.

Naprosto úžasný návod je zde:

https://medium.com/an-idea/the-details-of-a-dropdown-a817dc27e545

Využijete zde důmyslnou kombinaci vlastností tagu <details>, velikosti <div>, CSS vlastnosti content a subselektoru ::before.

Vše je čisté HTML a CSS2 s výbornou podporou v prohlížečích a hlavně ŽÁDNÝ JAVASCRIPT!

Bravo W3C, tak to nakonec přece jen vyšlo!

Zdroje

https://ux.stackexchange.com/questions/94838/should-nav-items-be-hover-or-click-to-activate-dropdown

https://mrwweb.com/hover-drop-downs-problems-solutions/

https://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

https://www.w3schools.com/tags/tag_details.asp