CSS-Hacks

Teil 2: Browserkompatible Seitengestaltung

Das A und O: valider Quelltext

Eine Grundregel für gutes Webdesign ist standardkonformer Quelltext. Sowohl das HTML als auch das CSS sollten Sie während der Entwicklung einer Homepage regelmäßig durch die W3C-Validatoren überprüfen. Nur so können Sie ausschließen, dass ein Darstellungsproblem an falschem HTML oder CSS liegt. Haben Sie diese Anforderung erfüllt - oder sollten Sie keine Möglichkeiten haben, das HTML anzupassen, weil beispielsweise Tausende Seiten durch ein Content Management System generiert worden sind - stehen Ihnen unterschiedliche Browser-Hacks zur Verfügung. Dieser Begriff umfasst alle Maßnahmen, die dazu dienen, bestimmte Effekte nur für einzelne Browser zu erzielen. Dazu gehören gegen den Standard verstoßende Schreibweisen von CSS-Anweisungen, die dem Wort "Hack" gerecht werden. Aber auch korrekte Schreibweisen, die entweder in einer bestimmten Kombination zu einem gewünschten Verhalten führen, oder die aufgrund vom technischen Fortschritt eine bestimmte Darstellung nur in neueren Browsern bewirkt.

Browserkompatible Seitengestaltung

© Archiv

Zwischen Firefox und dem Internet Explorer gibt es starke Abweichungen bei der Darstellung von Breiten.

Lesen Sie Browserstatistiken

Bei der Entwicklung einer Homepage sollten Sie sich immer vor Augen halten, dass Sie diese nicht für sich selbst, sondern für das WWW und damit für Anwender da draußen erstellen. Falls Sie den Relaunch einer Webseite durchführen, schauen Sie sich aktuelle Web-Logs an. Hier erfahren Sie, mit welchen Browsern die Seite angesehen wird. Daraus ergibt sich, für welche Sie Darstellungsprobleme ausgleichen müssen. Ist es ein neuer Auftritt, können Sie sich nur auf öffentliche Statistiken verlassen (siehe Kasten nächste Seite). Hier sind verschiedene Aspekte zu beachten: Statistiken sind so vergänglich, wie der technische Fortschritt voran schreitet. Die Veröffentlichung 2005 des Firefox oder 2006 des Internet Explorers 7 stellten teilweise komplett neue Anforderungen an Webdesigner. Außerdem sollten Sie Ihre Zielgruppe untersuchen. Bewegen sich Ihre Besucher eher im technischen Bereich - Programmierer, Webdesigner oder Werbeagenturen - ist der Anteil der Firefox- User erfahrungsgemäß höher. Dieser reicht bis zu 45% und ist damit mit dem Internet Explorer auf gleichem Niveau. Entwickeln Sie eine Seite für "Normal"-Surfer, sind um die 60% mit dem Internet Explorer unterwegs. Diese Werte beziehen sich auf deutsche Internetangebote. Anders verhält es sich bei Webangeboten, die weltweite Zugriffe verzeichnen: So etwa eine Immobilien-Firma auf Kreta. Hier waren es sogar 83% Internet Explorer-Besucher, nur 16% Firefox-Zugriffe waren geloggt. Allein über 50% davon waren Internet-Explorer-7-Benutzer.

Neben dem eigentlichen Browser sollten Sie auch einen Blick auf die Browserversion werfen. Beim Firefox spielt es keine Rolle, ob Sie Ihr CSS für die Version 1 oder 2 schreiben. Eklatante Unterschiede gibt es allerdings bei den Internet-Explorer-Varianten.

Browserkompatible Seitengestaltung

© Archiv

Valider Quelltext ist Merkmal einer guten Webseite.

IE + Firefox = 90%

Während die Version 6 des Internet Explorers noch den größeren Anteil einnimmt, gewinnt der IE7 jedoch auch langsam an Usern. Genau genommen haben Sie inklusive Firefox drei verschiedene Browser, bei denen Sie Darstellungsunterschiede ausgleichen müssen. Alle anderen, egal ob Safari, Opera oder die 5er Versionen des Internet Explorers, haben nur Marktanteile im einstelligen Bereich. Eine Optimierung ist hier erst bei hohen Zugriffszahlen wirtschaftlich.

Da der Firefox den CSS-Standard am besten unterstützt, gelten in folgenden Beispielen die Grunddefinitionen stets für diesen (damit auch für Mozilla), Abweichungen "hacken" Sie dann für die anderen Browser.

Browserkompatible Seitengestaltung

© Archiv

Durch Statistiken ermitteln Sie den Bedarf, für welche Browser Sie kompatibel programmieren müssen.

Conditional Comments

Sehr dankbar für die Optimierung sind "Bedingte Kommentare", die so genannten Conditional Comments (CC): HTML-Kommentare im Quelltext, die lediglich von den unterschiedlichen IEs interpretiert werden. Innerhalb standardkonformer Notation der Kommentare <!-- ... --> wird eine nur für den Internet Explorer auswertbare Bedingung geschrieben. Abhängig davon wird der darin enthaltene Quelltext dargestellt:

<!--[if IE 7]><p>Ich bin ein IE 7</p><![endif] //->

Dieser Quelltextschnipsel sorgt dafür, dass nur ein 7er IE das HTML ausgibt. Es entspricht einer in Programmiersprachen üblichen Abfrage: if (ie-Browserversion = Version 7). Alle anderen Browser ignorieren dieses Stück Code. Sie können neben der konkreten Versionsabfrage auch generell auf IE prüfen: <!-- [if IE.... Auch andere Vergleichsoperatoren wie <, >, <= oder >= sind möglich. Hier ist jedoch die Schreibweise gewöhnungsbedürftig:

Vergleich CC Bedeutung
< lt less than
<= lte less than or equal
> gt greater than
>= gte greater than or equal

Folgende Anweisung wird von allen Explorern bis zur Version 6 ausgegeben:

<!--[if lte 6]><p> IE, entweder Version 6 oder älter!
?</p><![endif]-->

Auch logische Operatoren wie && / AND oder || / OR sind möglich:

Operator CC Bedeutung
AND & einfaches kaufm. "und"
OR | einfaches Pipe-Zeichen
<!--[if (IE 6)|(IE 7)]><p>IE Version 6 oder 7</p><![endif]-->

In diese Quelltextabschnitte können Sie nicht nur reine HTML-Tags schreiben, sondern auch im <head> der HTML-Datei ein konkretes CSS für eine bestimmte IE-Version einbinden:

<!--[if IE 7><link href="css/
?style_ie7.css" type="text/css" rel=
?"stylesheet"/><![endif]-->

Auf diesem Weg können Sie einzelne Dateien einbinden, in denen Sie ausschließlich CSS-Definitionen für die entsprechende IE-Version konfigurieren. Der große Vorteil dieser Schreibweise ist die Zukunftssicherheit. Selbst wenn andere Browseranbieter diese Conditional Comments implementieren würden, würde eine Abfrage nie auf die Zeichenkette IE prüfen! "Bedingte Kommentare" sind übrigens ein gutes Bespiel dafür, dass ein Hack nicht zwangsläufig ein Verstoß gegen den Standard sein muss. CCs dürfen in einer umfassenden Hack-Sammlung nicht fehlen!

Alles in eine Datei

Das Auslagern in separate Dateien ist für den, der gerne sortiert, ideal. Allerdings sind CSSAnweisungen, die Ähnliches bewirken, dann auch sehr verstreut. Das erschwert die Pflegbarkeit, auch das Debuggen ist schwieriger. Style-Angaben, die in der Kombination bestimmte Effekte erzielen, sind manchmal in unterschiedlichen Dateien zu finden.

Folgende Hacks ermöglichen es jedoch, zusammengehöriges CSS direkt hintereinander zu schreiben:

IE 6: Star-HTML-Hack Bei diesem und folgendem Hack ist die Bezeichnung gleichzeitig die Schreibweise: * html #eine_id {...} Diese Anweisung wird ausschließlich vom Internet Explorer Version 6 interpretiert. Damit haben Sie die Möglichkeit, den Fix für eine CSS-Anweisung direkt an die Stelle zu schreiben, die Sie ausgleichen möchten. IE 7: Star-Plus-HTML-Hack Die Anweisung *+ html #eine_id {...} ist die entsprechende Schreibweise für den 7er IE. Auch diese wird von keinem anderen Browser interpretiert. Mit diesen beiden Notationen können Sie folglich das CSS so schreiben, dass Sie mit einer CSS-Datei oben genannte 90% aller Browser bedienen:

// FF und andere
#content {
width : 24em;
padding : 0.8em;
margin : 1.2em;
}
// IE 6
* html #content {
margin : 1.05em;
}
// IE 7
*+ html #content {
margin : 1.25em;
}

Dabei ist es irrelevant, in welcher Reihenfolge Sie die Anweisungen schreiben. Die Angabe im * html bzw. *+ html dominiert die Ausgabe, auch wenn die Anweisung ohne Hack hinter diesem Eintrag folgen würde. Allerdings können Sie per !important die Anweisungen für die IE-Blöcke wieder entkräften. In folgendem Beispiel würde der IE7 nicht die 23, sondern die 24em darstellen

#content {
width : 24em !important;
}
*+ html #content {
width : 23em;
}

Beide Hacks sind auch auf Deutsch als Stern-HTML-Hack bzw. Stern-Plus-HTML-Hack zu finden.

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​".