Knapp zehn Jahre alte CSS-Funktionen, die man jetzt so langsam einsetzen kann, wenn der IE6 keine Rolle spielt

Ein kleiner Reminder an mich selber. Der Internet Explorer 7 kann problemlos folgende Dinge:

  • Mehrklassenselektoren wie .teaser.long
  • Nachbarselektoren wie #content .teaser + p
  • Direkte-Eltern-Selektoren wie #content > p
  • :first-child
  • Attribut-Selektoren wie a[rel=lightbox]
  • PNG24-Bilder mit Alpha-Transparenz
  • position: fixed; (Aber Vorsicht mit iOS!)
  • min-height / max-height
  • :hover auf allen Elementen, nicht nur Links

(Mit recht simplen Hacks kann man auch display: inline-block; verwenden. Mehr dazu in einem Artikel der Mozilla Blogs)

IE7 kann jedoch nicht:

  • Content-Erzeugung per :before und :after
  • :last-child oder gar :nth-child, wo kämen wir denn dahin?
  • display: table-cell; und Co.

Mit Dank an When can I use …

22 Kommentare

Yannick

Danke für die kleine Zusammenfassung :)

Manuel Strehl

Ich schließe mich Yannick an, danke für die Erinnerung!

Ich fange langsam an, mich wieder an Mehrklassenselektoren und transparente PNGs zu gewöhnen.

erlehmann

„Aber Vorsicht mit iOS“ ?

Gerrit

@erlehmann: Guck dir mal diese Website auf dem iPhone an und zoome ein bisschen hin und her!

erlehmann

Implizierend, ich hätte eines parat … ich sehe hier (Iceweasel 8.0, Chromium 14) mit kleinem Viewport nur, dass das Logo links oben mitscrollt und alles überdeckt. Was genau ist nun das iOS-Problem?

Gerrit

Das Logo überdeckt die Initialie komplett, wenn man bissl reinzoomt mit iOS 5. Da hat jemand nicht mitgedacht!

Schepp

Ãœber einen Trick kann man trotz IE7 mit Pseudoelementen in CSS loslegen:

.container {

/* Wir benutzen eine proprietäre IE-Eigenschaft als Vehikel, um eine Expression, also JavaScript auf dem Mutterelement auszuführen. Die Expression läuft genau einmal, denn sie überschreibt sich selbst beim ersten Lauf und schaltet sich damit ab. Das Script injiziert ein neues Element, wobei meine Wahl auf das aktuell ausgemusterte und damit ungefährlich <s>-Element fällt. */

scrollbar-base-color: expression(this.runtimeStyle.scrollbarBaseColor=‹#8C8CC6‹,this.innerHTML = ›<s>Foo</s>‹+this.innerHTML);
}

.container:before,.container > s {
content: ›Foo‹;
display: block;
}

respektive:

.container {
scrollbar-base-color: expression(this.runtimeStyle.scrollbarBaseColor=‹#8C8CC6‹,this.innerHTML = this.innerHTML+‹<s>Foo</s>‹);
}

.container:after,.container > s {
content: ›Foo‹;
display: block;
}

Zu sehen hier

Andreas

Noch viel mehr Spaß macht das Ganze, wenn man auch den IE7 über Bord wirft.

Eric Eggert

@Schepp: Geht das nicht sauberer mit einem einfachen JavaScript? Expressions mag ich nicht in meiner CSS-Datei haben.

(Wobei ich meist mit before und after progressive enhance, dann ist der IE7 hält leicht abgespeckt.)

:Last-Child und :nth-Child setzen wir auch schon ewig ein, meist mit selectivizr als Fallback.

Display: table-cell nutzen wir auch produktiv, für oldIEs wird halt gefloatet und auf die Annehmlichkeiten wie gleiche Spaltenbreite usw. verzichtet. Klassisches Graceful Degradation.

Schepp

@Eric Es ist ja einfaches JavaScript, aber eben direkt an der Stelle eingesetzt, wo Du sowieso stylst. Dass ich nicht noch in mein JavaScript rüberwechseln muss, finde ich daran gut. Auch dass ich es beim CSS-Lesen sofort realisiere und mir nicht ein Zusammenhang in einem extra JavaScript entgeht, finde ich gut. Letztendlich ist es aber wie alles im Leben Geschmackssache, und abhängig von der damit zu lösenden Aufgabe.

Jo

Seit dem IE9 verpasse ich den alten IEs das Skript »IE9.js« von Dean Edwards und kann mich erfrischt auf aktuelles CSS konzentrieren. Das macht den Kopf frei für neue Herausforderungen.

Fabian Tempel

Ich behaupte mal kühn, dass :first-child zwar funktioniert aber der IE7 immer noch so seine Problemchen damit hat steht vor dem eigentlichen Element noch ein HTML-Kommentar, dann schlägt :first-child leider fehl.

Freejack

@Jo: ja, so habe ich es beim letzten Projekt auch gemacht. Alles fertig gemacht, nur Chrome, Firefox und IE9 berücksichtigt. Am Schluss IE9.js rein, und getestet wie schlecht es im IE8 und IE7 aussieht. Kleinere Fehler sind mir egal, denn IE-alt-Nutzer sind ja ganz offenkundig keine Layout- und Funktionalitätsfanatiker. Und siehe da, es funktioniert wirklich ganz gut.

Nur media-Queries gehen gar nicht, die sind jedoch vor allem für mobile Browser reingekommen. Auch da ist mir der IE dann egal.

Michael Kühnel

Ja, da fängt’s wieder an richtig Spass zu machen : ]

Zur Ergänzung:
display: inline-block
geht für Inline-Elemente runter bis zum IE6.

Wunderbar für Links in Listen …

:first-child
Macht im IE7 noch Probleme wenn man per Javascript am DOM rummanipuliert. http://www.quirksmode.org/css/contents.html#t17

micha

ie7 und 8 können eben nicht problemlos transparente png. opacity kills them.

Alexander Rutz

Danke für die schöne Zusammenfassung. Ich denke eigentlich auch, dass man ie7 gleich mit dem ie6 vernachlässigen kann, denn diejenigen die vom ie6 upgraden können/wollen/dürfen sollten in 90% der Fälle ohnehin beim (fast erträglichen) ie8 gelandet sein. Mir reicht das zumindest als Rechtfertigung den ie7 nur stiefmütterlich zu unterstützen.

Gerrit

@micha: Da ich opacity fast nie einsetze (gehört auch in die Liste »für später«), ist mir das an dieser Stelle egal.

@Alexander: Ich sehe es so: IE6 und IE7 machen zusammen immerhin noch über 10 Prozent der Nutzer aus, etwa zu gleichen Teilen. Die noch unbelehrbarere Hälfte dieser Unbelehrbaren sollte man vernachlässigen. Für die anderen 6 oder 7 Prozent der Nutzer kann ich noch nicht abschalten… Bedenke: Windows Vista wurde mit IE7 ausgeliefert und ist 2007 erschienen, gerade knapp 5 Jahre. Wir machen uns nicht klar, dass sehr viele Nutzer nur ca. alle 5 Jahre einen neuen Computer kaufen, und diesen niemals (niemals!) updaten.

hans

ich nutze die meisten der funktionen schon länger, aber so das die IE6 nutzer garnicht merken das da was fehlt :D.

Alexander Rutz

@Gerrit stimmt, die Realität ist eine traurige Welt für Idealisten

@hans das ist auch mein Ansatz :D

schoschie

Eine der wichtigsten hast Du vergessen:

:hover auf anderen Elementen als a (z.B. auch li und button). Damit sind u.a. Drop-down-Menüs in CSS schön elegant zu lösen. F+r den Drecks-IE6 musste man immer Hilfsklassen benutzen.

Gerrit

@schoschie: Ui, stimmt!

Kommentar verfassen