Internet Explorer 11, in continuità con il percorso iniziato da IE10 nel mondo mobile ed in particolare nella parte touch, migliora il supporto all'interazione touch su Windows 8.1 e introduce alcune novità nella gestione interna, sul drag and drop, sull'hovering e sul supporto dei Pointer events.
Vediamo nel dettaglio di cosa si tratta.
Ottimizzazioni interne
Particolare attenzione è stata posta da Microsoft alla reattività dell'interazione touch. L'elaborazione di gesture come lo zooming, il panning o lo swiping, sono ora interamente affidate alla GPU. La CPU viene lasciata libera di dedicarsi all'elaborazione dei contenuti dinamici della pagina e di rispondere prontamente alle richieste dell'utente. L'effetto finale è una interazione più fluida.
Questa ottimizzazione è disponibile soltanto su Windows 8.1, dal momento che IE11 è in grado di usufruire pienamente delle potenzialità della nuova release del sistema operativo.
Drag and drop
IE11 prevede il supporto nativo del drag and drop. La maggior parte delle pagine Web HTML5 implementano il pattern di interazione premi, mantieni e trascina (press, hold and drag). Questo è il comportamento predefinito di IE11 per gli elementi con l'attributo draggable.
Così, ad esempio, in presenza del seguente codice HTML:
<img id="draggableImage" src="img/image.png"
draggable="true" ondragstart="drag(event)" />
<div id="droppableArea" dragover="allowDrop(event)"
ondrop="drop(event)"></div>e del relativo codice JavaScript:
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}IE11 gestirà correttamente l'operazione di drag and drop sia che si interagisca con la pagina tramite il mouse che con le dita.
Sempre nell'ottica di ottimizzare l'interazione touch, Internet Explorer 11 gestisce il rendering dell'immagine dell'oggetto trascinato su un thread separato per mantenere la pagina più veloce possibile.
Hovering
Buona parte delle pagine Web sono state pensate per un'interazione con il mouse. L'esempio tipico è l'attivazione di effetti grafici o di menu a comparsa al passaggio del cursore su di un elemento: il cosiddetto hovering.
Nell'interazione touch non abbiamo un evento equivalente all'hovering. Toccare un elemento, come può essere un link a cui è associato un menu, può corrispondere sia all'hovering che mostra il menu associato sia all'attivazione del link e quindi alla navigazione. Per risolvere questa ambiguità, IE10 aveva introdotto il supporto della proprietà aria-haspopup di un elemento per consentire la gestione dell'hovering anche nel mondo touch con un pattern di interazione a doppio tocco: il primo tocco corrisponde all'hovering, il secondo all'azione associata all'elemento.
Consideriamo ad esempio il seguente codice:
<style type="text/css">
#menu .cssSubMenu
{
display: none;
}
#menu:hover .cssSubMenu
{
display: block;
}
</style>
<!-- ... -->
<div id="menu" aria‐haspopup="true">
<a>CSS Hover Menu</a>
<div class="cssSubMenu">
<a>Sub menu item 1</a>
</div>
<div class="cssSubMenu">
<a>Sub menu item 2</a>
</div>
<div class="cssSubMenu">
<a class="cssSubLink">Sub menu item 3</a>
</div>
</div>L'impostazione a true della proprietà aria-haspopup fa in modo che IE visualizzi il sottomenu al tocco sull'elemento principale. Il sottomenu rimane visibile fino a quando l'utente non tocca un elemento del menu o un qualsiasi altro elemento sulla pagina.
Eventuali altri eventi associati all'elemento principale non vengono generati al primo tocco, ma in corrispondenza di eventuali interazioni successive.
Mentre IE10 richiede obbligatoriamente la presenza dell'attributo aria-haspopup, in IE11 questo requisito non è più obbligatorio. E' quindi possibile interagire secondo il pattern a doppio tocco con un qualsiasi elemento a cui è stato associato un gestore di evento dell'hovering.
Per evitare interferenze con il menu contestuale, IE11 ha introdotto la visualizzazione in fondo allo schermo della barra dei comandi quando si clicca e si tiene premuto un link. Questo consente di gestire correttamente sia l'hovering sui link che la visualizzazione dell'eventuale menu contestuale.
Pointer events
In seguito all'approvazione come Candidate Recomendation delle specifiche dei Pointer events da parte del W3C, di cui Microsoft è stata promotrice, IE11 ne adegua e completa il supporto.
In sintesi, i Pointer events rappresentano un modello di gestione uniforme dell'interazione con le pagine Web con i diversi dispositivi di puntamento, come ad esempio il mouse, la penna o il touch screen.
Il modello proposto dai Pointer events consente di intercettare e gestire diversi eventi legati all'interazione tra il dispositivo di puntamento, comprese le dita dell'utente, e lo schermo e di rilevare informazioni sul tipo di dispositivo e su alcune caratteristiche del punto di contatto. Il tutto con un approccio che si presenta come una sorta di evoluzione del modello di eventi del mouse, quindi un approccio già familiare agli sviluppatori.
Tra le principali novità di IE11 in questo ambito segnaliamo la rimozione del vendor prefix MS dai nomi degli elementi che compongono le API e l'adeguamento sintattico e semantico alle specifiche definitive. Quindi, ad esempio, al posto di MSPointerUp possiamo ora utilizzare pointerup, al posto di MSPointerMove usiamo pointermove e così via.
Conclusioni
La combinazione di IE11 e Windows 8.1 fornisce un'esperienza di navigazione veloce e fluida con qualsiasi dispositivo e con qualsiasi strumento di interazione. La continua evoluzione degli standard e la particolare attenzione verso il mondo mobile e l'interazione touch proietta IE11 verso un modo moderno di intendere la navigazione Web: il Web del futuro, accessibile in maniera uniforme con qualsiasi dispositivo senza complicare la vita dello sviluppatore.