Browserweiche - Stylesheets dynamisch laden

Webentwickler die ihre Seiten mit CSS layouten haben es oft nicht einfach: Die Unterschiede wie die Seiten gerade bei aufwändigen Layouts dargestellt werden sind teilweise verheerend. Leider muss man sich des öfteren mit CSS-Hacks bedienen um diese Probleme zu beheben... diese sind aber leider auch nur beschränkt nutzbar.

TYPO3 bringt von Haus aus einfache Möglichkeiten mit, wie man dieses Problem anders angehen kann - und zwar mit sogenannten Conditions. Der Vorteil gegenüber den "normalen" CSS-Hacks ist, dass einem eine wesentlich größere Palette an Bedingungen zur Verfügung steht - beispielsweise lässt sich neben dem Browsertyp auch das Betriebssystem abfragen. Eine bevorzugte Methode ist es außerdem, ein generelles Stylesheet anzulegen, welches für alle Browser gilt und je nach Bedarf weitere Stylesheets für jeden Browser der manche Styles vom generellen Stylesheet überschreibt - somit hat man seine browserspezifischen Styles sauber voneinander getrennt ohne alles in einer CSS-Datei unterzuwurschteln.

Nehmen wir an, wir haben unser fertiges CSS-Layout auf dem PC erstellt und für Firefox optimiert. Dieses wäre dann unsere generelle CSS-Datei die wir style.css nennen und über die Header-Daten ins Template einbauen:

page.headerData.10 = TEXT
page.headerData.10.value ( <link rel="stylesheet" type="text/css" 
  href="fileadmin/templates/style.css" /> )

Sehr schön, nach mehrmaligen betrachten der Seite sind wir rundum zufrieden mit dem Layout und betrachten die Seite im IE6... zonk - aus Erfahrung ist irgendwo wieder ne Box breiter als sie sein soll und spätestens bei min- und max-height-Elementen muss einiges verbessert werden. Also wir legen uns eine neue Datei namens style_ie6.css an, überschreiben darin alle Unschönheiten aus der style.css und binden diese wieder in den header ein:

[browser = msie] && [version < 7]
  page.headerData.15 = TEXT
  page.headerData.15.value ( <link rel="stylesheet" type="text/css"
    href="fileadmin/templates/style_ie6.css" /> )
[global]

Erklärung:
Grob sieht es so aus wie oben, nur, dass das Stylesheet diesmal an Stelle 15 - also NACH dem ersten Stylesheet - eingebunden wurde... das muss so sein weil ja sonst nichts überschrieben werden kann.
Der wichtige Teil steckt im [browser = msie] && [version < 7]. Hier geben wir TYPO3 bescheid, dass die folgenden zwei Zeilen nur berücksichtig werden dürfen, wenn es sich auch um einen Internet-Explorer handelt der älter ist als 7.0. Mit dem abschließeden [global] wird die condition beendet und jeder weitere TypoScript als "normal" betrachtet.

Es gibt eine Menge Conditions - diese hier alle zu erwähnen wäre wohl übertrieben. Werft doch bitte einen Blick in die TS Referenz-Library - dort steht alles sehr ausführlich und gut beschrieben.

Mit Conditions lassen sich selbstverständlich nicht nur Stylesheets steuern. Hier ein Anwendungsbeispiel wie man seine Seitenbesucher dezent auf ein angenehmeres und sichereres browsen hinweisen kann ;)

 

[browser = msie, opera, ibrowse, avantgo, teleport]
page.30 = TEXT
page.30.value (
      <a href="http://getfirefox.com/" title="Get Firefox - 
      The Browser, Reloaded.">
      <img src="http://www.mozilla.org/products/firefox/buttons/header.png" 
      width="305" height="150" border="0" alt="Get Firefox"></a> )
[global]