Cleveres CSS mit PHP und Contenido !

Peter Beauvain
2008-06-13 23:39
[Dieser Artikel wird noch überarbeitet]

Problem:

CSS werden von den verschiedenen Browsern immernoch unterschiedlich interpretiert. In der Regel begegnet man diesem Problem, indem man mehrere CSS-Dateien anlegt und diese mittels JavaScript im Browser verlinkt hat. Leider besteht dabei das Risiko, dass JavaScript bei einigen wenigen Clients möglicherweise inaktiv ist.

Bedeutender jedoch ist der Mehraufwand, der durch die Pflege von ein bis drei zusätzlichen Stylesheets entsteht. Dabei werden längst nicht alle Angaben unterschiedlich behandelt. So sind beispielsweise Farbangaben kein Problem, aber auch viele Schriftauszeichnungen wie "font-weight: bold" oder "text-decoration: none" bedürfen keiner Extrawurst.

Schlecht hingegen steht es um die Schriftgrößen. Hier zanken sich offenbar Internet Explorer und Mozilla um die Abmessungen eines Pixels. Von allen anderen Maßeinheiten sollte man im Übrigen getrost Abschied nehmen - pt, cm, em und andere erzeugen zusätzlich auch noch Unterschiede zwischen Mac und PC, unabhängig vom Browsertyp. Was aber auf dem Internet Explorer in 12px lesbar ist, ist auf dem Netscape schon zu klein. Stellen wir die Größe aber auf die beim Netscape verträglichen 14px, brauchen wir beim IE schon zwei Meter Abstand zum Bildschirm, um etwas zu erkennen zu können.
Besonders tragisch können die Ergebnisse bei der formatierung von Formularen mit CSS ausfallen


Für solche wenigen Unterschiede gleich mehrere Stylesheets zu bauen, ist doch nicht wirklich clever.

Lösung:

Clever hingegen ist es, zurück zu den Wurzeln zu kehren und genau ein Stylesheet zu basteln. Allerdings muss uns dieses Stylesheet ein bisschen Arbeit abnehmen - aber Stylesheets sind genügsam, vor allem, wenn sie unter PHP dienen.

Beispiel:
Der unterschiedlichen Darstellung von gepunkteten Linien in Mozilla und Internet Explorer entgeht man mit folgendem Code


Und nun viel Spaß beim Endecken neuer Möglichkeiten mit dynamischen Stylesheets!

Durchschnittliche Bewertung: 3.73 (22 Abstimmungen)

Es ist möglich, diese FAQ zu kommentieren.