Ihr kennt das auch? 5 verschiedene CSS-Dateien für alle möglichen Browser? Am besten noch unterteilt zwischen Betriebssystemen? Wie auch immer. Das Grauen und euer Leid haben ein Ende. Wir zeigen euch, wie ihr in einer CSS-Datei für alle möglichen Browser und Systeme optimieren könnt. Bei uns ist dieses Script selbst seit einiger Zeit im Einsatz. Mit diesem JavaScript Einzeiler ist es euch möglich das Betriebssystem sowie die unterschiedlichen Browser direkt per CSS-Klasse anzusprechen und entsprechende CSS Befehle und Anweisungen nur für dieses Element zu hinterlegen.
css_browser_selector.js von Rafael Lima
Die Einbindung in unseren Head-Bereich erfolgt wie gewohnt:
<script type="text/javascript" src="js/css_browser_selector.js"></script>
Ihr müsst natürlich gegenfalls den Pfad zur JavaScript Datei nochmals überprüfen und anpassen – aber wie ich euch kenne, ist euch das ja klar.
Der Clou ist, dass dieses Script – welches auch hier auf PHP-Basis zu finden ist – die entsprechen Klassen in den HTML-Tag setzt. Entspricht bei dem Rechner an dem ich gerade sitze:
System: Mac OS
Browser: Firefox 3
Engine: Gecko
JavaScript: aktiviert
Nun könnt ihr allen Besuchern eurer Website die z.B. mit dem FireFox 3 kommen, entsprechende Styles für eure Elemente hinterlegen und somit wunderbar die Browserkompatibilität eurer Website für alle möglichen Varianten herstellen. Sogar für’s iPhone!
Hier findet ihr noch alle ansprechbaren Klassen:
- win – Microsoft Windows
- linux – Linux (x11 and linux)
- mac – Mac OS
- freebsd – FreeBSD
- ipod – iPod Touch
- iphone – iPhone
- webtv – WebTV
- mobile – J2ME Devices (ex: Opera mini)
- ie – Internet Explorer (All versions)
- ie8 – Internet Explorer 8.x
- ie7 – Internet Explorer 7.x
- ie6 – Internet Explorer 6.x
- ie5 – Internet Explorer 5.x
- gecko – Mozilla, Firefox (all versions), Camino
- ff2 – Firefox 2
- ff3 – Firefox 3
- ff3_5 – Firefox 3.5
- opera – Opera (All versions)
- opera8 – Opera 8.x
- opera9 – Opera 9.x
- opera10 – Opera 10.x
- konqueror – Konqueror
- webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
- safari3 – Safari 3.x
- chrome – Google Chrome
- iron – SRWare Iron
Ihr seht, damit könnt ihr bei weitem für mehr Browser und Betriebssysteme anpassen als mit herkömmlichen möglichkeiten.
Hier findet ihr noch mal eine ZIP-Datei mit dem kompletten Beispiel wie oben gezeigt.
Also ich finde es so nun wirklich nicht mehr anstrengend auch für die Internet Explorer zu optimieren 😉 Was sagt ihr?
Viel Spaß mit den neuen CSS-Klassen!
