BrowserCSS: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(Sonstige Hinweise eingefügt) |
(Beispiele erweitert und in eine eigene Rubrik gepackt) |
||
| Zeile 15: | Zeile 15: | ||
Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein. | Zur Nutzung ist lediglich die Installation der Erweiterung [http://www.contao.org/erweiterungsliste/view/browsercss.de.html browsercss] notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein. | ||
| + | ==Beispiele== | ||
Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre> | Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre> | ||
| − | Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] | + | Beispiel mit Internet Explorer 6: <pre><body id="top" class="[...] ie ie6 ie60 windows"></pre> |
| − | Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 | + | Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 mobile"></pre> |
==Browserspezifische Kürzel== | ==Browserspezifische Kürzel== | ||
Version vom 8. September 2010, 22:49 Uhr
| Erweiterungs-Übersicht | |
|---|---|
| Name des Entwicklers | Jan Theofel |
| Entwickler Webseite | ETES GmbH |
| Version der Erweiterung | 1.0.0 |
| Kompatibilität mit Contao Version | 2.9 |
| Link zum Extension Repository | http://www.contao.org/erweiterungsliste/view/browsercss.de.html |
Inhaltsverzeichnis
Browser- und systemspezifische CSS Klassen
Die Erweiterung browsercss stellt eine einfache Möglichkeit um browser- und systemspezifische CSS-Selektoren zu definieren. Dazu werden die CSS-Klassen des body-Tags um Kürzel für Browser und Betriebssystem erweitert.
Nutzung
Zur Nutzung ist lediglich die Installation der Erweiterung browsercss notwendig. Die Erweiterung besitzt keine Einstellungen im Backend sondern fügt für alle Frontendausgaben die jeweiligen browser- bzw. systemspezifischen Kürzel als CSS-Klassen des body-Tags ein.
Beispiele
Beispiel mit Firefox 3.6.x unter Linux:<body id="top" class="[...] firefox firefox3 firefox36 linux">Beispiel mit Internet Explorer 6:
<body id="top" class="[...] ie ie6 ie60 windows">Beispiel mit iPhone:
<body id="top" class="[...] iphone iphone4 iphone40 mobile">
Browserspezifische Kürzel
Für alle erkannten Browser sind Kürzel definiert, die eingefügt werden. Zusätzlich wird die Browserversion ausgelesen und die ersten beiden Teile der Versionsnummer (jeweils getrennt durch Punkte) ebenfalls ergänzt (siehe Beispiele).
Zugewiesen werden folgende Browserkürzel: opera, operamini, webtv, ie, iepocket, konqueror, icab, omniweb, firebird, firefox, iceweasel, shiretoko, mozilla, amaya, lynx, safari, iphone, ipod, ipad, chrome, android, blackberry, icecat, s60nokia, nokia
Systemspezifische Kürzel
Für alle erkannten Betriebssysteme wird ebenfalls ein Kürzel eingesetzt. Hier werden aktuell keine Versionen der Betriebssysteme unterschieden.
Folgende Betriebssystemkürzel werden gesetzt: windows, windowsce, apple, linux, os2, beos, iphone, ipod, ipad, blackberry, nokia, freebsd, openbsd, netbsd, sunos, opensolaris, android
Sonstige Kürzel
Für mobile Entgeräte wird zusätzlich das Kürzel "mobile" eingetragen.
Für AOL-Browser wird zusätzlich das Kürzel "aol" eingetragen.
Sonstige Hinweise
Wird ein Kürzel zweimal vergeben (beispielsweise iphone als Browser und System), wir es nur einmal gesetzt.
Testen
Zum einfachen Test kann die Firefox-Erweiterung User Agent Switcher verwendet werden. Für die Ausarbeitung des CSS ist ohnehin eine Installation der jeweiligen Browser zum Test notwendig.
Diskussion
Vorteile
- Gegenüber Conditional Comments: Erzeugt weniger HTTP-Requests
- Gegenüber CSS-Hacks: Erzeugt einfacher lesbaren und verständlichen CSS-Code
- Funktioniert mit allen aktuell implementierten Browsern, auch wenn für diese (noch) keine CSS-Hacks bekannt sind
- Erkennt auch Betriebssysteme, nicht nur Webbrowser
- Erkennt auch mobile Entgeräte und AOL-Browser
Nachteile
- Die Erkennung des Browsers setzt ausschließlich auf den mitgelieferten UserAgent-String des Webbrowsers. Diese kann leicht manipuliert werden. Allerdings führt dies dann nur zu einer fehlerhaften Darstellung im Browser der Person. Es führt also nur für diese eine Person zu einer fehlerhaften Darstellung.
- Die Liste der Browser und Systeme ist begrenzt und kann durch stete Weiterentwicklung nicht vollständig sein.
- Fügt ungenutzte CSS-Klassen ein und erzeugt so einen minimalen Code-Overhead.
erstellt von Jan Theofel
