CSS-Hacks

Teil 3: Browserkompatible Seitengestaltung

Veränderung von Wertigkeiten:

Das Schlüsselwort !important - hinter die CSS-Definition geschrieben - verändert die natürliche Wertigkeit der Style-Angabe. Dieser Ausdruck wirkt mit oder ohne Leerzeichen zwischen Ausrufezeichen und dem Wort "important".

Normalerweise wird CSS, das im HTML per style="..." eingebunden ist, mit höchster Priorität ausgewertet, dann CSS, das per id zugewiesen wird. Danach Styles, die über class definiert sind. Zuletzt folgen allgemeine Anweisungen, die über HTML-Tags notiert sind. Ein Listeneintrag, wie in folgendem Beispiel, würde ohne !important rot dargestellt. Mit !important wird die Wertigkeit der id überboten, der Text wäre blau:

#content ul li {
color : red;
}
ul li {
color : blue !important;
}

Auch !important würde man streng betrachtet nicht als Hack bezeichnen, da es Teil des CSSStandards ist. Doch die Wirkung ist recht brachial. Für ein schnelles Bugfixing oder bei sehr umfangreichen Projekten ist das manchmal die einfachste Lösung. Falls umsetzbar, sollten jedoch generelle Anpassungen im CSS diesem Mittel vorgezogen werden. !important wirkt dabei in allen modernen Browsern. Die ausführliche Beschreibung der Wertigkeiten finden Sie im SELFHTML (siehe Kasten).

Workaround für Opera

Aber nicht nur die verschiedenen Versionen des Internet Explorers und Firefox unterscheiden sich in der Darstellung von margin und padding. Auch Opera stellt Abstände teilweise mit Abweichungen dar. Gerade beim Einsatz der relativen Maßeinheit em für skalierbare Webseiten variiert Opera mitunter massiv. Besonders wenn ein em-Wert mit mehr als einer Kommastelle angegeben wird, (z.B. 4.275em) kann es zu bösen Überraschungen kommen.

Anpassungen für Opera sind mit Kombinationen von verschiedenen CSS-Anweisungen möglich. Die Grundkonfiguration schreiben Sie an den Anfang. Alle folgenden Schreibweisen dienen dazu, stückweise Browser für Browser auszuschließen bzw. Anweisungen für einzelne Browser zu überschreiben.

Als nächste Anweisung setzen Sie den Child-Selector ein. Er sorgt dafür, dass ein bestimmtes HTML-Tag innerhalb eines anderen angesprochen wird. Das folgende Beispiel zeigt die Wirkweise des Child-Selectors:

li {
color : red;
}
ul>li {
color : blue;
}

Durch dieses CSS werden alle Listenpunkte in Rot dargestellt. Lediglich die Einträge in ungeordneten Listen <ul> werden blau ausgegeben. Listenpunkte in geordneten Listen <ol> werden von dieser Anweisung nicht getroffen. Firefox, Opera und IE7 unterstützen Child-Selectoren - der Internet Explorer 6 und Versionen davor nicht: In der Definition der Grundkonfiguration schreiben Sie folglich die Anweisung für den IE 6.

In der folgenden Anweisung kommt die Pseudo-Klasse :root zur Anwendung. Diese wird weder von Opera noch vom IE 7 unterstützt. Folglich wird von diesen Browsern die Anweisung, die vorher per Child-Selector geschrieben wurde, interpretiert. Die Anweisung per :root wird von Firefox und Mozilla ausgewertet. Das dafür vorgesehene CSS muss also dort stehen. Eine Unterscheidung zwischen Firefox und Mozilla ist nicht notwendig, da diese im Kern die gleiche Engine verwenden. Als letzte Anweisung schreiben Sie per Star-Plus-HTML-Hack eine Anweisung für den IE 7 - hiermit können Sie dann Darstellungsunterschiede zum Opera ausgleichen, die oben per Child-Selector angewiesen wurden. Damit dieser greift, müssen Sie allerdings die Wertigkeit der Anweisung über die des Child-Selectors bringen. Hier haben Sie entweder die Möglichkeit, den Star-Plus-HTML-Hack kombiniert mit dem Child-Selector zu schreiben. Eine Aufwertung per !important ist zwar nicht elegant, hat aber trotzdem den gleichen Effekt.

// IE 6 + alte Browser
#content {
width : 39em;
}
// Opera
html>body #content {
width : 37.5em;
}
// FF, Mozilla
:root #content {
width : 38.5em;
}
// IE 7
*+ html>body #content {
width : 39.4em;
}

Die Sortierung dieser Anweisungen spielt keine Rolle. Für eine gute Pflegbarkeit des CSS sollten Sie jedoch immer die gleiche Abfolge einhalten. Die Verständlichkeit wird durch eine einheitliche Reihenfolge erleichtert.

Kritisch ist, dass das verwendete :root durch den W3C-Validator als Fehler gemeldet wird. Falls die Korrektheit der Quelltexte eine Anforderung Ihres Auftraggebers ist, haben Sie mit diesem Szenario ein Problem.

Individuelle Safari-Anweisungen

Je nach Schriftgrößendefinition bereitet die skalierbare Einheit em Darstellungsprobleme im Safari. Um auch diesen Browser ansprechen zu können, ist hier eine Zwei-Dateien-Lösung ein in der Praxis etablierter Weg: type="text/opera" für die 2. CSS-Datei. Auch wenn es die Pflegbarkeit von Quelltexten nicht verbessert, ist das Einbinden einer zweiten Datei für die Anpassung von Opera und Safari sinnvoll. Opera selbst hat eine eigene Browserweiche implementiert. Für die valide Einbindung einer CSS-Datei über den <link>-Tag ist das Attribut type mit der Angabe des Wertes "text/css" notwendig. Opera liest zusätzlich CSS-Dateien aus, die per type="text/opera" eingebunden werden - Firefox und Explorer ignorieren diesen Quelltextabschnitt, Safari aber liest ihn ein.

Dieser Sachverhalt bietet die Möglichkeit, ein anderes Workaround als oben beschrieben umzusetzen. Ihr komplettes Style ist in einer Hauptdatei umgesetzt. Abweichungen des IE Version 6 und 7 schreiben Sie mit dem Starbzw. Star-Plus-HMTL-Hack in diese Datei:

#content {
width : 24em;
}
// IE 6
* html #content {
width : 22.4em;
}
// IE 7
*+ html #content {
width : 24.4em;
}

Da Ihnen eine separate Datei zur Verfügung steht, die nur von Opera und Safari gelesen wird, werden alle Anweisungen für diese Browser dort vorgenommen. Beide können Sie zudem noch getrennt voneinander ansprechen:

// Safari
html* #content {
width : 25em;
}
// Opera
#content {
width : 22.4em;
}

Der Stern als Selector, ohne Leerzeichen an das html geschrieben, wird vom Opera ignoriert. Dadurch wird die erste Anweisung vom Safari umgesetzt. Durch das Ansprechen über den Stern-Selector hat die erste Anweisung eine höhere Wertigkeit erhalten. Die andere Anweisung wird dann vom Opera interpretiert. Von der eigentlichen Schreibweise ist diese Umsetzung wesentlich einfacher zu lesen, als das CSS mit Child-Selectoren und Pseudo-Elementen. Das rechtfertigt gegebenenfalls das pflegeintensivere Verteilen des CSS auf zwei Dateien. Der Vorteil ist, dass damit das nicht valide :root aus der Hauptdatei verschwindet, und damit wieder ein valides CSS möglich ist. Lediglich das html* ohne Leerzeichen wird vom W3C-Validator als Fehler gemeldet. Dieses html* verdient tatsächlich die Bezeichnung "Hack", da es keine reguläre Schreibweise darstellt, sondern eine Schwachstelle des Browsers nutzt.

Fazit

Auch wenn ein Webdesign, das ohne CSS-Hacks auskommt eleganter ist, haben Sie viele Möglichkeiten, für einzelne Browser bestimmte Anweisungen zu schreiben. Bei allen Schreibweisen, die Fehler in der Browserprogrammierung nutzen, ist Webdesign jedoch immer ein Wettlauf mit der Entwicklung der Browser, die die Lücke vielleicht beim nächsten Update korrigiert. Mit standardkonformen Quellcodes stehen Sie langfristig auf der sicheren Seite!

Browserkompatible Seitengestaltung

© Archiv

Durch Conditional Comments haben Sie konkreten Einfluss auf den Internet Explorer.

WEB-LINKS

Browserkompatible Seitengestaltung

  • Box-Modell
  • HTML-Validator
  • CSS-Validator
  • Browserstatistik
  • Conditional Comments
  • Gewichtung der Selektoren
  • Umfassende Übersicht verschiedenster Hacks

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".