Jeder Browser hat seine Macke ...
Ausnutzen von Browser-Eigenheiten in CSS-Dateien
Nicht alle Browser reagieren gleich (richtig), besonders wenn die Syntax-Möglichkeiten extrem ausgenutzt werden.
Die Methode, Interpretationsschwächen oder -fehler von Browsern auszunutzen, um Parameter für bestimmte Browser (nicht) zugänglich zu machen, nennt man CSS-Hacks
So wurde z.B. für die Gestaltung mit fixierten Bereichen
der Parameter position: fixed dem Bereich
html>body #Banner zugewiesen,
eine Schreibweise, die ältere Browser wie IE5 und IE6 nicht verstehen
- genausowenig wie sie den Parameter selbst richtig interpretieren.
Nachdem sich der Bereich
<body> immer im Bereich <html>
befindet, erhalten auf diese Weise moderne Browser
die für sie geeigneten Anweisungen, während ältere Browser sie ignorieren
und die bisherige Definition erhalten bleibt.
Weitere Möglichkeiten:
Gegen IE5 und tiefer: Der Kommentar-Hack
z.B.: p/* */ { ........ }
--- IE5 verträgt den Kommentar an dieser Stelle nicht.
Gegen IE5 und tiefer: Der 'lonestar' Hack
z.B.: p { .....; * .....; }
--- IE5 ignoriert den (die?) Parameter hinter dem *
Gegen IE6 und tiefer: Der Kind-Selektor-Hack
z.B.: html>body { ...... }
--- IE6 versteht die Schachtelung nicht.
Gegen IE6 und tiefer: Der Attribut-Selektor-Hack
z.B.: p[align] { ....... }
--- IE6 verträgt keine Attribut-Angabe.
Gegen IE7 und tiefer: Der ':not([dummy])'-Hack
z.B.: html:not([dummy]) p { ... }
--- IE7 versteht die Anweisung nicht
Gegen IE7 und tiefer: Der 'extra-keyword'-Hack
z.B.: <link rel="extra-keyword stylesheet" type="text/css" href="......." />
--- Dieses Style-Sheet wird von IE7 nicht geladen
Diese und andere CSS-Hacks findet man unter www.css-hacks.mozork.de. Allerdings sind viele veraltet.
CSS-Hacks gibt es eigentlich nur noch für den Internet-Explorer. Dieser bietet jedoch über die Browser-Weichen eine gute Möglichkeit zum Ausgleich von Unterschieden.
Insgesamt kommen die neuesten Browser so ziemlich alle zum gleichen Ergebnis, was die Anwendung der "unschönen" CSS-Hacks überflüssig macht.
Für folgenden Effekt habe ich jedoch bisher noch keine Lösung gefunden:
#CodeEx {font-size: 1em;} /* gilt für den Bereich mit der id="CodeEx" */
code {font-size: 0.8em;} /* gilt für alle Code-Beispiele */
<div id="CodeEx">
Dies ist ein <code> Code-Beispiel </code> im Text.
</div>
So sieht das vorstehende Beispiel im aktuellen Browser aus:
Code-Beispiel im Text.
Im Vergleich dazu die Darstellung von ...
IE7: 
Firefox:
Opera :
Diesmal tanzt also der Firefox aus der Reihe - was ich sehr störend empfinde, weil grade der Text in den Beispielen so stark verkleinert ist, daß man ihn nur schwer lesen kann.
Natürlich kann man das in den Einstellungen des Firefox nachbessern - aber ...
|
Letzte Aktualisierung: 02.04.2010 |
Sie befinden sich hier: MyWay2Web > Denkzettel > CSS-Hacks |
Impressum |
