IE Browserweichen mit PHP

Im konkreten Beispiel ist es wichtig zu prüfen, ob der Browser ein Internet-Explorer ist, und ob er SVG unterstützt. SVGs werden ab dem IE9 unterstützt.

Die erste Abfrage mit preg_match sucht nach der Zeichenkette MSIE, diese ist nur in den älteren Versionen (< 10?) in $_SERVER['HTTP_USER_AGENT'] enthalten. Die zweite Abfrage mit preg_match ist für die neuen Versionen. Es wird die Zeichenkette "Trident" abgefragt und die Versionsnummer steht hinter "rv:".
$ie = false;
preg_match(‚/MSIE (.*?);/‘, $_SERVER[‚HTTP_USER_AGENT‘], $matches);
if(count($matches)<2){ preg_match('/Trident\/\d{1,2}.\d{1,2}; rv:([0-9]*)/', $_SERVER['HTTP_USER_AGENT'], $matches); } if (count($matches)>1){
// Ja, es wird ein Internet-Explorer verwendet
$ie = true;
$version = $matches[1];
}
}

Browserunterstützung testen für die Matheburg

Screenshot Adventskalender
Screenshot Adventskalender
Das Spiel und der zugehörige Adventskalender 2014 verwenden aktuelle Browsertechniken, darunter SVG, CSS3 und html5.

Media-Queries
Für unterschiedliche Geräte können über Media-Queries verschiedene CSS-Eigenschaften vergeben werden. Bei der Verwendung von SVG mit eine Breite von 100%, ist dies nicht extra erforderlich, da sich das SVG passend in die Seite zoomt.

Für alle zusätzlichen Informationen, außerhalb des SVG’s kann es natürlich sinnvoll sein, eine Unterscheidung vorzunehmen.
Die Browserunterstützung für Media-Queries ist sehr hoch.
Details dazu werden demnächst an dieser Stelle dokumentiert.

SVG

Der Internet Explorer unsterstützt SVG‘ s erst ab der Version 9. Die SVG eigenen Programmierung in SMIL ohne JavaScript wird selbst in der aktuellsten Version des Internet Explorers nicht unterstützt. Laut Microsoft ist die Implementierung auch in absehbarer Zeit nicht geplant.

SVG erlaubt zeit- und eventgesteuerte Animationen, die ohne viel Aufwand programmiert werden können.

Da bei einem Online-Spiel ohnehin JavaScript benötigt wird, stellt dies kein unlösbares Problem dar. Die Umsetzung der Animationen im Spiel werden zumindest als Fallback in JavaScript umgesetzt.

Schade!

html5 und css3
Leider gibt es noch weitere Probleme mit dem Internet-Explorer, so wird z.B. die Vorgabe ein Inline-SVG mit 100% Breite darzustellen vom Internet-Explorer ignoriert.

Neugierig? Hier kann man schon mal einen Blick auf den Adventskalender werfen!

Das Problem?Die Herausforderung!

In der Vergangenheit wurden viele Abweichungen im Internet-Explorer mit Bowser Hacks behohen.
Ab dem Internet Explorer 10, werden bedingte Kommentare nicht mehr unterstützt. Schade eigentlich.
Ja der Internet Explorer 10 ist schon ziemlich nah an den anderen Browsern dran, was die Umsetzung des W3C-Standards betrifft, aber knapp vorbei ist eben auch vorbei!

Ab dem Internet-Explore 10 kann ein Hack mit mediaqueries eingesetzt werden:

@media -ms-high-contrast()

Quelle:www.css-hack.de/Internet+Explorer/IE+10

Dieser Hack führt allerdings dazu, dass diese Seite nicht mehr W3C-conform ist!

Der Adventskalender und das Spiel werden serverseitig mit PHP umgesetzt. Somit besteht die Möglichkeit den Browser aus dem Server-Request ($_SERVER) auszulesen.

Aber auch hier hat Microsoft uns neue Steine in den Weg gelegt, denn die Zeichenkette „MSIE“ in $_SERVER[‚HTTP_USER_AGENT‘] vom IE11 nicht mehr übergeben wird.

Für jede Herausforderung gibt es mindestens eine Lösung, auch in diesem Fall.
„Aber Zeit, sehr viel Zeit geht oft dabei verloren!“

Nach dem Internet-Explorer, noch ein Wort zu den anderen Browser im Test:

Ergebnis – Browsertest

  • Internet Explorer (getestet mit IE11 auf Win7 64 bit):
    SVG und CSS3 werden dargestellt.
    Das zu kleine Inline-SVG (Breite: 100%) wird mit einer zusätzlichen ie.css auf eine feste Breite(1000px festgelegt.)

    ToDo: ggf. Anpassung mit MediaQueries für mobile Geräte? Prüfen, ob notwendig!

  • Firefox (getestet mit Firefox 33.0): der Mozilla Firefox hat es gut, ich verwende den Firefox als Entwicklungsumgebung.
  • Opera (getestet mit Opera 25.0 auf Win7 64 bit):Die SVG-Grafik wird richtig dargestellt. Bei CCS3 fehlt die senkrechte Linie bei dem linierten Papier
    .liniert {
    background-color: #fff;
    background-image:
    linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
    linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
    }

    Wenn statt 100% ein em-Wert, z.B. 40em verwendet wird, wird die senkrechte Linie im Opera angezeigt, allerdings zu dick. Optisch sieht es ohne Linie im Opera besser aus, deshalb ist der Punkt vorerst zurückgestellt.
  • Chrome (getestet mit Chrome 38.0 – auf Win7 64 bit):CSS3-Problem, wie Opera. SVG OK.
  • Safari (getestet mit Safari 5.1.7 – auf Win7 64 bit):SVG OK.
    Der linierte und andere CSS3-Hintergründe werden nicht angezeigt. Diese Version benötigt noch das Browser-Prefix -webkit-.
    Ab Version 7 wird kein Browser-Prefix benötigt. Die aktuelle Version ist 8.

    Für Windows steht aktuell nur die Version 5.1.7 zum Download, da die Entwicklung eingestellt ist.