"Do No Evil" mit Browserweichen

Neue Webtechnologien wie HTML5 & CSS3 üben einen geradezu magischen Reiz für Webentwickler aus. In Internet Explorer 9 baut Microsoft stabile Elemente aus den sich noch in Entwicklung befindlichen W3C-Spezifikationen ein. Für experimentelle Teile, die trotz des frühen Entwicklungstandes schon großes Interesse hervorrufen, stellen wir Prototypen auf unseren HTML5 Labs als Diskussions- und Feedbackgrundlage zur Verfügung.

Viele Webentwickler wollen hier ganz vorn mit dabei sein und bauen eifrig Beispielseiten zur Veranschaulichung der neuen Funktionen. Dabei wird manchmal übersehen, dass HTML5 & Co. noch lange nicht fertig sind, sondern die einzelnen Bestandteile der Spezifikationen unterschiedliche Entwicklungstände aufweisen. Die Weiterentwicklung führt zu teils gravierenden Änderungen, bei denen Abwärtskompatibilität nicht garantiert wird.

Für das heutige Posting greife ich einmal ein Beispiel von Constant Dullaart auf. Auf therevolvinginternet.com animiert er (offensichtlich inspiriert von Chris Collins Uneven Google) die Startseite von Google mit Hilfe von CSS Transforms. Es ist gar nicht so leicht, eine Suche einzugeben, wenn sich das Fenster die ganze Zeit dreht ;-)

therevolvinginternet_ff4 

Was fiel mir nun daran auf? Als erstes ist das Ergebnis je nach verwendetem Browser unterschiedlich. In Chrome, Firefox, Safari und Opera bekommt man die Demo angezeigt, wobei Firefox ohne Ton läuft (zu dem Warum? komme ich später). Nutzer des Internet Explorers werden jedoch mit der Meldung “This website does not function properly in microsoft's internet explorer browser (internet explorer is not fully compliant with css 3 and new developments in this field). ” ausgegrenzt:

therevolvinginternet_ie9beta

Zusätzlich erfordert die Browsercheck-Seite Adobe Flash, da ein Video eingebunden ist, welches dem Anwender die eigentliche Funktion der Webseite illustrieren soll. Das ist nur konsequent: Anwendern, deren Browser CSS Transforms nicht unterstützt, werden wohl auch kein HTML5 Videotag verarbeiten können.

Gewundert habe ich mich allerdings, als ich die Seite mit einer neueren IE9 Platform Preview aufrief. Wir unterstützen seit IE9 PP6 auch CSS Transforms – allerdings funktioniert trotzdem die Demo nicht. Auch IE9 PP7 wird als Browser ausgegrenzt:

therevolvinginternet_ie9pp7

Da läuft doch etwas schief. Was ist hier los? Der Entwickler der Seite unterscheidet, mit welchem Browser Anwender die Seite besuchen und liefert unterschiedliche Inhalte aus. Jedoch ermittelt er dabei nicht die Fähigkeiten des Browsers, sondern grenzt mit einer schlichten Browserweiche alle Versionen von Microsoft Internet Explorer aus:

 <script language="JavaScript" type="text/JavaScript"> 
  if(navigator.appName == "Microsoft Internet Explorer")
  {
    window.location = "browsercheck.html"
  }
</script>

Genau diese Art des Einsatzes von Browserweichen verhindert jedoch die Weiterentwicklung des Webs. Was im Juli 2010 noch stimmte (IE9 unterstützte zu diesem Zeitpunkt CSS Transforms noch nicht), hat sich wenige Wochen später schon geändert. IE9 ≥PP6 verfügt über die notwendige Funktionalität. Hätte die Prüfung auf die Funktion abgehoben und nicht auf den Browsernamen, müsste man nichts verändern. Die Seite würde mit neueren Browserversionen einfach funktionieren.

Auf dieses Problem stoße ich immer wieder bei Beschwerden, dass eine Seite nicht mit IE9 funktionieren würde. Vor allem ist es nicht wirklich neu – schon bei IE8 hatten viele Webmaster Probleme mit ihren Browserweichen. Leider entschieden sich viele, ihre kaputte Weiche einfach um einen Test auf IE8 hin zu erweitern und laufen nun bei IE9 in die gleiche Falle.

Take the high road!

Macht kaputte Browserweichen nicht noch kaputter! Prüft lieber auf Funktionen und nicht auf Browsernamen! Tools wie zum Beispiel Modernizr können dabei helfen, wenn einem Funktionstests zu kompliziert sind. Das Ergebnis ist viel besser für alle Anwender im Web.

Ich nehme mal das obige Beispiel und schaue, wie es sich verbessern lässt. Im ersten Schritt kommentiere ich die kaputte Browserweiche aus:

<!--
<script language="JavaScript" type="text/JavaScript">
if(navigator.appName == "Microsoft Internet Explorer")
{
window.location = "browsercheck.html"
}
</script>
-->

Als nächstes “repariere” ich die Zeile mit den CSS Transforms, so dass neben dem eigentlichen CSS-Kommando 'transform' (welches noch kein Browser unterstützt) und den Prefixversionen für Chrome & Safari ('WebkitTransform'), Firefox ('MozTransform') und Opera ('OTransform') auch 'msTransform' für Internet Explorer mit aufgenommen wird:

 var properties = ['transform', 'msTransform', 'WebkitTransform', 'MozTransform' , 'OTransform'];

Diese kleine Änderung reicht aus, damit das Beispiel auch in IE9 ≥PP6 läuft:

therevolvinginternet_html5

Was macht man nun aber mit Browsern, die CSS Transforms nicht unterstützen? Zum Beispiel kann man einfach an das if ein else anhängen, welches dann eine andere Seite präsentiert:

 if (property) {
  var d = 0;
  setInterval(function () {
  div.style[property] = 'rotate(' + (d++ % 360) + 'deg)';}, 100);
  } else {
  window.location = "browserweiche.html"
}

Kommen wir zum Schluss noch auf das Problem, dass mit Firefox kein Ton zu hören ist. Man mag es kaum glauben, aber diese Webstandard-Demo funktioniert nur, wenn man Flash installiert hat. Habe ich etwas verpasst? Ist Flash jetzt auch vom W3C als Webstandard anerkannt worden? Oder hat Constant Dullaart Workarounds für alle Browser eingebaut, die nach seinen Worten “not fully compliant with … new developments in this field” sind und nicht Microsoft Internet Explorer heißen?

Die Hintergrundmusik ist The Windmills Of Your Mind interpretiert von Dusty Springfield. Meines Wissens ist der Song nicht wirklich frei aber Constant Dullaart hat ihn auf seinem Webserver liegen und nutzt ihn als MP3-Datei in seiner Demo. Wie kommt jetzt Flash hier ins Spiel? In der Webstandard-Demo (!) wird zum Abspielen der Musik nicht das HTML5 <audio> Tag genutzt, sondern ein Flashplayer als Wrapper um die MP3-Datei:

 <script type="text/javascript" src="swfobject.js"></script>
<div id="player"></div>
<script type="text/javascript">
  var so = new SWFObject('player.swf','mpl','0','0','9');
  so.addParam('allowscriptaccess','always');
  so.addParam('allowfullscreen','true');
  so.addParam('flashvars','&duration=149&file=Dusty_Springfield_The Windmills_Of_Your_Mind.mp3&autostart=true&repeat=always');
  so.write('player');
</script>

Ich vermute, dass Constant sich mit diesem Workaround behilft, da nicht alle modernen Webbrowser MP3-Dateien in HTML5 <audio> Tags abspielen können. Zum Beispiel unterstützt Firefox hier nur “offene” Standards. Mozilla will anscheinend, dass Anwender die überwältigende Mehrzahl an Musikstücken nicht nutzen können, wenn sie Firefox einsetzen. Genauso wie Google zukünftig H.264 ausgrenzt.

Es sei denn, man setzt das nicht gerade “offene” Flash ein, welches Google in Chrome weiterhin unterstützt. Ich musste schon ein wenig schmunzeln, als ich diese Inkonsequenz sah. Was bei Microsoft nicht implementiert wird, wird ausgegrenzt. Was bei anderen fehlt, da baut man einen Workaround ;-)

Ist das wirklich im Sinne aller Anwender? Weniger Wahl statt mehr? Wir sprechen doch auch nicht alle Esperanto, wie mein Kollege Tim Sneath in seinem Blogpost An Open Letter from the President of the United States of Google scherzhaft vorschlägt.

Also ändere ich zum Schluss noch den Teil für die Hintergrundmusik. Es ist im Grunde ganz einfach. Als erstes wieder den Flashplayer auskommentieren:

<!--
<script type="text/javascript" src="swfobject.js"></script>
<div id="player"></div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','0','0','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&duration=149&file=Dusty_Springfield_The
Windmills_Of_Your_Mind.mp3&autostart=true&repeat=always');
so.write('player');
</script>
-->

Dann ein <audio>-Tag hinzufügen und für Firefox noch eine Kopie des Songs im OGG-Format ablegen:

 <audio controls="none" autoplay="true" loop="true">
  <source src="Dusty_Springfield_The Windmills_Of_Your_Mind.mp3" />
  <source src="Dusty_Springfield_The Windmills_Of_Your_Mind.ogg" />
  This browser does not support HTML5 MP3 or OGG audio files.
</audio> 

Schon funktioniert das Ganze prima auch ohne Flash und ist eine wahrhaftige Webstandard-Demo. Wer die von mir veränderte Version einmal ausprobieren möchte, kann diese unter der URL techfiles.de/therevolvinginternet/html5.html aufrufen. Da ich aber die Verwendung des Songs von Dusty Springfield rechtlich nicht bewerten kann, habe ich eine eigene Demo mit einem Song, der unter CC Attribution steht, gebaut: techfiles.de/therevolvinginternet

Have fun!
Daniel