Neue Erweiterung browsercss

**jan.theofel** · 02.09.2010, 13:28

Hallo,

ich habe soeben die Erweiterung browsercss online gestellt.

Diese fügt Kürzel für den Browser, den Browser mit Version, das Betriebssystem und "aol" bzw. "mobile" für entsprechende Systeme als zusätzliche CSS-Klassen in das Body-Tag ein.

Habt ihr dort bislang z.B. nur <body class="home"> stehen wird daraus z.B. für Firefox 3.5.x unter Linux ein <body class="home firefox firefox3 firefox35 linux"> und für den allseits beliebten Internet Explorer 6.0.x kommt ein <body class="home ie ie6 ie60 windows">.

Alle erkannte Browser (jeweils mit Ergänzung der Versionsnummern):
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

Alle erkannte Betriebssysteme:
windows, windowsce, apple, linux, os2, beos, iphone, ipod, ipad, blackberry, nokia, freebsd, openbsd, netbsd, sunos, opensolaris, android

Vorteile:
- Erzeugt weniger HTTP-Requests als Conditinal Comments
- Erzeugt einfacher lesbaren/dokumentierbaren CSS-Code als Browserhacks
- Funktioniert mit allen aktuell implementierten Browsern (auch für solche, die z.B. keine Browserhacks/Conditional Comments bieten)
- Erkennt auch Betriebssysteme, "mobile" und "aol"

Ich freue mich über Feedback!

Jan

**Dani** · 02.09.2010, 16:54

Hallo Jan

Danke diese Erweiterung kann ich gut gebrauchen. Ich bekomme jedoch im Frontend noch folgenden Fehler:

Runtime notice: Redefining already defined constructor for class Browser in /home/httpd/vhosts/.../system/modules/browserdetection/Browser.php on line 229

**jan.theofel** · 02.09.2010, 17:07

Hi,

zu dem Fehler mal bitte hier mitlesen. Der scheint in browserdetection zu stecken.

Jan

**jan.theofel** · 08.09.2010, 23:08

Hi,

ein kleines Update zur Version 1.0.0 stable:

- Es gibt nun eine ausführliche Dokumentation im Contao Wiki
- Die Einbindung von "mobile" und "aol" wurde gefixt.
- Doppelte Klassen (z.B. "iphone" als System und Browser) werden vermieden
- Durch die Bindung an browserdetection Version 1.9.1 sollte auch der oben beschriebene Fehler nicht mehr vorhanden sein.

Jan

***xchs*** · 08.09.2010, 23:36

Hallo Jan,

wenn man anstelle des CC "<!--[if lte IE 7]>" entsprechende CSS-Selektoren im Stylesheet vorsehen möchte, müsste man dann in den Selektoren jeweils die einzelnen IE-Versionen <= IE7 allesamt mit angeben?

Code:

.ie70 ...,
.ie60 ...,
.ie55 ... {
   ...
}

Oder gibt es dafür eine einfachere/elegantere Lösung, um alle Vorgängerversionen des betreffenden Browsers entsprechend zu erfassen?

**jan.theofel** · 09.09.2010, 13:30

Hi,

Zitat von xchs

wenn man anstelle des CC "<!--[if lte IE 7]>" entsprechende CSS-Selektoren im Stylesheet vorsehen möchte, müsste man dann in den Selektoren jeweils die einzelnen IE-Versionen <= IE7 allesamt mit angeben?

Code:

.ie70 ...,
.ie60 ...,
.ie55 ... {
   ...
}

Oder gibt es dafür eine einfachere/elegantere Lösung, um alle Vorgängerversionen des betreffenden Browsers entsprechend zu erfassen?

Gute Frage. Ich glaube CSS besitzt keinen Not-Selektor, oder? Aber selbst wenn müsstest du ja ein "not ie7 and not ie8 and not ie9..." bauen.

Ich könnte da noch was in dem Stil ieL7 für "Internet Explorer kleiner (=less) 7" einbauen. Muss ich mir mal überlegen.

Allerdings aber gibt es real noch IE < 6? Und wenn ja willst du denn doch mittels redirect auf eine "Updaten Sie jetzt sofort!"-Seite schicken, oder? :-)

Jan

***xchs*** · 09.09.2010, 18:06

Zitat von ETES

Allerdings aber gibt es real noch IE < 6? Und wenn ja willst du denn doch mittels redirect auf eine "Updaten Sie jetzt sofort!"-Seite schicken, oder? :-)

Ja, selbstverständlich, unbedingt und unverzüglich!!

Hab den Hinweis auf die Erweiterung "redirect" schon registriert und auch dass Du Dich mittlerweile diesem Projekt angenommen hast...

Die nunmehr erweiterte und verbesserte Funktion "Weiterleitung von Browsern und Browserversionen" muss ich wirklich mal testen - scheint ja eine elegente Methode zu sein, um derartige Browser-Relikte entsprechend "abzufangen".

**jan.theofel** · 13.09.2010, 12:08

Hi,

Zitat von xchs

Die nunmehr erweiterte und verbesserte Funktion "Weiterleitung von Browsern und Browserversionen" muss ich wirklich mal testen - scheint ja eine elegente Methode zu sein, um derartige Browser-Relikte entsprechend "abzufangen".

Genau aus diesem Grund habe ich die Weiterführung von redirect übernommen, weil ich genau so etwas brauchte:

Beim ersten Seitenaufruf bekommen Benutzer bestimmter Browser statt dessen eine Infoseite zu sehen. Sie klicken auf "Ja ich habe verstanden", bekommen ein Cookie gesetzt und können die Seite danach "normal" (bis auf die Anzeigefehler :-) nutzen.

Ich will das auch mal noch in eine kleine Anleitung gießen, wenn ich Zeit dafür finde.

Jan

**backbone** · 05.01.2011, 16:40

Vorschlag zur Performance Verbesserung:
Hook "generatePage" statt "outputFrontendTemplate" verwenden.
Änderung in config.php:

PHP-Code:


$GLOBALS['TL_HOOKS']['generatePage'][] = array('BrowserCSS', 'insertInsertTag');

Änderung in BrowserCSS.php:

PHP-Code:


public function insertInsertTag($objPage)

    {

        $objPage->cssClass = $objPage->cssClass . ' {{browsercss}}';

    }

(Kein ".=" Operator verwenden, da Magic-Methods)

Edit: Ungetestet

**jan.theofel** · 07.01.2011, 10:32

Hi,

danke für deine Verbesserungsvorschläge hier und auch in den Tickets. Einen Teil haben wir schon bearbeitet, der Rest folgt nächste Woche. (Heute haben wir ja einen schicken Brückentag in BW. :-)

Jan

**do_while** · 08.01.2011, 13:22

Hallo ETES,

in der aktuellen Version ist ein kleiner Bug hineingeraten. Bei aktiven Meldungen erscheint eine Fehlermeldung:

Code:

Warning: Cannot modify header information - headers already sent by (output started at /var/www/web241/html/cms1/system/modules/browsercss/BrowserCSS.php:178) in /var/www/web241/html/cms1/system/libraries/Template.php on line 186

#0 /var/www/web241/html/cms1/system/libraries/Template.php(186): __error(2, 'Cannot modify h...', '/var/www/web241...', 186, Array)
#1 /var/www/web241/html/cms1/system/modules/frontend/FrontendTemplate.php(187): Template->output('Content-Type: t...')
#2 /var/www/web241/html/cms1/system/modules/frontend/PageRegular.php(136): FrontendTemplate->output()
#3 /var/www/web241/html/cms1/index.php(198): PageRegular->generate()
#4 /var/www/web241/html/cms1/index.php(333): Index->run(Object(DB_Mysql_Result))
#5 {main}

Ursache war schnell gefunden:
In der Datei BrowserCSS.php ist Dir hinter dem schließenden PHP-Tag ?> noch ein Blank und ein Zeilenumbruch hineingeraten.
Beides gelöscht und es geht wieder.

**jan.theofel** · 10.01.2011, 10:01

Hi Hagen,

danke für den Fehlerhinweis. Scheint nicht überall aufzutreten - bei uns beispielsweise nicht. Werde ich gleich anhand dieses Tickets fixen.

Jan

**jan.theofel** · 10.01.2011, 10:16

Hi,

Version 1.1.1 stable steht nun zur Installation bereit und behebt den Fehler. Außerdem wurde noch die Kompatibilität zu 2.9.3 gesetzt.

Jan

**jan.theofel** · 16.06.2011, 23:36

Hi,

ich habe soeben die Version 1.2.0 stable freigegeben. Diese behebt einen Bug mit dem Caching, setzt den Vary-Header um Probleme bei Proxy-Servern zu umgehen und Optimiert die Einbindung des Codes. Hier das komplette Change-Log.

Danke an Oliver Hoff für Tickets und Codesnippets!

Jan

**gr00vaLisTic** · 13.08.2011, 00:46

Hallo Jan,

ich bin beim Einsatz deiner Extension (Contaot 2.9.5 und aktuelle Version von browsercss) auf ein interessantes Problem gestoßen:

Sobald ich einer Seite bereits über die Seitenstruktur und/oder das Seitenlayout eine Body-Class zugewiesen habe, werde ich beim Aufruf der entsprechenden Seite zum Backend-Login weitergeleitet. Auf Seiten, die keine Klasse durch Seitenstruktur/-layout erhalten, funktioniert der Aufruf wie gewünscht.

Noch interessanter wird das ganze dadurch, dass dies allerdings nur gilt, solang man nicht im Backend eingeloggt ist. Mit aktiven Login funktionieren auch die Seiten mit gesetzter Class korrekt.

Kann dieses Verhalten jemand bestätigen oder sind das nur spezielle Umstände bei mir, die dieses auslösen?

Danke und viele Grüße,
Fabio

**Ria** · 13.08.2011, 01:10

Hallo Gurus,

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

Bei manchen Erweiterungen kapiere ich einfach nicht wozu die gebraucht wird, weil die Beschreibungen sagen oft was die Erweiterung macht, bekomme aber oft keinen Sinn rein, weil mir dann die Basisinformation fehlt, oder ein Link der das vielleicht erklärt. Vielleicht ist es ja jetzt etwas spät, aber ich weiß im Moment noch nicht mal nach was ich googlen sollte.

Kann mir es jemand verraten?

Gruss Ria

***xchs*** · 13.08.2011, 01:45

Hallo Ria,

besagte Erweiterung macht im Prinzip so was ähnliches wie nunmehr auch in der Contao-Version 2.10 implementiert wurde: http://www.contao.org/blog-leser/ite...ontao-210.html

**Ria** · 13.08.2011, 13:16

Hallo xchs,

danke Dir !! Vielleicht könnte man ja doch die Newbies berücksichtigen, auch wenn Erweiterungen dieser Art etwas außerhalb der DAU Welt liegen, zumindest bin ich durch Deinen Link nicht dümmer geworden.

Gruss Ria

***hofff*** · 13.08.2011, 13:20

Zitat von gr00vaLisTic

Hallo Jan,

ich bin beim Einsatz deiner Extension (Contaot 2.9.5 und aktuelle Version von browsercss) auf ein interessantes Problem gestoßen:

Sobald ich einer Seite bereits über die Seitenstruktur und/oder das Seitenlayout eine Body-Class zugewiesen habe, werde ich beim Aufruf der entsprechenden Seite zum Backend-Login weitergeleitet. Auf Seiten, die keine Klasse durch Seitenstruktur/-layout erhalten, funktioniert der Aufruf wie gewünscht.

Noch interessanter wird das ganze dadurch, dass dies allerdings nur gilt, solang man nicht im Backend eingeloggt ist. Mit aktiven Login funktionieren auch die Seiten mit gesetzter Class korrekt.

Kann dieses Verhalten jemand bestätigen oder sind das nur spezielle Umstände bei mir, die dieses auslösen?

Danke und viele Grüße,
Fabio

Hallo Fabio,

also ich nutze diese Extension immer und gern, aber das von Dir besagte Verhalten konnte ich noch nie beobachten. Bist du Dir sicher, dass es mit der Erweiterung zusammenhängt?

fg
nicky

---
I am here: http://maps.google.com/maps?ll=51.141654,12.647721
- --
von meinem iPad mit Tapatalk gesendet.

***xchs*** · 13.08.2011, 14:54

Hallo Ria,

Zitat von Ria

Vielleicht könnte man ja doch die Newbies berücksichtigen, auch wenn Erweiterungen dieser Art etwas außerhalb der DAU Welt liegen, zumindest bin ich durch Deinen Link nicht dümmer geworden.

Wo hapert's denn genau? Was ist denn das Verständnisproblem? Vielleicht kann ich dann näher darauf eingehen...

**Ria** · 13.08.2011, 20:30

Hallo xchs ,

nö, jetzt habe ich es ja verstanden durch Deinen Link! Ich meinte von vorne herein bei Beschreibungen der Erweiterungen.

Gruss Ria

**gr00vaLisTic** · 16.08.2011, 01:08

Zitat von hofff

Hallo Fabio,

also ich nutze diese Extension immer und gern, aber das von Dir besagte Verhalten konnte ich noch nie beobachten. Bist du Dir sicher, dass es mit der Erweiterung zusammenhängt?

fg
nicky

---
I am here: http://maps.google.com/maps?ll=51.141654,12.647721
- --
von meinem iPad mit Tapatalk gesendet.

Hi,

also ich kann 100%ig sagen, dass wenn ich den generatePage()-Hook von browsercss auskommentiere es ohne Probleme funktioniert. Zudem tritt der Fehler dann nach wie vor auf, sobald ich {{cache_browsercss}} von Hand in das Page-Template einfüge. Wie gesagt allerdings nur auf den Seiten, die bereits per Seitenstruktur oder Seitenlayout eine CSS-Klasse für den Body zugewiesen bekommen haben.

Grüße,
Fabio

**jan.theofel** · 16.08.2011, 07:33

Hi Fabio,

Zitat von gr00vaLisTic

also ich kann 100%ig sagen, dass wenn ich den generatePage()-Hook von browsercss auskommentiere es ohne Probleme funktioniert. Zudem tritt der Fehler dann nach wie vor auf, sobald ich {{cache_browsercss}} von Hand in das Page-Template einfüge. Wie gesagt allerdings nur auf den Seiten, die bereits per Seitenstruktur oder Seitenlayout eine CSS-Klasse für den Body zugewiesen bekommen haben.

Der generatePage-Hook macht nichts anderes als das Inserttag zu setzen (und dabei bestehende Body-Klassen zu ignorieren, sprich er fügt das nur hinzu egal was schon da ist oder eben nicht) und das Inserttag wird anschließend ersetzt. Wie da eine Weiterleitung zum Login zustande kommen soll ist mir absolut unklar: Weder setzt das Modul irgendwo eine Weiterleitung noch prüft es ob bereits Body-Klassen gesetzt sind. Und ich kann das beschrieben Verhalten auch nicht reproduzieren.

Wenn du Contao 2.10 einsetzt ist das aber ohnehin egal, da ab dieser Version der Core die entsprechenden Body-Klassen in der Art wie browsercss setzt.

Jan

**cheche** · 23.08.2011, 11:18

Bin jetzt erst fertig geworden mit einer neuen Website (Contao 2.9.5) und verwende deine tolle Erweiterung.
Aus gegebenen Anlass brauchte ich im Bodytag die Reihenfolge anders, zuerst die browsercss Klassen und dann die im Contao vergebenen CSS KLassen
Hab das mal so versucht:

// add browsercss class to page css class
$objPage->cssClass = ' {{cache_browsercss}}' . $objPage->cssClass;

funtioniert aber nicht. Wäre für mich zwar logisch gewesen aber leider nicht .... oder muss ich da wo anders ran?

cheche