IE9 mit CSS3 border-radius und linear-gradient Problemen

Nach Einführung des IE9 ist es nicht nur Fritz Weisshart aufgefallen, dass der IE9 zwar die propritären CSS-Eigenschaft „filter“ zum Erstellen von Verläufen, wie im IE6-8 zwar weiterhin unterstützt, aber diese nicht so funktionieren wie erhofft.

Runde Ecken über border-radius unterstützt der Internet Explorer 9 nun ohne jeglichen Vendor-Präfix.

border-radius: 20px;

Bisherige Internet Explorer konnten wie im CSS3 Adventskalender 2010 Tag 3 beschrieben per filter bzw. -ms-filter auch einfache Verläufe darstellen. Leider unterstützt der IE9 keine Verläufe über CSS3 linear-gradient, sondern nur über Einbindung einer SVG-Grafik. Deshalb müssen ab jetzt SVG-Grafiken erstellt werden, damit im Zusammenspiel mit border-radius auch der IE9 das Design darstellt wie vorgestellt.

Michael Barrett hat in seinem Blog abouthalf.com das Problem ausführlich beschrieben.

Um das Beispiel des CSS3 Adventskalender 2010 Tag 3 aufzugreifen, sind kleine zusätzliche Änderungen notwendig.

SVG-Sprite Grafik erstellen

Im Schritt 1 erstellen wir eine SVG-Grafik mit den Farbverläufen:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ⏎
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> ⏎
<svg width="100" height="600" version="1.1" 
xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient id="linear-top" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" style="stop-color: #C8482C; stop-opacity: 1;"/>
   <stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/>
  </linearGradient>
  <linearGradient id="linear-right" x1="100%" y1="0%" x2="0%" y2="0%">
   <stop offset="0%" style="stop-color: #C8482C; stop-opacity: 1;"/>
   <stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/>
  </linearGradient>
  <linearGradient id="linear-bottom" x1="0%" y1="100%" x2="0%" y2="0%">
   <stop offset="0%" style="stop-color: #C8482C; stop-opacity: 1;"/>
   <stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/>
  </linearGradient>
  <linearGradient id="linear-left" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" style="stop-color: #C8482C; stop-opacity: 1;"/>
   <stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/>
  </linearGradient>
  <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" style="stop-color: #E0EDF3; stop-opacity: 1;"/>
   <stop offset="100%" style="stop-color: #30393D; stop-opacity: 1;"/>
  </linearGradient>
  <linearGradient id="searchForm" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" style="stop-color: #E0EDF3; stop-opacity: 1;"/>
   <stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/>
  </linearGradient>
 </defs>
 <rect x="0" y="0" width="100" height="100" ⏎
 style="fill: url("#linear-top") rgb(0, 0, 0);"/>
 <rect x="0" y="100" width="100" height="100" ⏎
 style="fill: url("#linear-right") rgb(0, 0, 0);"/>
 <rect x="0" y="200" width="100" height="100" ⏎
 style="fill: url("#linear-bottom") rgb(0, 0, 0);"/>
 <rect x="0" y="300" width="100" height="100" ⏎
 style="fill: url("#linear-left") rgb(0, 0, 0);"/>
 <rect x="0" y="500" width="100" height="100" ⏎
 style="fill: url("#gradient") rgb(0, 0, 0);"/>
 <rect x="0" y="400" width="100" height="100" ⏎
 style="fill: url("#searchForm") rgb(0, 0, 0);"/> 
</svg>

erstellte SVG-Grafik im Sprite-Verfahren

CSS anpassen

Im 2. Schritt werden über Conditional Comments für den IE9 spezielle Eigenschaften zugewiesen.

<!--[if  ie 9]>
<style type="text/css" media="screen">
.searchForm,
.searchButton,
.linear-top,
.linear-right,
.linear-bottom,
.linear-left,
.gradient {
  filter: none;
  background-image: url(gradients.svg);
  background-size: 100% 600%;
  zoom: 1;
}
</style>
<![endif]-->

