De nouvelles expériences panoramiques interopérables via la spécification « CSS Scrolling Snap Points »

Nous avons aujourd'hui fait parvenir une nouvelle proposition au W3C : les points d'ancrage de défilement CSS (« CSS Scrolling Snap Points »). Ces points d'ancrage sont conçus pour rendre les mouvements panoramiques rapides et fluides sur les appareils tactiles et d'autres périphériques d’entrée, conformément aux API introduites dans Internet Explorer 10 et améliorées dans Internet Explorer 11. Ces API permettent aux développeurs de concevoir plus facilement des mouvements panoramiques, tels que le contenu paginé et le défilement des galeries de photos, qui sont idéaux en mode tactile et fonctionnent tout aussi facilement avec une souris, un clavier ou un trackpad. La page d'accueil MSN optimisée pour Windows 8 en est un parfait exemple :

Les utilisateurs peuvent balayer l'écran vers la gauche ou la droite pour parcourir les titres du jour. À l'aide des points d'ancrage CSS, Internet Explorer renforce cette approche en utilisant la même technologie de panoramique avec accélération matérielle que celle utilisée pour effectuer un mouvement panoramique sur une page Web en mode tactile dans Internet Explorer. Les utilisateurs bénéficient d'une réactivité tactile qui « colle au doigt » avec le panoramique d'inertie et le rebond sur panoramique. En outre, le navigateur ancre le contenu sur le titre le plus proche à la suite du panoramique appliqué par l'utilisateur.

Le code correspondant est simple. Il nécessite 2 nouvelles lignes CSS uniquement :

 <style> .photoGallery { width: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; /* Set up points to which scrolling will snap*/ -ms-scroll-snap-points-x: snapInterval(0px,100%); /* Require that scrolling always end at a snap point */ -ms-scroll-snap-type: mandatory; } </style> <div class="photoGallery"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> <img src="img5.jpg"> </div> 

Ce code fonctionne avec le balayage tactile dans Internet Explorer 10 et Internet Explorer 11. Nouveau dans Internet Explorer 11, ce code fonctionne automatiquement avec la molette de la souris, les touches fléchées et les trackpads, ce qui permet aux utilisateurs d'accéder à ces fonctionnalités quel que soit l'appareil qu'ils utilisent. L'activation de cette fonctionnalité par l'écriture en langage JavaScript peut nécessiter des centaines de lignes de code, n'offre pas la sensation de « coller au doigt » et entraîne généralement des performances saccadées sur du matériel d'entrée de gamme.

Arrivant juste après les événements de pointeur, parvenant au stade de « Candidate Recommendation » et un an seulement après notre proposition initiale d'événements de pointeur au W3C, les points d'ancrage CSS incarnent une nouvelle avancée dans le domaine du Web en offrant des expériences riches et immersives qui sont idéales pour le tactile et fonctionnent parfaitement sur tous les autres modes d'entrée.

-Jacob Rossi et Matt Rakow, chefs de projet, Internet Explorer