Обеспечение новых совместимых возможностей панорамирования с помощью спецификации CSS Scrolling Snap Points

Сегодня мы отправили в консорциум W3C новое предложение — CSS Scrolling Snap Points. Эта спецификация разработана для обеспечения быстрых и плавных возможностей панорамирования для сенсорных и других устройств ввода на основе API-интерфейсов, представленных в Internet Explorer 10 и усовершенствованных в Internet Explorer 11. С помощью этих API-интерфейсов разработчикам становится проще создавать интерфейсы панорамирования (например, разбитый на страницы контент и галереи фотографий с возможностью прокрутки), которые прекрасно подходят для управления касаниями и так же хорошо работают и при использовании мыши, клавиатуры или сенсорной панели. Отличным примером такого интерфейса является домашняя страница MSN, оптимизированная для Windows 8:

Чтобы просмотреть актуальные заголовки новостей, пользователям надо быстро проводить пальцем влево или вправо. Используя CSS Snap Points, Internet Explorer успешно предоставляет такие возможности взаимодействия, используя ту же технологию панорамирования на основе аппаратного ускорения, которая используется для панорамирования веб-страницы с помощью касаний в Internet Explorer. Пользователи чувствуют, что интерфейс "слушается малейшего прикосновения пальцев" с ожидаемыми эффектами инерции при панорамировании и "отскока" при достижении края. Кроме того, после панорамирования браузер прикрепляет контент к ближайшему заголовку.

Код для такого взаимодействия прост, требуется написать всего 2 новых строчки 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> 

Этот код работает с сенсорным жестом прокрутки (быстро провести пальцем) в Internet Explorer 10 и Internet Explorer 11. Новым в Internet Explorer 11 является то, что та же разметка автоматически работает с колесиками мыши, клавишами со стрелками и сенсорными панелями, благодаря чему пользователи получают доступ к этим возможностям взаимодействия независимо от того, на каком устройстве они работают в данный момент. Обеспечение аналогичных возможностей с использованием JavaScript требует написания сотен строк кода, зачастую не обеспечивает "послушного прикосновениям пальцев" управления и обычно выполняется со сбоями на младших моделях устройств.

Спецификация CSS Snap Points следует за спецификацией Pointer Events, находящейся на стадии Candidate Recommendation. Она появилась всего через год после нашего исходного предложения спецификации Pointer Events консорциуму W3C и является еще одним способом совершенствования Интернета посредством предоставления насыщенных иммерсивных возможностей взаимодействия, прекрасно подходящих для управления касаниями и хорошо работающих при использовании других способов ввода.

— Джейкоб Росси (Jacob Rossi) и Мэтт Раков (Matt Rakow), руководители программ, Internet Explorer