Förderung der Webstabilität mit der IE10 Release Preview

  • Article

Im Rahmen der Planung der Windows 8 Release Preview haben wir alle W3C-Entwurfsstandards überprüft, die von IE10 unterstützt werden. Dabei haben wir insbesondere Spezifikationen mit folgenden Eigenschaften untersucht:

  • Stabilität, d. h. es gab kürzlich keine Ergänzungen oder Änderungen, und es werden keine Umbenennungen oder wesentlichen Änderungen erwartet
  • Unterstützung durch mindestens zwei weitere Browsern neben IE10.
  • Interoperabilität zwischen diesen Browsern für die wichtigsten Nutzungsszenarien der entsprechenden Funktionen
  • Derzeitig im Web verwendet, auch ohne Präfix
  • Status „Candidate Recommendation“ seit der Windows 8 Consumer Preview oder voraussichtlich im Jahr 2012 erreicht

Die folgenden W3C-Entwurfsstandardfunktionen erfüllen diese Kriterien und werden jetzt ohne Präfix von IE10 unterstützt:

Um die Kompatibilität mit den in der Windows 8 Consumer Preview entwickelten Sites und Apps sicherzustellen, werden diese Standards mithilfe der Microsoft-Herstellerpräfixe (‑ms‑/ms) in der mit dem Herstellerpräfix versehenen Form auch von IE10 unterstützt.

IE10 unterstützt die folgenden W3C-Entwurfsstandards in der mit dem Herstellerpräfix versehenen Form. Unserer Auffassung werden die oben aufgeführten Kriterien von diesen Entwürfen noch nicht erfüllt:

Von experimentell zu stabil

Wenn neu entstehende Standards in Webbrowsern implementiert werden, werden neue Funktionen mit einem eigenen Herstellerpräfix versehen: Eine Formatvorlageneigenschaft, die mit dem Präfix ‑moz‑ versehen wurde, deutet auf ein experimentelles CSS-Feature in Firefox von Mozilla hin, ‑ms‑ hat die gleiche Bedeutung für Internet Explorer von Microsoft, ‑o‑ für Opera, und ‑webkit‑ für WebKit-basierte Browser, einschließlich Chrome von Google und Safari von Apple. Die Objektmodellequivalente des Features erhalten das gleiche Präfix.

Neue Plattform-APIs wie window.requestAnimationFrame() werden derzeit ebenso als window.mozRequestAnimationFrame(), window.webkitRequestAnimationFrame() oder window.msRequestAnimationFrame() aufgerufen.

Browserhersteller verzichten in der Regel auf ihr Präfix, sobald die entsprechende Spezifikation die „Candidate Recommendation“-Stufe erreicht hat. Diese Benennungskonvention verfolgt eine Reihe von Zielen, z. B.:

  • Weiterentwicklungsmöglichkeiten für die Spezifikation: Ohne Präfixe können Editoren durch Webinhalte, die für frühe Implementierung(en) geschrieben wurden, eingeschränkt werden. Dadurch werden nützliche Ergänzungen und Änderungen erschwert oder sogar verhindert.
  • Trennung experimenteller Implementierungen: Die Fehler oder die Wahl der Entwurfsversion eines bestimmten Browsers haben keinen Einfluss auf andere Browser.
  • Dokumentation der Formatvorlage: Die herstellerspezifischen Abhängigkeiten einer Formatvorlage werden ausführlich dokumentiert.

Andere Standards sind nicht von Herstellerpräfixen abhängig. Beispielsweise wurden neue HTML-Elemente, die mit HTML5-Spezifikationen wie <canvas> und <video> eingeführt wurden, von den Browserherstellern nie mit Präfixen versehen.

Bewährte Methoden im Web

Die Praxis hat gezeigt, dass ein Entwurfsfeature ab einem bestimmten Zeitpunkt interoperabel von verschiedenen Browsern unterstützt wird. Aus diesem Grund schreiben Webentwickler folgendermaßen Deklarationen:

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

