Neue interoperable Verschiebung durch die CSS-Spezifikation mit Bildlaufandockpunkten

Wir haben heute einen neuen Vorschlag an die W3C-Arbeitsgruppe übermittelt: CSS-Bildlaufandockpunkte, die auf der Grundlage von in IE10 eingeführten und in IE11 verbesserten APIs eine schnelle und flüssige Verschiebung für Touch- und andere Eingabegeräte ermöglichen. Mit diesen APIs können Entwickler unkompliziert Verschiebungen erstellen, wie beispielsweise paginierte Inhalte oder Fotogalerien mit Bildlauf, die für die Toucheingabe optimiert sind, aber auch problemlos mit Maus, Tastatur und Touchpad funktionieren. Ein großartiges Beispiel ist die für Windows 8 optimierte MSN-Startseite:

Benutzer können nach links oder rechts streifen, um die aktuellen Schlagzeilen zu durchsuchen. Internet Explorer macht diesen Vorgang mithilfe von CSS-Andockpunkten noch benutzerfreundlicher. Es handelt sich hierbei um die gleiche Technologie zur hardwarebeschleunigten Verschiebung, die in IE auch zum Verschieben einer Webseite über Toucheingabe zum Einsatz kommt. Benutzer erhalten so die gewohnten Toucheingabeeffekte, wie z. B. Verschiebeträgheit und Anstoßen an Verschiebegrenzen. Zusätzlich werden Inhalte nach dem Verschieben vom Browser an die nächste Schlagzeile angedockt.

Der Code für eine solche Benutzeroberfläche ist einfach zu schreiben, denn es sind nur zwei neue CSS-Zeilen erforderlich:

 <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> 

Dieser Code funktioniert mit Toucheingabe in IE10 und IE11. Neu in IE11 ist, dass das gleiche Markup automatisch auch mit Mausrad, Pfeiltasten und Touchpad funktioniert – Benutzern steht diese Oberfläche daher auf jedem Gerät zur Verfügung, das sie gerade zum Browsen verwenden. Um eine ähnliche Oberfläche in JavaScript zu schreiben sind oft hunderte von Codezeilen erforderlich. Häufig wird kein Fingerspitzen-Anheften angeboten, und auf Low-End-Hardware kommt es normalerweise zu deutlichen Leistungsproblemen.

CSS-Andockpunkte folgen direkt auf die Zeigerereignisse, die den Status Candidate Recommendation erreichten und die wir zuerst vor einem Jahr der W3C-Arbeitsgruppe vorschlugen. CSS-Andockpunkte stellen eine weitere Möglichkeit dar, im Internet reichhaltige, immersive Benutzeroberflächen anzubieten, die für die Toucheingabe optimiert aber auch gut für andere Eingabemethoden geeignet sind.

-Jacob Rossi und Matt Rakow, Program Managers, Internet Explorer