Vor kurzem stießen wir auf einem Beitrag von wpbeginner.com (Link), der erklärt wie man direkt über WordPress mit PHP dem Body-Tag passende Browser und OS Klassen vergibt. So weit so gut.  Es gibt jedoch einen kleinen, aber nicht so feinen Nachteil bei dieser Methode. Sie ist nicht Caching-fähig.

Das heisst, dass sobald Caching Tools wie Cachify oder W3TC mit im Spiel sind, diese Methode nicht mehr funktioniert, da das Generieren des Codes über WordPress/PHP übersprungen wird. Caching Plugins erstellen nämlich beim ersten Aufruf ein statisches HTML Abbild der Seite und speichern sie ab, um direkt auf diese zuzugreifen. Das spart Ressourcen und Ladezeiten.

Ist der erste Besucher nun beispielsweise mit dem Internet Explorer 8 unterwegs, wird das HTML Dokument mit der IE8 und Windows Body-Klasse abgespeichert. Besucher, die dann später selbst mit einem anderen aktuellen Browser die Seite besuchen, haben u.U. Darstellungsprobleme, da das CSS der IE8 Klasse greift. Noch schlimmer wird es z.B. mit einem iPhone. So würden mobiloptimierte CSS-Styles greifen – selbst wenn man mit einem aktuellen Desktop Browser die Seite ansurft.

Die Lösung

Aus diesem Grund habe ich ein kleines Javascript geschrieben, das dynamisch die Browser und Betriebssystemklassen in den Body-Tag schreibt.

Da es pures Javascript ist, benötigt man kein Framework wie jQuery o.ä. und es ist auch Caching-fähig.

Dieses Javascript habe ich direkt in ein kleines WordPress Plugin gepackt, welches Ihr leicht in euer WordPress installieren könnt. Dieses Plugin bietet keine Optionen, sondern bettet einfach nur das Javascript-File in den Code ein.

Das Javascript File ist mit 512 Bytes sehr leichtgewichtig.

Bei Fragen, Problemen, Hinweisen oder Verbesserungsvorschlägen hinterlasst einfach einen Kommentar!

Download

Version 0.1: Download

Wissenswertes

Das Javascript vergibt in Version 0.1 folgende Klassen:

Browser:

• chrome
• safari
• firefox
• msie
• opera

Verschiedene Versionen, wie z.B. des MSIE werden in zukünftigen Updates nachgereicht.

Betriebssystem:

• windows
• osx
• linux
• unix

Geräte:

• iphone
• ipad

Weitere Geräte werden ebenfalls in zukünftigen Updates nachgereicht.