BrowserCSS

Aus Contao Community Documentation


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

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

Ansichten
Meine Werkzeuge

Contao Community Documentation

Nein, der Hangout ist noch nicht vorbei, wir schweigen nur. Es heisst ja auch hangout und nicht bryll out.

Christian Schiffler
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge