von Leo Feyer
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.
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; }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.
| 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 |
| 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 | - | - |
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.
Leo ist der Hauptentwickler von Contao und sorgt mit dem Core-Team dafür, dass bei Contao die Zukunft schon in der Gegenwart beginnt. Am Tag ist er Server-Administrator bei Hostingwerk und in der Nacht programmiert er was das Zeug hält.
Kommentare
Kommentar von Steffen |
Kommentar von Frank |
Kommentar von Michael Kühnel |
Kommentar von Tim |
Kommentar von Joe |
Kommentar von Michael Ziege |
Kommentar von Christian |
Kommentar von Wolfgang Plaschg |
Kommentar von Marcello |
Kommentar von Manuel |
Kommentar von Christian |
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 |
Kommentar von Nils |
Kommentar von Christian |
Kommentar von Jan Theofel |
Kommentar von Stefan |
Kommentar von Maria |
Kommentar von Steve |
Kommentar von Cirby |
Son echt ein coller Ansatz.
Kommentar von Yannic |
Einen Kommentar schreiben