Při testování vašich webů na mobilních webových prohlížečích se můžete dovědět, že Windows Phone a iOS automaticky aplikují speciální zvýrazňování ve chvíli, kdy uživatel klepne na jakýkoliv odkaz na stránce – jde o lehké zašednutí celého prostoru na kterém je odkaz zobrazen. Přestože toto chování může být v mnoha případech užitečné, hlavně pro to, aby uživatel věděl na jaký odkaz doopravdy klepnul, v jiných situacích to může být poměrně nežádoucí a nepřívětivé vůči designu stránky. Jak zvýrazňování zabránit? Pojďme se podívat na řešení pro oba systémy!
Windows Phone
Windows Phone 8 bohužel nenabízí žádné řešení přímo přes CSS. Pro odstranění zvýraznění musíte na stránce v uvnitř elementu <head> uvést následující speciální meta tag.
<meta name="msapplication-tap-highlight" content="no" />
Proč mluvím konkrétně o Windows Phone 8? Podpora pro tento specifický meta tag není na Windows Phone 7 k dispozici (ani s nejnovější aktualizací 7.8) a mobilní IE 9 jej jednoduše nepodporují. Zde budete muset udělat důležité rozhodnutí. Pokud můžete žít s faktem, že na Windows Phone 7 bude zvýrazňování pokračovat, zjednodušíte si život. Pokud je ale tento problém pro vás opravdu kritický a máte rádi výzvy, můžete na stránku přidat poměrně komplikovanou JavaScriptovou knihovnu od Andrewa Trice pojmenovanou WinPhone-NoGrayBox. Autor napsal na toto téma skvělý článek, který přímo obsahuje odkaz na GitHub knihovny.
iOS
Řešení problému v mobilním Safari na iOS je překvapivě jednodušší. Pro odstranění dotykového zvýraznění aplikujte následující stylovou definici ve vašem CSS:
body
{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Toto je vlastnost specifická pro webkit prohlížeč a umožňuje vlastně nastavit zvýraznění libovolnou barvu. Pro naše účely se ale nejvíce hodí plně průhledná černá barva.