BrowserCSS: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(Die Seite wurde neu angelegt: „Category:Extensions {{ExtInfo | Dev=Jan Theofel | DevSite=[http://www.etes.de ETES GmbH] | ExtVersion=1.0.0 | Version=2.9 | ERLink=http://www.contao.org/erwei…“) |
(→Nutzung) |
||
| Zeile 15: | Zeile 15: | ||
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="[...] blog ie ie6 ie60 windows"></pre> | ||
| + | |||
| + | Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 iphone"></pre> | ||
==Browserspezifische Kürzel== | ==Browserspezifische Kürzel== | ||
Version vom 8. September 2010, 22:11 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.
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="[...] blog ie ie6 ie60 windows">Beispiel mit iPhone:
<body id="top" class="[...] iphone iphone4 iphone40 iphone">
Browserspezifische Kürzel
Systemspezifische Kürzel
Sonstige Kürzel
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