Für den IE9 wird die SVG-Grafik als Hintergrund zugewiesen (background-image: url(gradients.svg);) und die Hintergrundgröße auf 600% Höhe (background-size: 100% 600%;) ausgedehnt. Das wird durch die generierte Sprite-Grafik nötig (Michael Barett beschreibt die Vorgehensweise genauer). Zudem wird die Filter-Eigenschaft deaktiviert.

Für die einzelnen Elemente, die die SVG zugewiesen bekommen, ist es noch notwendig die background-position zuzuweisen um den richtigen Teil des Hintergrundes anzuzeigen.

Demo

CSS3 linear-gradient (Verlauf) IE9 Demo

Es bleibt zu hoffen, dass Microsoft dem Internet Explorer, so wie Opera doch noch den aktuellen W3C-Syntax implementiert.

18 thoughts on “IE9 mit CSS3 border-radius und linear-gradient Problemen”

René sagt:

19. März 2011 um 16:08 Uhr

Warum wundert es mich nicht mehr im Geringsten, dass Microsoft es einfach nicht auf die Reihe bekommt, den Website-Entwicklern ein funktional einfach konzipiertes Darstellungsprogramm an die Hand zu geben.

Und wieder Sonderverwurstelung für den IE – Nicht nur, dass man Conditionals für jede Version zusammenhacken muss, nein, nun muss man auch noch SVGs zusammenklimpern… hab so langsam keine Lust mehr.
Chrishe sagt:

19. März 2011 um 16:27 Uhr

Kann mich meinen Vorredner nur anschließen. Ahhhrrr. -.- Immer diese nervigen MS Extrawürste. Das Coding könnte so viel einfacher sein. :D
Fritz sagt:

20. März 2011 um 15:14 Uhr

Das dürfte dann doch mit jeder Grafik als background funktionieren, und nicht zwingend eine SVG-Grafik erfordern.
Womit wir dann wieder im Jahr 2000 angekommen wären. Herzlich willkommen M$
passsy sagt:

21. März 2011 um 17:31 Uhr

wie früher beim Opera halt. damals hat sich aber kaum einer dafür interessiert. gab kaum anleitungen. ich wette in 2 Monaten ist das internet voll mit SVG-generatoren.

Die jungs haben es jetzt aber auch geschafft auf -o-linea-gradient umzustellen. warum schafft das das große Microsoft nicht?
jmartsch sagt:

23. März 2011 um 11:15 Uhr

Wie wäre es mit einem IE Boykott? Wenn genügend mitmachen, dann könnte Microsoft bald einpacken, oder wäre genötigt, dem IE endlich mal alle modernen Features zu spendieren. HTML-5 Forms werden ja so gut wie gar nicht unterstützt :(

Ich bin sowieso dafür, dass es EINE Rendering Engine für ALLE Browser geben sollte.
Diese sollte unabhängig vom Rest des Browsers verwaltet werden können.
So könnte dann enweder den Rendering Engine DEV Channel abonnieren (ähnlich wie bei Chrome) und bekommt immer die neuesten Features, oder benutzt den Stable Channel, hat aber auf allen Plattformen das gleiche Erlebnis. Die Updates sollten automatisch verteilt werden, so dass man immer die aktuelle Version installiert hat.
Das würde unser Leben so viel leichter machen.
Die User hätten ein besseres Erlebnis und die Webentwickler weniger Stress beim entwickeln.
xor sagt:

10. April 2011 um 17:25 Uhr

Oh Mann, jmartsch, wie alt bist Du?

IE Boykott? Solche Aufrufe gibt es seit fast 20 Jahren!

Und wenn es nur EINE Rendering Engine gäbe, hätten wir heute noch kein Javascript und keine Cookies und kein XHR und kein SVG und kein HTML5.

Außerdem wäre dann jeder Mensch Webentwickler, so wie auch jeder Autofahrer ist, oder?
Tom sagt:

12. April 2011 um 20:16 Uhr

Also mit der Variante geht’s …

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#66CCFF‘, endColorstr=’#1CB7FF‘,GradientType=0 );
Sven Wolfermann sagt:

12. April 2011 um 21:50 Uhr

Ja, aber nicht mit runden Ecken, da ragt der Verlauf über die runden Ecken hinaus.
André sagt:

14. April 2011 um 15:18 Uhr

Doch, geht auch mit runden Ecken. Um die Box mit dem Verlauf ein DIV-Element herumlegen, diesem Element die runden Ecken nochmal geben sowie „overflow: hidden“ setzen.

Trotzdem danke – ich wäre gar nicht drauf gekommen, dass ich überhaupt eine Lösung brauche, da ich bei meinem aktuellen Projekt gar nicht gesehen habe, dass der Verlauf aus den Ecken herausguckt (sehr kleiner Radius, sehr schwacher Verlauf). Aber die Zoom-Funktion brachte es nun doch ans Licht.

André
Pingback: Revision 22: IE10, Live.js und Favicons | Working Draft
Sven Wolfermann sagt:

19. April 2011 um 10:28 Uhr

Das macht aber kein Sinn, da wir dann wieder extra Markup haben, dann lieber SVG, tut ja nicht weg ;)
Jonas sagt:

28. September 2011 um 16:35 Uhr

Was muss ich beim erstellen des SVG beachten? Irgendetwas verhindert, dass das SVG bei
.gradient {
filter: none;
background-image: url(gradients.svg);
background-size: 100% 600%;
zoom: 1;
}

richtig geladen wird. Ich kann die Datei auf dem Webserver direkt öffnen und es wird korrekt angezeigt. Wenn ich die Datei von hier nehme: http://maddesigns.de/wp-content/uploads/2011/03/gradients.svg geht es auch. Nur eben nicht, von meniem Webserver… warum das?
Sven Wolfermann sagt:

30. September 2011 um 12:19 Uhr

hm, schwer zu sagen… hast du den richtigen Doctype?
Pingback: IE9 CSS3 Support – CSS3 Adventskalender Tag 15 | maddesigns
Pingback: Verlauf und runde Ecken beim IE - XHTMLforum
Gunnar Bittersmann sagt:

19. Januar 2012 um 20:32 Uhr

Danke für den Tip. Hat auch fast auf Anhieb funktioniert.

Fast, denn im Code auf der Seite hast du
style=“fill: url(„#linear-top“) rgb(0, 0, 0);“
zu stehen, was kein valides SVG ist. Im SVG selbst hast du escapet:
style=“fill: url("#linear-top") rgb(0, 0, 0);“
Einfache Anführungszeichen (entweder als äußere oder als innere) hätten es auch getan. Bei url() sind aber gar keine erforderlich:
style=“fill: url(#linear-top) rgb(0, 0, 0);“
wäre meine bevorzugte Variante.

PS: „on Samstag 19, 2011“? Irgendwas scheint mit deinem Theme nicht ganz zu stimmen.
Sven Wolfermann sagt:

19. Januar 2012 um 21:17 Uhr

habe den SVG-Code angepasst. Danke für den Hinweis!
Corner sagt:

27. März 2013 um 13:18 Uhr

Hi,

ich habe ein Problem unzwar wird der Verlauf zwar richtig angezeigt jedoch „füllt“ er nicht den gesamten Bereich aus. Das heisst wenn das Template zu breit ist dann habe ich an der rechten seite eine schmalen weißen Rand, der nciht mit dem Verlauf gefüllt wird.. Genau das selbe Problem habe ich wenn sich die Höhe des Contents ändert. Dann habe ich je nach dem unten oder oben einen weißen Balken.

Habe schon versucht die Größe anzupassen, jedoch ohne Erfolg.

Kann mir da vielleicht jemand helfen?

Vielen Dank im voraus

mfg Corner

Kommentare sind geschlossen.