PHP: Detector erkennt, was der Besucherbrowser kann

Kein Beitragsbild

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Gerade beim Einsatz von HTML5 und CSS3 spielen nicht alle Browser gleichermaßen mit. Wer auf Nummer sicher gehen will und mit Fallback-Lösungen möglichst alle aktuellen und möglicherweise auch ältere Browser unterstützen möchte, muss die durch die Browser unterstützten Features kennen. Mit Detector steht eine umfangreiche PHP-Bibliothek bereit, welche die unterschiedlichen Browser und ihre Features erkennt.


Beispiel für die Möglichkeiten von Detector

Ist die PHP-Bibliothek auf den Server kopiert und sind die ensprechenden Schreibberechtigungen angelegt, muss die Bibliothek noch in jede PHP-Datei, in der Detector genutzt werden soll, eingebunden werden. Das geht so:

require_once("lib/Detector.php");

Über die Variable „$ua“ (für User Agent) können nun Browser, sowie die jeweils unterstützten Features abgefragt werden. Für jeden User Agent wird anhand eines eindeutigen Hashwertes ein JSON-Objekt mit allen Informationen angelegt.

Browser und Features abfragen

Die Abfrage einzelner Informationen zu Browser, Betriebssystem oder Features ist spielend einfach. Will man den Namen des verwendeten Browsers herausfinden, reicht folgende Zeile:

echo $ua->browser;

Ausgegeben wird hierbei ausschließlich der Browsername (zum Beispiel Chrome oder Firefox). Auf ähnliche Weise lassen sich auch Browserversion („version“), Betriebssystem („os“) und Betriebssystemversion („osVersion“) herausfinden.

Auch Informationen zum verwendeten Gerät können abgefragt werden. Auf der Grundlage verschiedener Werte findet Detector heraus, ob es sich um ein Desktop-, Tablet- oder sonstiges Mobilgerät handelt. Dies ist beispielsweise nützlich, um je nach Gerät unterschiedliche Inhalte auszugeben:

if ($ua->isComputer) {
  include_once("computer.php");
} else if($ua->isTablet) {
  include_once("tablet.php");
} else if($ua->isMobile) {
  include_once("computer.php");
}

Mit dem Parameter „touch“ kann ermittelt werden, ob es sich beim Gerät um eines mit Touchdisplay handelt.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Der viel interessantere Teil von Detector ist jedoch das Erkennen bestimmter Browserfeatures. Damit ist die Unterstützung konkreter HTML5-Elemente und CSS3-Eigenschaften gemeint. So lässt sich beispielsweise herausfinden, ob bestimmte HTML5-APIs unterstützt werden:

echo $ua->localstorage;

Auch andere APIs wie die Filesystem- oder Webworker-API können abgefragt werden. Ebenso ist es möglich, die Unterstützung der vielen neuen „type“-Attribute des INPUT-Elementes abzufragen:

echo $ua->inputtypes->email;

Analog dazu lässt sich die Unterstützung neuer CSS3-Eigenschaften, wie etwa Animationen, abfragen:

echo $ua->cssanimations;

Familien definieren und abfragen

Je nachdem, welche HTML5- oder CSS3-Features eingesetzt sind, werden innerhalb eines Webprojektes eventuell immer dieselben Abfragen gestellt, um sich eines gewissen Must-have-Standes zu vergewissern. Hier besteht mit Detector die Möglichkeit, alle erforderlichen Features in einer Familie zu bündeln.

Über ein JSON-Objekt fasst man alle Features, die ein Browser unbedingt unterstützen muss, in einer Familie zusammen:

{
  "css3features": { 
    "features": ["cssanimations", "csstransforms", "csstransitions"]
  }
}

Das JSON-Objekt muss als Datei im „config“-Ordner von Detector gespeichert werden. Anschließend kann es über die Variable „$ua“ abgefragt werden:

echo $ua->css3features;

Das Beispiel gibt „true“ beziehungsweise „1“ aus, wenn alle drei Features vom Browser unterstützt werden. Die Zusammenstellung von Familien kann auch komplexer ausfallen:

{
  "keinApple": { 
    "os": "!iOS",
    "browser": "Firefox||Chrome"
  }
}

Im Beispiel wird „true“ beziehungsweise „1“ ausgegeben, wenn das Betriebssystem nicht iOS („!“) und der Browser entweder Firefox oder Chrome („||“) ist.

Nutzung und Fazit

Detector von Dave Olsen kann uneingeschränkt  kostenlos genutzt werden. Detector bringt umfangreiche und nützliche Möglichkeit mit, um Browser und die jeweils unterstützten Features abzufragen. Vor allem beim Einsatz neuster HTML5- und CSS3-Techniken lohnt sich ein Blick auf die Bibliothek.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Oink
Gast

In den PHP-Quellcodebeispielen wurde das “>” zerstückelt, dadurch wird es nicht korrekt dargestellt.

wpDiscuz