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.

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

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

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

Ansichten
Meine Werkzeuge

Contao Community Documentation

Chuck Norris würde Contao 3 in einer Stunde ganz neu schreiben, wobei er die ersten 50 Minuten Sex mit 3 Blondinen hätte.

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge