CSS Hacks
Einleitung
In diesem Artikel werde ich versuchen die bekanntesten CSS Hacks aufzulisten und ihre Wirkungsweise zu erklären. Auf den nutzen und die sinvolle verwendung von CSS Hacks werde ich in diesem Artikel nicht eingehen, dies werde ich in einem späteren Artikel noch ausführlich genug behandeln.
Was sind CSS Hacks?
Was sind CSS Hacks eigentlich? Diese Frage ist relativ einfach beantwortet: CSS Hacks nutzen Interpretationsfehler von Browsern auf um dadurch bestimmte Informationen vor ihnen zu verstecken. Dies kann auf verschiedene Arten geschehen:
- Durch CSS Code direkt im Stylesheet, wudurch eine CSS Regel entweder angewendet wird, oder nicht.
- Durch (X)HTML Code, der ein Stylesheet entweder einbindet oder nicht.
- Durch javascript, wodurch ein Stylesheet jeh naxh Browserversion eingebunden wird, oder nicht.
Ich werde also nun die verschiedenen Arten von CSS Hacks einzeln durchgehen und nach Browsern sortiert auflisten.
CSS Hacks im Stylesheet
Bei CSS Hacks im Stylesheet wird ausgenützt, dass bestimmte Browser bestimmte CSS Regeln nicht unterstützen, und somit diese Regeln einfach ignorieren.
Internet Explorer
Gegen den weitverbreitesten Browser existieren dank schlechter CSS Unterstützung viel CSS Hacks:
Gegen IE 5 und tiefer
Der Kommentar Hack
Selektor/* */ { Deklaration; }
Bei diesem Hack wird ein Kommentar (/* */) direkt nacht dem Selektor eingefügt, wodurch IE 5 und tiefer die CSS Regel ignoriert und daher nicht anwendet.
Der 'lonestar' Hack
Selektor {
Deklaration1;
* Deklaration2; }
Bei diesem Hack ignoriert IE die Deklaration2.
Gegen IE 5.5 und tiefer
Der voice-family Hack
Selektor {
Deklaration1;
voice-family: "\"}\"";
voice-family:inherit;
Deklaration2; }
Dieser Hack nutzt ein Parsing Fehler von Internet Explorer aus. Dadurch interpretiert IE alle Deklarationen nach den beiden voice-family Deklarationen nicht mehr. Dieser Hack sollte zusammen mit einem Netscape Hack verwendet werden, da Netscape ansonsten einen javascript Fehler meldet.
Gegen IE 6 und tiefer
Der Attribut-Selektor Hack
Selektor[Attribut] { Deklaration; }
Dieser Hack macht sich zu Nutzen, dass IE keine Attribute kennt, dadurch wird dieser Code von Internet Explorer nicht interpretiert.
- Auch wirksam gegen Netscape 4.x
Der Kind-Selektor Hack
Selektor1>Selektor2 { Deklaration; }
Dieser Hack macht sich zu Nutzen, dass IE den Kind-Selektor nicht kennt, dadurch wird dieser Code von Internet Explorer nicht interpretiert. Allerdings darf zwischen den Selektoren und dem '>' kein Abstand sein.
- Auch wirksam gegen Netscape 4.x
Der 'Owen' Hack
head:first-child+body Selektor {
Deklaration; }
Dieser Hack (nach seinem Erfinder benannt) versteckt CSS Regeln vor Internet Explorer durch die dem Selektor vorangestellten Selektoren.
- Auch wirksam gegen Opera 6 und tiefer
Der @import Hack
@import url("style.css") all;
Durch diesen Befehl lässt sich in ein Stylesheet ein externe Stylesheet importieren, allerdings ignoriert Internet Explorer diesen befehl wegen dem angehängten 'all'.
Nur IE 6 und tiefer
Der 'starhtml' oder 'IE only' Hack
* html Selektor {
Deklaration; }
Bei diesem Hack werden dir darin verwendeten Deklarationen nur von Internet Explorer interpretiert
Der 'underscore' Hack
Selektor {
_Deklaration; }
Alle Browser bemerken das '_' und ignorieren die fogende Deklaration. Internet Explorer hingegen ignoriert das '_' und interpretiert die folgende Deklaration dadurch.
Netscape
Dieser Browser wird kaum noch benutzt und ist wahrscheinlich noch viel fehlerbehafteter als der Internet Explorer.
Gegen Netscape 4.x
Der Attribut-Selektor Hack
Selektor[Attribut] { Deklaration; }
Dieser Hack macht sich zu Nutzen, dass Netscape keine Attribute kennt, dadurch wird dieser Code von Ntescape nicht interpretiert.
- Auch wirksam gegen IE 6 und tiefer
Der Kind-Selektor Hack
Selektor1>Selektor2 { Deklaration; }
Dieser Hack macht sich zu Nutzen, dass Netscape den Kind-Selektor nicht kennt, dadurch wird dieser Code von Netscape nicht interpretiert. Allerdings darf zwischen den Selektoren und dem '>' kein Abstand sein.
- Auch wirksam gegen IE 6 und tiefer
Nur Netscape
Der 'netscape only' Hack
/*/*//*/
Selektor {
Deklaration; }
/* */
Diese Regel wird von allen Browsern ausgenommen Netscape ignoriert.
Opera
Opera, eigentlich ein zuverlässiger und komfortabler Browser, seine kleinen Macken hat er dennoch und es schadet nie, wenn man einen Weg weiss diese zu umgehen.
Gegen Opera 6 und tiefer
Der 'Owen' Hack
head:first-child+body Selektor {
Deklaration; }
Dieser Hack (nach seinem Erfinder benannt) versteckt CSS Regeln vor Opera durch die dem Selektor vorangestellten Selektoren.
- Auch wirksam gegen IE 6 und tiefer
Nur Opera 7
Der Opera 7 Hack
Dieser Hack ermöglicht es dir CSS Regeln nur für Opera 7 sichtbar zu machen:
@media all and (min-width: 0px){
Selektor {
Deklaration; }
}
Opera 7 hat eine neue Regel eingeführt, die 1. nur Opera kennt und 2. alle Objekte anspricht, die die angegebene min-width aufweisen (wobei 0px für jedes Objekt dem Standard entspricht)
Mozilla
Mozilla Firefox gilt als einer der bessten und zuverlässigsten Browsern überhaupt, kein Wunder, dass es kaum Hacks für ihn gibt.
Nur Mozilla
Der 'not:([dummy])' Hack
html:not([dummy]) Selektor {
Deklaration; }
Diese Regel wird nur von Mozilla und Safari interpretiert.
- Auch wirksam für Safari
Safari
Mozilla Firefox gilt als einer der bessten und zuverlässigsten Browsern überhaupt, kein Wunder, dass es kaum Hacks für ihn gibt.
Nur Safari
Der 'not:([dummy])' Hack
html:not([dummy]) Selektor {
Deklaration; }
Diese Regel wird nur von Mozilla und Safari interpretiert.
- Auch wirksam für Mozilla
CSS Hacks im (X)HTML
CSS Hacks können sich auch in der (X)HTML Datei befinden.
Internet Explorer
Nur IE 5 und höher
Der Bedingungs Kommentar Hack
<!--[if gte IE 5]>
<style type="text/css">
Selektor {
Deklaration; }
</style>
<![endif]-->
Alle Browser ausgenommen IE sehen dies als einen Kommentar an und interpretieren es daher nicht. Man kann anstatt regeln auch ein Stylesheet importieren:
<!--[if gte IE 5]>
<style type="text/css">
@import url('styles.css')
</style>
<![endif]-->
Netscape
Gegen Netscape
Die @import Regel
<style type="text/css">
@import url('style.css');
</style>
Alle Browser ausser Netscape interpretieren den Code richtig und binden das genannte Stylesheet ein.
Nur Netscape
Der 'netscape only' Hack
<!--&{true};
<style type="text/css">
Selektor {
Deklaration; }
</style>
-->
Alle Browser bis auf Netscape ignorieren die sich darin befindende CSS Regel.
Opera
Nur Opera
Der 'nonsense' Hack
<link rel="stylesheet" type="text/nonsense" href="style.css" />
Dies wird nur von Opera interpretiert und bindet das Stylesheet 'style.css' ein.
Mozilla
Nur Mozilla
Der 'extra-keyword' Hack
<link rel="extra-keyword stylesheet" type="text/css" href="style.css"/>
Hier wird das Stylesheet nur von Mozilla und Safari eingebunden
- Funktioniert auch für Safari
Safari
Nur Safari
Der 'extra-keyword' Hack
<link rel="extra-keyword stylesheet" type="text/css" href="style.css"/>
Hier wird das Stylesheet nur von Mozilla und Safari eingebunden
- Funktioniert auch für Mozilla
CSS Hacks durch javascript
Da es per javascript möglich ist den Browser des Benutzers zu erkennen, kann man so ganz spezifisch verschiedene Browserabhängige Stylesheets einsetzen. Ein gutes Skript, welches das kann findet man unter Browser Detect.
