Habilitando experiências de movimentos panorâmicos interoperáveis por meio de CSS Scrolling Snap Points Specification
Hoje, enviamos uma nova proposta para o W3C, o CSS Scrolling Snap Points, criado para habilitar experiências de movimentos panorâmicos mais rápidos e fluidos para toque e para outros dispositivos de entrada, com base em APIs introduzidas no IE10 e aperfeiçoadas no IE11. Essas APIs permitem que os desenvolvedores criem com facilidade experiências de movimento panorâmico como conteúdo paginado e galerias de foto de rolagem de modo que funcionem com a mesma eficiência tanto para toque quanto para mouse, teclado e trackpad. Um ótimo exemplo desta experiência é a home page do MSN otimizada para Windows 8:
Os usuários podem passar o dedo para a esquerda e para a direita para navegar pelas manchetes do dia. Com o CSS Snap Points, o Internet Explorer aperfeiçoa esta experiência usando a mesma tecnologia de movimento panorâmico acelerada por hardware utilizada para o movimento panorâmico de uma página da Web com o toque no IE. Os usuários obtêm um excelente desempenho com o movimento panorâmico inercial e a recuperação do movimento panorâmico que esperam. Além disso, o navegador ajusta o conteúdo para a manchete mais próxima assim que o usuário fazer o movimento panorâmico.
O código para esta experiência é simples e requer apenas duas novas linhas de CSS:
<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>
Este código funciona para o gesto de passar o dedo no IE10 e IE11. Uma novidade no IE11, esta mesma marcação funciona com a roda de rolagem do mouse, teclas de direção e trackpads, permitindo que os usuários tenham acesso a essa experiência independentemente do dispositivo que estejam utilizando para navegar. A habilitação de uma experiência semelhante com JavaScript usaria centenas de linhas de códigos e, em geral, não ofereceria uma manipulação de qualidade, com baixa performance em hardware inferior.
Chegando logo após os Eventos de Ponteiro se tornarem uma Recomendação candidata e apenas um ano após o envio da proposta inicial de Eventos de Ponteiros para o W3C, o CSS Snap Points é outra maneira de aprimorar a Web fornecendo experiências avançadas e imersivas perfeitas para o toque e que também funcionam em outras modalidades de entrada.
-Jacob Rossi e Matt Rakow, gerentes de programa, Internet Explorer