Artikel - Detailansicht

Icon Aktuelles Dynamische Style Sheets mit ColdFusion

Der mit Abstand größte Vorteil der Style Sheets ist zweifelsohne, dass gerade die Schriftgrößen trotz exakter Angaben von verschiedenen Browsern völlig wirr und grundsätzlich anders interpretiert werden, als sie dargestellt werden sollen. :-)
Hier gibt es diverse Lösungsansätze:
  • Anlegen eines Style Sheets, das einen Mittelweg darstellt und in allen Browsern "irgendwie" passt
  • Dynamisches Schreiben der Style-Angaben mit JavaScript
  • Dynamisches Schreiben des Style-Sheets per CF
Nummer eins ist natürlich die bei weitem uneleganteste Lösung, die aber bei weniger grafikintensiven Seiten problemlos passt und den geringsten Arbeitsaufwand mit sich bringt. Die zweite funktioniert perfekt, allerdings nur dann, wenn der Client-Browser auch Javascript ausführen kann / darf. Da man sich nie wirklich auf die Fähigkeiten des Clients verlassen sollte, werde ich in diesem Artikel die dritte Variante anschneiden.
Ein wunderbares Beispiel für die nicht einheitliche Interpretation der Schriftgrößen zeigt sich bei folgender Angabe:

.teststyle { font-family : Arial, Helvetica, sans-serif; font-size : 11px; }

Hier nun das, was die "drei großen" Browser daraus machen:


IE 5.01 / Win NN 4.72 / Win Opera 5 / Win

Wie man sieht, sind die Ergebnisse von IE und Opera deckungsgleich, der Navigator stellt die Schrift deutlich zu klein dar.

Abhilfe kann man sich nun schaffen, indem man dem Navigator eine andere Schriftgröße zuweist, in diesem Fall dann 12px. Das Ergebnis ist zwar wieder nicht das, was es sein soll, allerdings gewinnt diese Größenvariante aufgrund der besseren Lesbarkeit. Selbst, wenn man die Schriftgrößen in mm angibt (3mm bzw. 4mm), so stellt Navigator diese beiden Varianten dar - entweder zu groß oder zu klein.

IE 5.01 / Win, 11px NN 4.72 / Win, 12px Opera 5 / Win, 11px

Wie bekommt man die unterschiedlichen Angaben nun jeweils zum Client? Die Lösung ist hier wieder relativ simpel. Statt einer "klassischen" Einbindung des Style Sheets (Dateiendung *.css) wird einfach ein ColdFusion-Template angegeben. Dieses wird von CF-Server ganz normal verarbeitet, bevor es als fertige Datei an den Browser gesendet wird, und genau hier ist die Stelle, an der Browserabfragen möglich sind:

<link rel="stylesheet" href="styles.cfm">

In der Datei styles.cfm nutze ich dann den Custom Tag "CF_AEBROWSER", da die Browserabfragen hiermit sehr einfach funktionieren:

[styles.cfm]
<cf_aebrowser>
.teststyle {
      font-family : Arial, Helvetica, sans-serif;
<cfif browser.isnavigator>
     font-size : 12px;
<cfelse>
     font-size : 11px;
</cfif>
}

Das war's dann auch schon - auf diese Weise kann man jedem Browser ein angepasstes Style-Sheet zuweisen, welches vollkommen unabhängig vom Client generiert wird.
Eine weitere Möglichkeit ist natürlich, den Browsertypen in jedem Template abzufragen und dann eine dem Browser entsprechende Style-Sheet-Datei auszuwählen - ich persönlich finde die o.a. Methode jedoch bequemer.

Marcus Raphelt marcus@raphelt.de - 22.08.2001

Zurück


Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2017 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen