Peruns Weblog - Webwork und Internet

Das Thema Internet Explorer 7 und CSS-Hacks hatten wir schon mal. Nun gibt es auf Positioniseverything.net ein Bericht zu diesem Thema. Wie immer lesenswert.

Wer keine Lust/Zeit/etc. hat das Layout einer Website auch für Internet Explorer 5.0x (Windows) und für Internet Explorer 5.x (Mac) zu entwickeln, der kann das CSS folgendermaßen einbinden:

<style type="text/css" media="screen,projection">
<!--
@import'styles.css';
-->
</styles>

Somit sind nicht nur diese beiden Browser sondern auch die Konsorten Netscape <4 und Internet Explorer <4 von den CSS ausgesperrt. Der unformatierte Inhalt ist aber trotzdem für alle Browser zugänglich. Bei Auftrags-Seiten sollte man dies natürlich vorher mit dem Auftraggeber abklären.

Die Einbindung von projection ist für Opera im Vollbildmodus.

• Hinweis 1: der Pfad der CSS-Datei muss innerhalb von einfachen Anführungszeichen (ohne Leerzeichen) notiert werden sonst kann IE Mac die CSS-Datei lesen.
• Hinweis 2: Internet Explorer 5.5 kann mit dieser Art der CSS-Einbindung umgehen.

Wie komme ich jetzt auf dieses Thema? In letzter Zeit sah ich häufig Beiträge in Blogs, Foren und Mailinglisten wo Leute über das Verhalten von IE 5 in Bezug auf CSS am verzweifeln waren. Daher mein Rat an Leute die private bzw. nicht-kommerzielle Websites betreiben bzw. Layouten: macht euch nicht die Mühe das Layout für Internet Explorer kleiner 5.5 anzupassen. Investiert die Zeit lieber in etwas sinvolleres: Inhalte für die Website erstellen, Bekannte treffen, spazieren gehen, in der Nase bohren … alles sinvoller als für diese IE-Versionen zu "optimieren" (CSS-Hacks einsetzen, Divs verschachteln etc.).

Und macht euch keine Sorgen, zum einen reden wir hier vom Aussperen vom Layout, Inhalt ist nach wie vor für alle zugänglich und zum zweiten schauen wir uns die Statistik von Webhits.de, dort fallen nur ganze 2,8% für IE 5.0, 5.01 (Win) und für IE 5 (Mac) zusammen. Und die Anzahl der Nutzer dieser Browser wird auch weiterhin langsam aber sicher sinken, denn jedes Update auf Windows XP zieht automatisch eine Installation von IE 6 mit sich.

Allerdings gibt es da so Beispiele die ich nicht wirklich nachvollziehen kann und das bezieht sich auf manche Mac OS X-Nutzer. Da hat man standardmäßig einen (imho) sehr guten Browser (Safari) dabei, evtl. könnte man sich auch etwas Mozilla-Camino oder zu Not Mozilla-Firefox gönnen, aber was machen manche Leute? Die nutzen weiterhin IE 5 und das freiwillig. Das wäre so ungefähr, wie wenn ich nächstes Jahr auf einem Rechner mit Windows-Vista einen Netscape 3 installieren würde.

Und ich bin nicht der einzige der sich fragt warum sich manche nutzer von Mac OS X das freiwillig antun: 456Bereastreet.com und Joshuaink.

Und jetzt kommt mir bitte nicht mit Umgewöhnungszeit :-). Wir reden hier von Browsern, und nicht von einem Umstieg von Photoshop auf Gimp oder von Windows XP auf Linux Slackware.

Da wird eine weitere Sau durch die Netzgemeinde und das klein Bloggersdorf getrieben und da dachte ich mir ich beteilige mich auch daran :-). Was ist passiert? Die Entwickler des berühmt berüchtigten Internet Explorer 7 haben einen Aufruf gestartet in dem sie die Webdesigner um Hilfe bitten - man soll die CSS-Dateien von CSS-Hacks befreien - und in dem sie auch ein konkretes Beispiel aufzeigten. Als Empfehlung, anstatt CSS-gehacke, wird der Einsatz von Conditional Comments empfohlen. Ich möchte hier nur am Rande erwähnen, das die Webworker die ganzen CSS-Hacks nicht aus Spaß an der Freude eingesetzt haben sondern um die Unzulänglichkeiten von IE 5-6 auszubügeln.

In den Foren von Heise und Golem die typische Diskussion: von "Microsoft ist toll" bis "die haben es verdient".

Tja, was soll ich dazu sagen? Eigentlich nicht viel. Es ist schon seit einiger Zeit absehbar das der IE 7 zumindest in einigen Punkten sich den Webstandards nähern wird. Daher überrascht mich dieser "Aufruf" nicht. Aber man soll jetzt nicht in Panik verfallen, denn ich denke so ähnlich wie Beate auch: abwarten und Tee trinken. Denn es wird noch eine sehr lange Zeit (ich vermute Ende 2006) dauern bis die endgültige Version von IE 7 erscheint und dann wird es auch sehr lange dauern bis sich diese Version nennenswert verbreitet.

Was mir viel mehr Sorgen bereitet ist die Frage ob es dann auch möglich sein soll, wie jetzt, mehrere Versionen von IE (zum Testen) auf dem gleichen System zu haben.

Momentan arbeite ich an mehreren Projekten gleichzeitig und mittlerweile verwandelt sich das Weblog in ein Arbeitstagebuch und da wollte ich ein paar Sachen notieren die mir so aufgefallen sind.

Als erstes fangen wir mit einer leichten Übung an: mit einem CSS-Hack für Internet Explorer 5-5.5 (Windows). Wir alle wissen das IE das Box-Modell falsch intepretiert, soweit so gut und ich will jetzt nicht näher darauf eingehen, aber man hat das Problem das IE 5-5.5 eine andere Anweisung bekommen soll als die restlichen Browser, hier ein Beispiel:

width: 170px; /* Anweisung für IE 5-5.5 */
width/**/:/**/ 150px; /* Anweisung für die restlichen Browser */

Der "Trick" besteht darin das der erste Kommentar IE 5.0 (Win) umhaut und der zweite IE 5.5. Ja, ich weiß mit CSS-Hacks sollte man vorsichtig sein und im Falle von IE-Unzulänglichkeiten die conditional comments bemühen. Aber trotzdem interessant.

Die zweite Beobachtung betrifft position: fixed;. Viele wissen, daß diese CSS-Anweisung bis jetzt leider nur von Opera, Geckos (Mozilla, Firefox, Netscape ab 7 etc.), Safari und Konqueror aber nicht von Internet Explorer (mal von IE Mac abgesehen) unterstützt wird. Es gibt einige Lösungen die IE position :fixed; beibringen können. Sehr interessant finde ich den "IE 7" von Dean Edwards. Es handelt sich hierbei um einer Erweiterung, die dem IE einige lang vermisste Fähigkeiten spendiert u. a. volle Unterstützung für PNG-Grafiken und fixierte Bereiche.

Nun hatte ich aber ein Layout erstellt welches einen Workaround nutzt um den Footer immer am Seitenende zu halten, guckst du hier: The Man in Blue. Kommt man jetzt auf die Idee, von alleine oder durch den Kunden :-), bestimmte Bereiche zu fixieren dann wird das zwar in den Geckos und Opera 8+ klappen, aber nicht in IE. Egal ob man die IE 7-Lösung oder sonstige Ansätze (CSS-Hacks, Expressions) bemüht.

Die zwei Ansätze ("sticky Footer" und fixierung in IE) sind leider nicht kompatibel. Nun fehlt mir leider die Zeit dem Phänomen näher auf den Grund zu gehen. Gut, nun kann man sich streiten wie sinvoll und nützlich (gerringe Monitorauflösung, persönliche Abneigung etc.) fixierte Bereiche sind, aber das wollte ich hier nicht zum Thema machen.

Die dritte Erfahrung die ich gemacht habe, ist das IE (wer den sonst) gerne die Rahmen um Überschriften "verschluckt" wenn sich die Überschriften innerhalb eines Bereiches befinden welcher sich wiederum innerhalb eines relativ positionierten Bereiches befinden. Nich vertsanden? OK, hier ein Beispiel:

#bereich1 {
position: relative;
}
#bereich2 {
...
}
#bereich2 h3 {
border-bottom: 1px solid #ddd;
}

In so einem Fall kann es passieren, daß IE den Rahmen nicht anzeigt. Abhilfe schafft man in dem man dem Elternelemen - in diesem Fall #bereich2 - auch position: relative; vergibt.

Simon Willson und Nate schreiben auf deren Websites über ein sehr wichtiges Thema: "pflegeleichte CSS-Dateien" oder was soll man machen bzw. vermeiden um diese zu bekommen.

Sehr wichtig und hilfreich sind Kommentare innerhalb der CSS-Datei und zwar nicht nur bestimmte Bereiche von einander abzuheben sondern vor allem die CSS-Hacks zu kommentieren, damit man auch noch nach Monaten nachvollziehen kann warum man eine, auf den ersten Blick bescheurte, Anweisung notiert hat :-).

Heute ist mir wieder ein alter Bekannter über den Weg gelaufen: der doppelte Margin-Wert. Es handelt sich hierbei um einen CSS-Bug im Internet Explorer. Worum geht es? Weist man einem Div-Block die Eigenschaft float zu und gibt ihm gleichzeitig einen Margin-Wert (welches in gleicher Richtung zeigt), dann verdoppelt sich der Margin-Wert. Je nach Laune und Tagesform ist es entweder ein lästiger Bug oder ein nettes Feature der Firma Microsoft :twisted:. Hier ein Code-Beispiel:

#sidebar {
float: right;
margin-right: 25px; /* In IE wird daraus 50px */
width: 190px;
}

Eine mögliche Lösung des Problems:

#sidebar {
float: right;
margin-right: 25px;
display: inline; /* Umgeht das Problem */
width: 190px;
}

Weiterführende Infos: Positioniseverything.net.

Die 10 CSS-Tricks hatten wir schon mal. Nun gibt es weitere 10 CSS-Tricks, die man sich merken sollte.