Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

CSS Hacks für diverse IE-Versionen

Samstag, 19. März 2011

Seit vielen Jahren hat sich die Erkenntnis durchgesetzt, dass grafische Effekte auf Webseiten besser mit CSS als mit Grafiken dargestellt werden können. Stichworte: Barrierefreiheit und Ladezeit/Traffic.
Als Beispiel möge dieser plastisch wirkende Submit-Button dienen, den ich gerne verwende:
Screenshot


Das CSS für diesen Button umfasst nur wenige Zeilen:
#button {
-moz-border-radius:2em;
-webkit-border-radius:2em;
border-radius:2em;
background: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#444));
background: -moz-linear-gradient(top, #ccc, #444);
background: -o-linear-gradient(top, #ccc, #444); /* Opera ab V. 11.10 */
}

Damit werden alle großen Browser bedient, mit Ausnahme (wie auch anders!?) des Internet-Explorer.
Der IE 6 kann weder border-radius, noch gradient. Aber der IE 6 ist ja ohnehin kein Thema mehr.
IE 7 und 8 können kein border-radius, aber mit einem Hack via filter bzw. -ms-filter wenigstens einen Verlauf darstellen.
Zu sehen ist das mit detaillierten Beschreibungen bei maddesigns.
Nun kommt der mit vielen Vorschusslorbeeren bedachte IE 9, und der macht die von maddesigns beschriebene Lösung kaputt. Der Verlauf läuft über den Radius hinaus und füllt ein Rechteck.
Screenshot


maddesigns hat flugs auch hierfür eine Lösung parat. Ich sag' mal höflich danke dafür.
Aber ich werde diesen Unfug nicht mehr mitmachen. Vendor-Prefixe (-moz-border-radius anstelle von border-radius) sind nicht schön. Aber was ist eine Zeile zusätzlicher CSS-Code für eine Browser-Engine gegen die CSS-Hack-Ungetüme, die jede neue IE-Version erfordert.
Mein Fazit: Der IE in allen Versionen wird so behandelt, wie er es verdient: Wenn er eine CSS-Deklaration nicht versteht, kriegt er das Fallback. Im vorliegenden Fall eben einen einfarbigen Background ohne Verlauf mit background: #999;
Screenshot IE


Und ich werde zukünftig keinerlei IE-spezifische CSS-Hacks verwenden. Ich habe schlicht keine Lust mehr, mich über jede neue IE Version zu ärgern, und x CSS Dateien nacharbeiten.



17 Kommentare

  1. Hallo Fritz,

    ich mag auch die Rückständigkeit des IE in Sachen CSS nicht, aber gleichwohl verstehe ich (noch?) Dein Problem nicht.

    Auf dieter-welzel.de habe ich in der CSS-Datei Farbverläufe für Gecko-Browser mittels -moz-gradient und für WebKit-Browser mittels -webkit-gradient definiert. Für IE ab Version 7 gibt es stattdessen filter und damit auch automatisch für den IE 9. Dadurch tritt das Problem mit Missachtung von border-radius bei Farbverläufen nicht auf, denn eine SVG-Datei gibt es bei mir nicht.

    Übrigens konnte ich beim Opera 11.01 nicht feststellen, dass dort -o-gradient oder gradient ohne SVG-Datei funktioniert. Hast Du einen Beleg bzw. einen Link für mich.

    Beste Grüße
    Dieter

    Kommentar von Dieter — Samstag, 19. März 2011 - 22:05 Uhr

  2. Hallo Dieter,

    schon klar, dass mein Frust-Post etwas schwer zu verstehen ist.
    Noch dazu, da maddesigns die Demo mit der fehlerhaften Darstellung des IE 9 offline genommen hat, und nur noch die Demo zeigt, die mit entsprechendem Hack-Gedöns auch im IE 9 funktioniert.
    Und ich hab' die im IE 9 fehlerhaften Seiten jetzt ebenfalls korrigiert.

    Zur Klarstellung:
    Das Problem trat nur auf, wenn du eine Bereich mit border-radius und filter einen Verlauf gibst. Dann wird nicht nur der Bereich innerhalb der runden Ecken mit einem Verlauf gefüllt, sondern ein eckiger Bereich. Im obigen Screenshot ist das mit Pfeilen markiert.
    Zum Opera: Das funktioniert, wie im Kommentar steht, erst ab 11.10 (die gibt es derzeit nur als Beta)

    Aber das Kernproblem ist ja:
    Auch als der IE 7 kam, funktionierten viele Hacks aus IE 6 - Zeiten nicht mehr.
    Das gleiche Spiel mit den IE 7 Hacks im IE 8.
    Und jetzt mag der IE 9 einen IE 7/8 Hack nicht.
    Und demnächst der IE 10 ganz sicher wieder irgend eine extra Wurst nicht, die wohl demnächst für den IE 9 gebraten wird.

    Wie gesagt: Ich hab' keine Lust mehr zu diesen Spielchen. Soweit der IE standardkonforme CSS-Deklarationen versteht, gut. Aber von mir kriegt er keinen einzigen Hack mehr. Dann haben IE Nutzer halt keine Verläufe. Ist mir doch egal.

    Gruß Fritz und happy hacking ;-)

    Kommentar von Fritz — Samstag, 19. März 2011 - 23:00 Uhr

  3. Hallo Fritz,

    ich wunder(t)e mich nur, dass auf dieter-welzel.de das Problem beim IE9 trotz border-radius und Farbverlauf mit Filter nicht auftritt. Müsste es ja aber nach dem was Du und maddesigns schreiben. Seltsam!

    Opera, habe ich einfach die fehlende Null hinter dem Komma bei der Version übersehen. Beta-Versionen sind für mich nicht relevant, da noch nicht für den produktiven Einsatz vorgesehen.

    Das Kernproblem sind in der Tat die Hacks, welche die verschiedenen Versionen des IE benötigen. Der IE 6 bekommt auf dieter-welzel.de einfach überhaupt kein CSS-Layout mehr. Und bei den neueren Versionen ist die Anzahl der Hacks noch überschaubar und dank eigener mittels Conditional Comment eingebundener CSS-Datei auch auf bestimmte IE-Versionen einzugrenzen. Soweit ich das bisher feststellen konnte, brauchen meine IE-Hacks auf meinen Webseiten für den IE9 keine Änderungen.

    Allerdings muss ich zugeben, dass Farbverläufe mittels Filter nicht die optimale Lösung sind, denn sie verlangsamen den Seitenaufbau im IE.

    Gruß zurück und hoffentlich weniger Hacking ;-)
    Dieter

    Kommentar von Dieter — Samstag, 19. März 2011 - 23:42 Uhr

  4. Hallo Dieter,

    hast du wirklich border-radius und Farbverlauf mit Filter auf ein und demselben Element? Wo bitte?

    Gruß Fritz

    Kommentar von Fritz — Samstag, 19. März 2011 - 23:54 Uhr

  5. Hallo Fritz,

    habe folgenden Code in meiner CSS-Datei für www.dieter-welzel.de zu bieten:

    #page h2,
    #simpletags-3 h3.widget-title {
    text-align: center;
    border: 1px solid #ddd;
    padding: .5em;
    background-color: #F7F8F3;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    filter:progid:DXImageTransform.Microsoft.Shadow (color=#888888, Direction=135, Strength=5); /* IE6-7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow (color=#888888, Direction=135, Strength=5)"; /* IE8 */
    zoom:1; /* trigger hasLayout */
    }

    Das sind die h2-Überschriften auf den Seiten und Blogbeiträgen sowie bei der Sitemapseite auch die bieden Unterüberschriften Seiten und Blogartikel. Der Farbverlauf ist sehr dezent, aber würde er über die abgerundete Ecke gehen, würde es auffallen. Oder habe ich da was falsch verstanden?

    Gruß zurück
    Dieter

    Kommentar von Dieter — Sonntag, 20. März 2011 - 18:43 Uhr

  6. Korrektur: Die h2-Überschriften der Blogbeiträge sind nicht betroffen, da kein #page.

    Kommentar von Dieter — Sonntag, 20. März 2011 - 18:49 Uhr

  7. Hallo Dieter,

    ich fürchte, wir schreiben aneinander vorbei.

    Das Problem betrifft border-radius in Verbindung mit linear-gradient (Verlauf) bzw. den entsprechenden Hack für IE:
    Beispiel:
    filter: progid:DXImageTransform.Microsoft.gradientwp_kses_normalize_entities2("9166")
    (GradientType=0, startColorstr=#c8482c, endColorstr=#ffffff);

    Dein CSS-Code-Beispiel beinhaltet zwar filter, aber nur den IE-Hack für Shadow (Schatten), und NICHT für linear-gradient.

    Da sieht man es mal wieder: Die Hacks für die diversen IEs haben inzwischen einen so grotesken Umfang angenommen, dass es sogar schwierig wird, darüber zu kommunizieren.

    Aufgefallen ist mir außerdem, dass, entgegen deiner Aussage, dein IE-Hack NICHT in einen conditional comment eingebunden ist. Du hast also lediglich Glück, dass der shadow-Hack im IE 9 funktioniert, und dir das Nacharbeiten deiner CSS-Dateien erspart bleibt. ;-)

    Man sieht sich bei der nächsten (kaputten) IE Version.

    Kommentar von Fritz — Sonntag, 20. März 2011 - 19:28 Uhr

  8. Hallo Fritz,

    ich fürchte Du hast Recht. Da habe ich mich vertan. ;-)

    Neuer Anlauf mit einem Auszug aus meiner CSS-Datei für www.dieter-welzel.de:
    .post {
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#FFEEEEEE, endColorstr=#FFDDDDDD);
    background: -moz-linear-gradient(
    left,
    #EEE,
    #DDD
    );
    background: -webkit-gradient(
    linear,
    left top, right top,
    from(#EEE),
    to(#DDD)
    );
    background: -o-gradient(
    left,
    #EEE,
    #DDD
    );
    }

    .post {
    border: 1px solid #ddd;
    padding: 1em;
    margin-right: -2em;
    background-color: #eee;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    filter:progid:DXImageTransform.Microsoft.Shadow (color=#888888, Direction=135, Strength=5); /* IE6-7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow (color=#888888, Direction=135, Strength=5)"; /* IE8 */
    zoom:1; /* trigger hasLayout */
    }

    Das sollte jetzt nicht nur ein Filter für den Shadow (Schatten), sondern auch für einen Farbverlauf mit IE-Filter sein.

    Gruß
    Dieter
    PS: Ich hoffe, wir sehen uns schon vor der nächsten IE-Version.
    PPS: Seltsam, Firebug zeigt im Firefox nur den Vendor-Prefix -moz an und keine Filter.

    Kommentar von Dieter — Sonntag, 20. März 2011 - 20:05 Uhr

  9. Hallo Dieter,

    ob der zweite Filter (shadow), der für .post deklariert wurde, den ersten Filter(gradient) überschreibt, weiß ich nicht, und ich hab' auch keine Lust, das zu erkunden oder zu testen. Wie gesagt: Ich verwende ab sofort keine IE-Hacks mehr.)

    Sehen dürfte man den Verlauf im IE ohnehin vermutlich nicht:
    weder #FFEEEEEE noch #FFDDDDDD sind Hexadezimalwerte.
    Dein CSS:
    startColorstr=#FFEEEEEE, endColorstr=#FFDDDDDD)

    Und selbst wenn du mit gültigen Hexadezimalwerten arbeitest
    startColorstr=#FFEEEE, endColorstr=#FFDDDD)
    dann dürfte der Verlauf aufgrund des geringen Unterschieds zwischen Start- und Zielfarbe mit bloßem Auge kaum als solcher zu erkennen sein.

    Kommentar von Fritz — Sonntag, 20. März 2011 - 21:57 Uhr

  10. Hallo Fritz,

    ich weiß zwar nicht woher ich das zusätzliche FF in den Hexadezimalwerten habe, aber es funktionierte bei den anderen Farbverläufen im Header und Footer damit auch.

    Habe die Hexadezimalwerte gleichwohl jetzt richtig gemacht. Vielen Dank für Deinen Hinweis.

    Den Unterschied zwischen #EEEEEE und #DDDDDD kann ich beim IE9 in der Tat - im Gegensatz zu den modernen Browsern (FF, Chrome, Safari) - nicht erkennen. Aber was soll es. Der IE9 scheint übrigens auch kein Text-Shadow zu können. Dafür gibt es, auch einen Filter (siehe http://maddesigns.de/text-shadow-text-effekte-css3-adventskalender-tag-7-450.html ), den ich auch ausprobierte, der aber keine optisch akzeptable Ergebnisse liefert.

    Gruß
    Dieter

    Kommentar von Dieter — Montag, 21. März 2011 - 0:11 Uhr

  11. Hallo Dieter,

    Den Unterschied zwischen #EEEEEE und #DDDDDD kann ich beim IE9 in der Tat nicht erkennen.
    wie schon gesagt - ich fürchte dass die entsprechende Deklaration filter:…gradient von der im CSS folgenden Deklaration für shadow überschrieben wird. Hexwerte sollte ja wohl sogar der IE genauso interpretieren wie ein richtiger Browser.

    Kommentar von Fritz — Montag, 21. März 2011 - 0:25 Uhr

  12. Was ich nicht ganz verstehe:

    Ihr schimpft wie die Rohspatzen (zu Recht) auf die IEs, kümmert Euch aber gleichzeitig um so etwas Abartiges wie

    filter:progid:DXImageTransform.Microsoft.Shadow (color=#888888, Direction=135, Strength=5); /* IE6-7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow (color=#888888, Direction=135, Strength=5)";

    :-)

    Ich für meinen Teil löse das so:
    Einige gute(?) Browser können schon mit CSS3-ähnlichen Formatierungen umgehen. Die Vendor-Präfix-Varianten rechne ich einfach mal dazu.
    Damit erreichen wir FF, Opera, Safari, Chrome und einige Portable Devices.

    Um mehr muß ich mich nicht kümmern. Dieser ganze IE-typische Schotter, der ausschließlich bei Bills Browser funktioniert, interessiert mich nicht, weil er noch weiter von Standards entfernt ist, als die derzeitigen Sonderlösungen.

    Was der IE nicht kann, kann er eben nicht. Punkt. Dafür bin ich als Webautor nicht zuständig. Und eventuelle Ersatzlösungen gibts schon gar nicht.

    Das spart Nerven und läßt Zeit für Wichtigeres. Zumal wir es ja eh nicht ändern können.

    Und: Wenn eine Webseite nur dann "toll" ist, weil sie Verläufe und Schatten hat, ist sie offenbar inhaltlich arm dran. Das alles ist lediglich "nice to have".

    Ja, in Zeiten von Multimedia darf eine Seite schon mal anders aussehen, als 1994. Schon klar. Aber wir sollten auch nicht vergessen, dass wir nicht im Printbereich, sondern im Web sind. Und da gelten m.E. bei allem Hang zur Schönheit (die ja auch Ansichtssache ist) etwas andere Regeln.

    ( Kleinhirn an Herz: Blutdruck senken, ärgern einstellen, ein Bier bestellen. Für mich und Bill Gates)

    Kommentar von Peter — Montag, 21. März 2011 - 23:27 Uhr

  13. Hallo Peter,

    ja, du hast ja recht. Und ich habe doch auch - spät, aber hoffentlich nicht zu spät - die gleiche Konsequenz wie du gezogen: Soweit der IE (jegliche Version!) CSS3 versteht, gut. Wenn nicht soll's mir auch recht sein. Dass ich diese späte Erkenntnis jetzt mit Nach(t)arbeit bezahlen musste, führte zu diesem Frustartikel.

    Kommentar von Fritz — Montag, 21. März 2011 - 23:38 Uhr

  14. Moin Fritz,

    es ist vielleicht anzumerken, dass es bei den IEs ja nicht nur um "nice to have" wie CSS3 geht.

    Es gibt mehrere Formatierungen und Eigenschaften, die IE7 und IE8 mal wieder unterschiedlich interpretieren. Nach meiner Erfahrung ist der 8er aber schon ziemlich gut drauf. Dennoch kommt man meist um eine gesonderte CSS-Datei nicht umhin. Sorgenkind derzeit dürfte also vordergründig die Version 7 sein.

    Ich denke über die Version 6 brauchen wir nicht mehr reden.

    Einfache Layouts, wie bei meinem neuen Outfit, lassen sich zwar noch fast problemlos bedienen, aber dieses Projekt wird wohl das letzte gewesens ein, bei dem ich mich noch um den 6er gekümmert habe. Es sei denn, man greift auf ältere Layouts zurück, wo man sich die Arbeit eh schon gemacht hatte.

    Zum 9er kann ich noch gar nichts sagen. Ich tue mich schwer, dem ja immer noch gut laufenden XP Ade zu sagen.

    Kommentar von Peter — Dienstag, 22. März 2011 - 9:48 Uhr

  15. Hallo Peter,

    … der 8er schon ziemlich gut drauf
    Und ich dachte, das gilt umso mehr für den hochgelobten 9er.
    Umso größer mein Ärger, als ich das erste Mal einen Blick auf meine Site via IE 9 warf.
    Gut, es mag ja sein, dass er mit "normalem" CSS inzwischen auch umgehen kann. Stichwort Box-Modell. Aber eben nicht mit Hacks, die bisher nötig waren, wenn der Kunde mit seinem Büro-IE x seine Seite auch so sehen wollte wie zuhause mit dem Firefox.
    Nicht umsonst hat M$ auch dem IE 9 wieder den unsäglichen Kompatibiltätsmodus verpasst. Für die Millionen von Sites, die irgend wann einmal "optimiert für Internet Explorer" wurden.

    Kommentar von Fritz — Dienstag, 22. März 2011 - 13:02 Uhr

  16. Hallo Fritz,

    nur kurz noch zur Info: Deine Vermutung war richtig! Der Filter für Shadow (Schatten) überschreibt den Filter für Gradient (Farbverlauf).

    Kommentiere ich den Filter für Shadow aus, kommt es zu dem Darstellungsfehler, dass der Farbverlauf nicht die abgerundeten Ecken beachtet.

    Gruß
    Dieter

    Kommentar von Dieter — Mittwoch, 23. März 2011 - 0:49 Uhr

  17. Der Filter für Shadow (Schatten) überschreibt den Filter für Gradient (Farbverlauf).

    Hallo Dieter,

    danke für die Info.

    Das heißt, du kannst im IE (alle Versionen) nur entweder Shadow oder Gradient "hineinhacken".
    Und es bestätigt meine heutige Haltung: IE-CSS-Hacks sind Murks!

    Kommentar von Fritz — Mittwoch, 23. März 2011 - 13:00 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE