Windows 7

Blog von Microsoft Deutschland

"Do No Evil" mit Browserweichen

"Do No Evil" mit Browserweichen

  • Comments 4
  • Likes

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

Comments
  • Im Chromium unter Linux stürzt deine veränderten Seiten nach ca 75% der Drehung komplett ab. Warum? Bug im Chromium? Experimentell in CSS3? Ich weis es nicht. Wird sich sicher auch nur mit einer neuen Version des Browsers lösen lassen.

    Den IE9Beta1 kann ich auf meinem Win7-64bit nicht nutzen, der zerbröselt mein Windowssystem. Neuinstallation bzw. recoverypoint return hilft nur. Ka was da MS wieder gebaut hat. Unter Win7-32bit Starter läuft der IE9 Beta1 einwandfrei. Nur für das CSS Transform hat der nicht die Rechenleistung(Atom CPU).

    MfG Dirk

  • Das dürfte ein Bug im Chromium sein. Hast Du mal einen anderen Browser wie z.B. Firefox unter Linux probiert?

    Die Probleme mit IE9 Beta auf Windows 7 x64 können möglicherweise auf Deine Grafikkarte zurückzuführen sein. Eventuell brauchst Du da einen aktuelleren Treiber. Oder Du deaktivierst die Hardwarebeschleunigung im IE9, wie ich in der IE9-FAQ geschrieben hatte:

    Softwarerendering
    blogs.technet.com/.../internet-explorer-9-beta-faq.aspx

    Viele Grüße,
    Daniel

  • Sie wurden gekickt (eine gute Sache) - Trackback von dotnet-kicks.de

  •   Jetzt ist der Internet Explorer 9 seit einiger Zeit verfügbar und eigentlich sprechen die Features , die Performance und natürlich auch die Security klar für das Ablösen des aktuellen Browsers durch den Internet Explorer 9. Aber manchmal ist dies leichter gesagt als getan und daher möchten wir heute ein wenig Hilfestellung bei dem allgemeinen Vorgehen liefern. Zu allererst muss natürlich verstanden werden, welche Probleme sich überhaupt ergeben können und wie diese zu Lösen sind. Die Hauptprobleme kommen dadurch zustande, dass insb. ältere Anwendungen speziell für eine Browserversion optimiert wurden und diese dadurch nicht in anderen Browsern korrekt/vollständig funktional sind. Daraus ergibt sich vor allem folgende Problemseiten/anwendungen: Seiten die für IE6 gebaut wurden Seiten die für IE7 gebaut wurden Seiten die für IE8 gebaut wurden Hier gibt es je nach Problempunkt nun verschiedene Möglichkeiten. Die für alle Punkte mögliche, aber auch aufwändigste – sowohl Zeit wie auch Geld -  ist es die bestehende Anwendung für den Internet Explorer 9 umzubauen, bzw. besser auf einen Standard wie HTML5 zu bringen. Da dies zumindest für eine möglichst schnelle Umstellung auf IE9 keine Lösung darstellt, hier im Einzelnen genauere Informationen zu 1.-3.: zu 1.: Seiten, die dediziert für IE6 optimiert wurden, stellen das größte Hindernis dar, da diese durch den inzwischen hoffnungslos veralteten Browser (also hauptsächlich dessen Rendering und Javascript Engine) oft sehr speziell auf Eigenarten des IE6 getrimmt wurden. Diese Eigenarten wurden über die nachfolgenden Internet Explorer Versionen zunehmend entfernt und der Internet Explorer wurde spätestens mit IE8 “standardkonform”. Zu aller erst muss also überprüft werden, ob und wenn ja in welchem Maße, die Optimierungen tatsächlich Auswirkungen auf das Verhalten bei der Verwendung mit IE8/9 haben. Dazu müssen zwei Dinge getan werden: a) Sichtprüfung und b) Funktionsprüfung. Ggf. müssen dabei sog. “ Browserweichen ” vorher (!!) entfernt werden, da diese oftmals ungünstig erstellt wurden und z.B. nur überprüfen “IF ==IE6” und nicht “IF >= IE6”. Anschließend kann z.B. mittels der “ Super Preview ” die Sichtprüfung durchgeführt werden und basierend darauf muss das Design der Anwendung angepasst werden. Parallel (oder danach ) sollte auch ein umfangreicher Funktionstest durchgeführt werden, denn grade auch bei Javascript Funktionen hat es in den letzten 11 Jahren (sprich seit IE6) ein paar Änderungen gegeben. Wichtig bei dem Funktionstest ist, dass hier u.U. mit dem (manuellen) Ändern des “ Document Modus ” sogar Abhilfe geschaffen werden kann, ohne dass auch nur eine Zeile Code angefasst werden muss. Wenn man sehr viel Glück hat, kann hierdurch u.U. sogar auch ein Design Problem gelöst werden. Der dem IE6 ähnlichste Document Modus ist der “Quirks” oder auch “IE5” Modus, sprich mit diesem sollte zuerst getestet werden. Basierend auf den Ergebnissen müssen dann entsprechende Maßnahmen auf Code-Level ergriffen werden. Dabei sollte darauf geachtet werden, dass Standard Konform gearbeitet wird. (HTML4&CSS2.1 oder evtl. sogar schon HTML5&CSS3 – auch wenn HTML5 und CSS3 noch keine verabschiedeten Standards sind und hier u.U. noch Änderungen am Standard vorgenommen werden und man sich dadurch in Gefahr begibt, dass eine solche Anwendung erneut angefasst werden müsste)    zu 2.: Sowohl in IE8 wie auch in IE9 ist der sog. “Kompatibilitätsmodus” enthalten, welcher die Rendering UND (!!) die Javascript Engine auf IE7 zurückstellt. Dieser Modus ist per default für alle Intranet Seiten aktiv, kann aber auch durch einen Entwickler, den Serveradmin oder den Domänen Admin eingestellt werden, vgl. hierzu auch: IE8/9: Compatibility View–Wie kann manuell, serverbasiert oder per Policy das Verhalten beeinflusst werden? zu 3.: Auch dies stellt sich unkritisch dar, denn der IE9 enthält auch einen IE8 Kompatibilitätsmodus, der auf sehr ähnliche Weise genutzt werden kann. Unsere

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment