Contao-News
Wir informieren Dich hier regelmäßig zu Updates, stellen Best-Practice-Arbeiten vor und berichten über Aktuelles aus dem Contaoversum.
Vergesst Browser-Hacks in Contao 2.10
von Leo Feyer – Aus der Praxis
Die bevorstehende Contao-Version 2.10 enthält ein sehr mächtiges neues Feature, dass CSS-Hacks, Conditional Comments und andere Browserweichen überflüssig macht: Es fügt dem Body-Tag in Abhängigkeit des Betriebssystems und des Browsers verschiedene CSS-Klassen hinzu.
Zugegeben, die Idee ist keineswegs neu. Viele der aktuellen Modernizer-Skrite nutzen CSS-Klassen, um zu indizieren, ob bestimmte Funktionen verfügbar sind oder nicht. Die meisten davon benötigen dazu jedoch JavaScript und funktionieren deshalb nicht, wenn JavaScript deaktiviert ist. Die Contao-Lösung basiert hingegegn zu 100% auf PHP.
Ein kurzes Beispiel
Nehmen wir an, Sie verwenden den Internet Explorer 8 auf Windows 7, dann sieht Ihr Body-Tag wie folgt aus:
<body class="win ie ie8">Wenn Sie Firefox 4 auf Mac OS X verwenden, sieht es folgendermaßen aus:
<body class="mac firefox fx4">Und wenn Sie eine seite auf Ihrem iPhone anschauen, sieht das Body-Tag wie folgt aus:
<body class="iphone safari sf5 mobile">Anstatt Selektor-Hacks oder Conditional Comments zu verwenden, können Sie nun in Ihrem Stylesheet einfach folgendes schreiben:
/* Generelles Format */
#wrapper { width:960px; }
/* Anpassung des Formats in Opera */
.opera #wrapper { width:940px; }
/* Spezielles Format für den IE6 und Safari 2 unter Windows */
.ie6 #wrapper, .win.sf2 #wrapper { width:980px; }
/* Anpassung der Breite auf mobilen Endgeräten */
.mobile #wrapper { width:480px; }Ausführliche Dokumentation
Die erste Klasse indiziert das Betriebssystem des Client (z.B. mac, win oder unix). Die zweite Klasse enthält den vollen Namen des Browsers (z.B. firefox, ie, chrome oder safari) gefolgt von einem 2-stelligen Kürzel mit der Versionsnummer (z.B. fx4, ie9, ch10 oder sf5). Falls der Client ein mobiler Browser ist, wird zusätzlich die Klasse mobile hinzugefügt.
Unterstütze Betriebssysteme
| Name | Klasse | Mobil |
|---|---|---|
| Macintosh | mac | false |
| Windows CE, Windows Phone | win-ce | true |
| Windows | win | false |
| iPad, iPhone, iPod Touch | ios | true |
| Android | android | true |
| Blackberry | blackberry | true |
| Symbian | symbian | true |
| WebOS | webos | true |
| Linux, FreeBSD, OpenBSD, NetBSD | unix | false |
| Anderes Betriebssysten | unknown | false |
Unterstützte Browser
| Name | Klasse | Kürzel | Beispiel |
|---|---|---|---|
| Internet Explorer | ie | ie | ie9 |
| Firefox | firefox | fx | fx4 |
| Chrome | chrome | ch | ch10 |
| OmniWeb | omniweb | ow | ow5 |
| Safari | safari | sf | sf5 |
| Opera Mini | opera-mini | oi | oi6 |
| Opera Mobile | opera-mobile | om | om11 |
| Opera | opera | op | op10 |
| IEMobile | ie-mobile | im | im6 |
| Camino | camino | cm | cm2 |
| Konqueror | konqueror | ko | ko4 |
| Anderer Browser | other | - | - |
Entwicklerinformation
Selbstverständlich lässt sich das neue Feature auch in eigenen Erweiterungen verwenden. Die Methode wurde zur Environment-Klasse als $this->Environment->agent hinzugefügt. Sie gibt ein Objekt mit folgenden Informationen zurück:
$this->import('Environment');
$ua = $this->Environment->agent;
echo $ua->os; // Betriebssystem
echo $ua->browser; // Browsername
echo $ua->shorty; // Browserkürzel
echo $ua->version; // Browserversion
echo $ua->mobile; // True wenn der Client ein mobiler Browser ist
echo $ua->class; // Den CSS-Klassen-StringDas neue Feature kann in der Revision 678 getestet werden.
Kommentare
Kommentar von Steffen |
Sehr geile Funktion! Bin gespannt auf den Live-Test :-)
Kommentar von Frank |
Interessant, vielen Dank! Wird es dennoch weiter die bisherige Conditional-Comment-Funktion bei den Stylesheets geben? Für den Fall, dass man sauber trennen und nicht alles in ein CSS packen will?
Kommentar von Michael Kühnel |
@Frank: Wenn du möchtest kannst du es trotzdem in mehrere Dateien trennen. Nimm einfach import rules (@import) …
Kommentar von Tim |
@Frank: Du kannst doch einfach x beliebige separate CSS Dateien anlegen und diese nachher von Contao zusammenführen zu lassen.
Kommentar von Joe |
Super Sache!
Kommentar von Michael Ziege |
Super Sache! Freue mich schon die zu nutzen. Ich würde noch bada (Samsung Wave) als mobile-Browser hinzufügen. Sonst aber schon ne super Auswahl
Kommentar von Christian |
Wir nutzen schon seit einiger Zeit das Plugin BrowserCss für fast alle Projekte, das wird ja damit überflüssig. Sehr schön, dann vergisst man es nicht.
Kommentar von Wolfgang Plaschg |
Wunderbare Funktion, super useful! Vielen Dank!
Kommentar von Marcello |
WELTKLASSE!!! An sowas hab ich nur nie gedacht und ist es doch das absolute Hilfsmittel für Cross-Browser Coding! Contao!
Kommentar von Manuel |
wow - geniales Update! =D ich kapiere nur nicht die Versionierung "2.10" - Auf was bezieht sich diese?
Kommentar von Christian |
Eigentlich kein schlechter Ansatz. Aber warum Browser-Detection statt Feature-Detection? Anders gefragt: was passiert, wenn der User-Agent (absichtlich) maskiert ist? Was passiert, wenn ein Browser detektiert wird, der nicht abgefangen wird, z.B. Flock, AOL-Browser, was auch immer?
Wäre es nicht besser, auf HTML5 und CSS-Fähigkeiten zu prüfen, wie es z.B. Modernizer tut? Ich weiß, dass das kaum ohne Javascript geht, aber sinnvoller wäre es doch, oder?
Kommentar von Leo Feyer |
Eine Lösung zu finden, die ohne JavaScript auskommt, war jedoch das erklärte Ziel der Mission! Für alles andere gibt es ja schon Skripte wie modernizr.
Kommentar von Nils |
Finde ich super! Schön wäre es, wenn zusätzlich zu "mobile" bei nicht-mobilen seiten noch "no-mobile" eingetragen würde.
Kommentar von Christian |
Bin seit dem ersten Einsatz von Contao sehr begeistert. Finde es super, dass immer wieder tolle neue Features dazu kommen. Vielen Dank dafür und weiter so!
Kommentar von Jan Theofel |
@Nils: Die no-mobile Version kannst du auch mittels passendem CSS-Selektor erledigen:
body:not(.mobile)Kommentar von Stefan |
Ich bin auch absolut begeistert, ich musste nur eine Einstellung extra machen für den IE und das war die Font-Datei :) Supa Arbeit!
Kommentar von Maria |
Super Sache, vielen Dank!
Kommentar von Steve |
Klasse!
Kommentar von Cirby |
Echt eine tolle sache. Ich versteh nur nicht warum man, im Vergleich zu der Extension "browserdetection", die Plattform nicht mehr ausgegeben wird. Fand das eigentlich sehr hilfreich, wenn nicht nur 'ios angezeigt wird. Es kann also nicht zwischen iPad und iPhone unterschieden werden. Gerade bei CSS sehr hilfreich oder wenn Inhalte beim iPhone reduziert ausgegeben werden sollen.
Son echt ein coller Ansatz.
Kommentar von Yannic |
Saubere Geschichte, funktioniert super. Jedoch nicht bei meinem HTC Titan mit IE9. Dieses Gerät wird nicht als ein mobiles erkannt. Hat jemand ähnliche Probleme? Mit dem mobile detect von Google funktionierts...
Einen Kommentar schreiben