Disabilitare il link highlighting sui browser mobile con HTML5

di Andrea Colaci,

I più diffusi browser mobile, quando si seleziona un link o un pulsante mediante la gesture di "tap", tendono ad evidenziare il controllo con un effetto traslucente, al fine di fornire un feedback all'utente che ha selezionato/utilizzato il controllo.
Questo effetto può rivelarsi fastidioso e penalizzare la reattività dell'applicazione, oltre che stridere con il look&feel e il design della stessa.

In uno script precedente, abbiamo visto come è possibile sottoscrivere l'evento MSPointerDown di IE10 meglio noto come touchStart o semplicemente "tap": https://www.html5italia.com/script/59/Gestione-Evento-TouchStart-IE10-HTML5.aspx

In questo semplice script viene illustato come disabilitare il link-highlighting su Windows Phone 8:

HTML
<meta name="msapplication-tap-highlight" content="no" />

Si tratta di aggiungere il meta tag msapplication-tap-highlight nell'head della pagina, questo tag è specifico per Internet Explorer 10 e per Windows Phone 8.

Per i browser con engine webkit sarà sufficiente ricorrere ad una classe css:

CSS
.myLink {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Di seguito l'effetto su WP8 prima:


e dopo l'utilizzo del meta-tag msapplication-tap-highlight:

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi