browser-spezifisches css
zur feinjustierung des layouts ist es manchmal hilfreich, das css speziell für den jeweiligen browser anzupassen. die hier vorgestellte technik hat mit dem mittlerweile verpöhnten browser-sniffing nichts zu tun, benötigt aber ebenfalls aktiviertes javascript.
anbei ein typischer fall, wie ich diese feinjustierung verwendet habe:
safari stellt den text zu klein dar!
gibt man im stylesheet die schriftgröße in em an (was sehr sinnvoll ist!), stellt safari den text zu klein dar, weil apple aus unverständlichen gründen bei diesem browser eine standard-schriftgröße von 14px definiert hat. (alle anderen gebräuchlichen browser haben eine standard-schriftgröße von 16px!)
um diese diskrepanz auszugleichen und für alle besucher eine gut lesbare schriftgröße zu gewährleisten, verwende ich auf unserer website das hier vorgestellte skript von rafael lima:
css browser selector
das script besteht aus einem javascript-file und ein paar anweisung in css.
damit es funktioniert, muss das javascript-file heruntergeladen und in css_browser_selector.js umbenannt werden.
anschliessend wird es im head-bereich des html-dokumentes eingebunden:
<head>(…)<!-- auf die richtige pfadangabe achten --><script src="css_browser_selector.js" type="text/javascript"></script>(…)</head>
was macht das script?
beim laden des dokument fragt das script ab, welcher browser und welches betriebssystem verwendet wird. erkennt es den browser/das betriebssystem fügt es nach der auswertung dem html-tag eine klasse hinzu.
| klasse | browser |
|---|---|
html.webkit |
mac os x safari |
html.gecko |
mozilla, firefox, camino |
html.opera |
opera (alle versionen) |
html.opera8 |
opera 8x |
html.opera9 |
opera 9x |
die komplette liste aller generierten klassen ist auf der website von rafael lima zu finden.
wie verwendet man dies nun im css?
zuerst definiert man das gewünschte aussehen allgemein für alle browser und passt anschliessend ein paar werte für den browser an, der probleme macht:
body {color: #666;background-color: rgb(95%, 95%, 95%);/* hier die normale schriftgroessen-einstellungfont: 62.5%/1.4 "Trebuchet MS",Verdana,Arial,Sans-Serif;}html.webkit body {/* safari bekommt eine groessere schrift!font-size:72.5%;}
übersetzt bedeutet die css-anweisung in zeile 8 – 10, dass die schrift größer dargestellt werden soll, wenn sich der -tag innerhalb eines-tags befindet, dem die klasse webkit zugewiesen wurde. (mehr zu verschachtelten elementen (descendant selectors) beim handbuch_webdesign)
warum ist das script so praktisch?
mir gefällt das script so gut, weil ich mich dabei überhaupt nicht um das javascript kümmern muß und alle anpassungen direkt im css erledigen kann.
wozu kann man das script verwenden?
- anpassen der schriftgröße in safari (wie hier gezeigt)
- individuelles gestalten von input-feldern bei safari (dieser browser stellt diese deutlich anders dar als andere browser)
- …
gefahren und nebenwirkungen
bei der verwendung dieses skriptes muss man sich bewusst sein, dass es nur funktioniert, wenn javascript aktiviert ist! man sollte deshalb die css-datei so anlegen, dass die seiten auch dann OK aussehen, wenn für den jeweiligen browser kein spezifisches css aktiviert werden kann. (in meinem beispiel würde bei safari die schrift lediglich etwas kleiner aussehen als gewünscht, wenn javascript ausgeschaltet ist!)
internet explorer
ich habe bei der auflistung der erkannten browser bewußt auf den internet explorer verzichtet! für diesen browser gibt es eine sehr viel zuverlässigere art, spezielle css-anweisungen einzubinden: conditional comments. dies funktioniert auch dann, wenn javascript ausgeschaltet ist!