Nachdem dieses Muster ein paar mal kopiert und eingefügt wurde, gehen viele Entwickler davon aus, dass der kommende W3C-Standard mit dem heutigen Web abwärtskompatibel sein wird. Sie machen ihre Formatvorlagen dann „zukunftssicher“, indem sie eine Version der Eigenschaft ohne Präfix hinzufügen:

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

transform: rotate(30deg);

Aus Sicht der Webentwickler sind die oben aufgeführten Deklarationen nun für zukünftige Browser geeignet, die CSS-Transformationen ohne Präfix unterstützen.

Frühere Standardfeatures haben diese pragmatische Annahme tatsächlich bestätigt. Als IE9 in der ersten Plattform-Preview mit Unterstützung für die border-radius-Eigenschaft ohne Präfix versehen wurde, wurde das Feature aufgrund der bereits entwickelten zukunftssicheren Formatvorlagen auf vielen Sites genutzt.

Eine Reihe von Features befindet sich derzeit in der gleichen Entwicklungsphase. Nicht nur viele CSS-Übergangs-Demoseiten sind bereits zukunftssicher (siehe Paul Hayes’ Parallaxeffekt oder Lea Verou’s animierbare Gallerie), sondern auch Open Source-Projekte wie html5slides von Google, Homepages von Designern, Site-Logos und Lernprogramme enthalten transition-Deklarationen ohne Präfix.

Viele Übergangseffekte beeinhalten CSS-Transformationen, für die bei Lernprogrammen ebenfalls transform-Eigenschaften ohne Präfix deklariert werden.

Fertigstellen der Spezifikationen

Obwohl Webentwickler in neuem Markup die gegenseitige Annäherung von Browsern berücksichtigen, ist der Standardisierungsprozess weitaus konservativer. Während border-radius auf tausenden von Websites interoperabel war, arbeiteten die Mitglieder der CSS-Arbeitsgruppe daran, das Rendering komplexerer Fälle zu definieren, wie das Darstellen einer abgerundeten Ecke zwischen zwei angrenzenden Rändern von verschiedener Breite und Farbe. Ebenso arbeiten die Editoren von CSS-Übergängen, -Animationen und -Transformationen daran, Fehlerbedingungen zu spezifizieren, Fehler zu beheben oder seltenere Szenarien zu klären.

Um ein hohes Maß an Interoperabilität zu gewährleisten und den „Recommendation“-Status zu erlangen, müssen diese Probleme gelöst werden. Gegenwärtige und zukünftige Inhalte sind jedoch nur von relativ wenigen dieser Probleme betroffen. Sobald eine Spezifikation stabil und interoperabel ist, sollte das Web nicht von den letzten Sonderfällen beeinträchtigt werden. Dies war weder für die neuen HTML5-Elemente noch für die Fertigstellung der CSS2.1-Spezifikation notwendig. In beiden Fällen waren keine Präfixe erforderlich.

Solide, durch öffentliche Testsuites gesicherte Spezifikationen sind zwar entscheidend, jedoch müssen die gleichen Deklarationen mehrfach von Webentwicklern wiederholt werden, bevor eine „Candidate Recommendation“ veröffentlicht wird. Dies führt dazu, dass Spezifikationsvollständigkeit wichtiger als Inhaltsstabilität wird.

Das Fertigstellen einer Spezifikation ist zeitaufwändig. Ein Beispiel hierfür sind CSS-Farbverläufe, die seit 2008 verwendet werden. Der erste Entwurf mit einer interoperablen Lösung stammt von 2009. Die „Candidate Recommendation“ wurde im April 2012 veröffentlicht. Doch inzwischen war die standardisierte Syntax nicht mehr mit der Syntax mit Präfix kompatibel, die auf zahlreichen Websites bereitgestellt wurde. Die Release Preview von IE10 enthält die erste öffentliche Umsetzung der aktuellen Spezifikation ohne Präfix. (Die interoperablere Version mit dem Herstellerpräfix ‑ms‑ wird ebenfalls von IE10 unterstützt.)

