BrowserCSS - Versionsgeschichte

Lucina am 29. April 2012 um 09:33 Uhr

2012-04-29T09:33:30Z

Jantheofel: Beispiele erweitert und in eine eigene Rubrik gepackt

2010-09-08T21:49:57Z

Beispiele erweitert und in eine eigene Rubrik gepackt

Jantheofel: Sonstige Hinweise eingefügt

2010-09-08T21:40:14Z

Sonstige Hinweise eingefügt

Jantheofel am 8. September 2010 um 21:24 Uhr

2010-09-08T21:24:34Z

Jantheofel: Sonstige Kürzel geschrieben

2010-09-08T21:17:26Z

Sonstige Kürzel geschrieben

Jantheofel: Systemspezifische Kürzel geschrieben

2010-09-08T21:16:35Z

Systemspezifische Kürzel geschrieben

Jantheofel: Browserspezifische Kürzel erstellt

2010-09-08T21:15:00Z

Browserspezifische Kürzel erstellt

Jantheofel: /* Nutzung */

2010-09-08T21:11:30Z

‎Nutzung

Jantheofel: 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…“

2010-09-08T21:07:46Z

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…“

Neue Seite

[[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/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 [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.

Beispiel mit Firefox 3.6.x unter Linux: <pre><body id="top" class="[...] firefox firefox3 firefox36 linux"></pre>

==Browserspezifische Kürzel==

==Systemspezifische Kürzel==

==Sonstige Kürzel==

==Testen==
Zum einfachen Test kann die Firefox-Erweiterung [https://addons.mozilla.org/de/firefox/addon/59/ 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

@@ 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.
 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 Internet Explorer 6: <pre><body id="top" class="[...] ie ie6 ie60 windows"></pre>
-Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 iphone"></pre>
+Beispiel mit iPhone: <pre><body id="top" class="[...] iphone iphone4 iphone40 mobile"></pre>
 ==Browserspezifische Kürzel==

← Nächstältere Version		Version vom 8. September 2010, 21:40 Uhr
Zeile 38:		Zeile 38:

	Für AOL-Browser wird zusätzlich das Kürzel "aol" 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==		==Testen==

← Nächstältere Version		Version vom 8. September 2010, 21:17 Uhr
Zeile 33:		Zeile 33:

	==Sonstige Kürzel==		==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.

	==Testen==		==Testen==

← Nächstältere Version		Version vom 8. September 2010, 21:16 Uhr
Zeile 27:		Zeile 27:

	==Systemspezifische Kürzel==		==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==		==Sonstige Kürzel==

← Nächstältere Version		Version vom 8. September 2010, 21:15 Uhr
Zeile 21:		Zeile 21:

	==Browserspezifische Kürzel==		==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==		==Systemspezifische Kürzel==

@@ Zeile 1: / Zeile 1: @@
 [[Category:Extensions]]
 [[Category:CSS HOWTOS]]
 {{ExtInfo
 | Dev=Jan Theofel

← Nächstältere Version		Version vom 8. September 2010, 21:11 Uhr
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==