Internet Explorer 9, runde Ecken und Gradients
Internet Explorer 9 kann runde Ecken. Und weil er filter bzw. -ms-filter unterstützt, kann er auch Hintergrundverläufe. Beides zusammen geht aber nicht, denn der per filter erzeugte Gradient verdeckt die runden Ecken. Die Lösung: Eine SVG-Hintergrundgrafik.
Wir haben ein beliebiges Element, zum Beispiel
<a class="button" href="#">Zum Onlineshop
und dazu folgendes CSS:
.button {
display: block;
border-radius: 5px;
background-image: linear-gradient(top, #49c281 0%, #00cb6c 3%, #00bf59 4%, #00712a 97%, #003c1a 100%);
}
Der Übersicht zuliebe habe ich in diesem und dem folgenden CSS alle proprietären Erweiterungen wie -moz-border-radius und -moz-linear-gradient weggelassen.
In einem vernünftigen Browser sieht das dann so aus:
Für Internet Explorer 6 und 7 bietet sich folgende Lösung an:
.ie67 .button {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr='#00cb6c', EndColorStr='#00722a');
border-bottom: 1px solid #003c1a;
zoom: 1;
}
Ohne hasLayout greift der Filter nicht, deshalb das zoom:1. Runde Ecken gibt es hier nicht, ist aber in der Regel auch kein Verlust.
Für Internet Explorer 8 muss das nur minimal modifiziert werden:
.ie8 .button {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00cb6c', endColorstr='#00722a')";
border-bottom: 1px solid #003c1a;
zoom: 1;
}
Bleibt noch Internet Explorer 9. Ihm schieben wir ein SVG als Hintergrundbild unter. Das wird die runden Ecken, anders als der Filter, nicht verdecken. Setzt man es vor das andere background-image, werden Browser, die linear-gradient unterstützen, das SVG ignorieren. Fertig sieht das dann so aus:
.button {
display: block;
border-radius: 5px;
background-image: url(../i/button-bg.svg);
background-image: linear-gradient(top, #49c281 0%, #00cb6c 3%, #00bf59 4%, #00712a 97%, #003c1a 100%);
}
Doch woher das SVG nehmen und nicht stehlen? Per Hand editieren – nervig. Extra einen SVG-Editor installieren und den Umgang damit erlernen – dauert zu lange. Aber Microsoft hat einen Generator für SVG-Gradients gebaut, mit dem Ihr das SVG online erzeugen könnt. Müsst Ihr im Internet Explorer 9 oder neuer aufrufen.
Mit Microsofts SVG-Gradient-Generator lassen sich SVGs mit vertretbarem Aufwand generieren.
Der Generator spuckt das SVG in zwei Varianten aus:
- Als SVG Source, die Ihr in einen Texteditor kopiert und mit der Dateiendung “svg” abspeichert.
- Als data URL, die Ihr direkt in das CSS einfügen könnt. Dadurch bläht Ihr das CSS auf, erspart dem Internet Explorer aber einen zusätzlichen Request.
Welche Lösung man wählt, muss jeder für sich selbst entscheiden. Ich denke, man sollte Nutzern gescheiter Browser das aufgeblähte CSS ersparen und dem IE9 den zusätzlichen Request zumuten. Auch im Hinblick darauf, dass immer mehr mobile Clients über Netzwerke mit hoher Latenz (UMTS) auf Websites zugreifen, halte ich das für die bessere Lösung. So oder so – ein Gradient im Hintergrund und border-radius müssen sich auch beim IE9 nicht ausschließen.