Bedeutung für Ihren Code

CSS-Farbverläufe

Obwohl weitreichend interoperabel, bezieht sich die Syntax für Farbverläufe mit Präfix, die von allen modernen Browsern unterstützt wird, auf einen mittlerweile veralteten Entwurf der Spezifikation. Diese frühere Syntax ist nicht mit der aktuellen „Candidate Recommendation“ kompatibel. Beispielsweise konnten Sie einen Farbverlauf bislang folgendermaßen deklarieren:

background: -ms-linear-gradient(left, yellow, red);

In diesem Fall können Sie nicht einfach das Präfix ‑ms‑ entfernen, um eine Version ohne Präfix zu erstellen. Da die IE10-Funktion für lineare Farbverläufe ohne Präfix der neuesten Spezifikation entspricht, muss der Code folgendermaßen lauten:

background: linear-gradient(to right, yellow, red);

Die IE10-Unterstützung für CSS-Farbverläufe wird in einem kommenden Blogbeitrag ausführlicher behandelt.

Kaskadierung und das CSS-Objektmodell

Durch die Kaskade werden CSS-Eigenschaften mit Präfix wie erwartet aufgelöst. Verwenden Sie folgende Regel (und beachten Sie den im Vergleich zur Deklaration ohne Präfix höheren Rotationswinkel):

-ms-transform: rotate(30deg);

transform: rotate(60deg);

Das Element wird um 60 Grad gedreht: Die beiden Eigenschaften werden als einander entsprechend betrachtet. Die zweite Deklaration erhält den Vorzug. Die zugehörigen CSSOM-Eigenschaften werden ebenfalls als einander entsprechend betrachtet: Wenn Sie den berechneten Wert der Formatvorlageneigenschaften transform und msTransform anfordern, erfolgt mit beiden die bevorzugte Drehung um 60 Grad.

Ebenso wird beim Festlegen von element.style.transform auch element.style.msTransform festgelegt und umgekehrt.

Serialisierung von Eigenschaftennamen

Eigenschaften wie transition-property akzeptieren eine Liste mit CSS-Eigenschaftsnamen. Beispielsweise kann ein Entwickler folgenden Code verwenden, um für die transform-Eigenschaft einen Übergang von zwei Sekunden festzulegen:

-ms-transition-property: -ms-transform;

-ms-transition-duration: 2s;

IE10 Release Preview serialisiert den Wert sowohl für style.msTransitionProperty als auch für style.transitionProperty als „transform“. Beachten Sie, dass das ursprüngliche Präfix nicht beibehalten wird.

Dies gilt auch für die propertyName-Eigenschaft von Übergangsereignissen.

Namen für die Ereignistypen „Animation“ und „Transition“

IE10 Release Preview ermöglicht die Registrierung von „Animation“- und „Transition“-Ereignislistenern für Namen mit und ohne Präfix. Beispielsweise sind folgende Angaben gleichwertig:

element.addEventListener("MSTransitionEnd", myHandler, false);

element.addEventListener("transitionend", myHandler, false);

Jedoch gibt IE10 Release Preview in der type-Eigenschaft des Ereignisobjekts stets einen Namen ohne Präfix zurück.

Wie geht es weiter?

Wir werden Updates zu den neuen W3C-Testfällen für alle Features veröffentlichen, die in IE10 nun ohne Präfix unterstützt werden. Als Mitglieder und Redakteure der Working Group werden wir mit unseren Kollegen daran arbeiten, diese Spezifikationen hin zur „Candidate Recommendation“ zu entwickeln.

Wir freuen uns über Ihr Feedback zur Unterstützung dieser Funktion und deren browserübergreifenden Kompatibilität.

– Sylvain Galineau, Program Manager, Internet Explorer