Farbverläufe in Internet Explorer 9

Kennt jemand das Herstellerpräfix für Farbverläufe in IE9 oder sollen wir immer noch ihre proprietären Filter verwenden?

Was ich für die anderen Browser habe, ist:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

Kennt jemand als Bonus auch das Herstellerpräfix von Opera?

Sie müssen weiterhin die proprietären Filter ab IE9 Beta 1 verwenden.

Sieht so aus, als wäre ich etwas spät zur Party, aber hier ist ein Beispiel für einige der Top-Browser:

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

Quelle: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Hinweis: Alle diese Browser unterstützen auch rgb / rgba anstelle der hexadezimalen Notation.

Die beste browserübergreifende Lösung ist

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/ 

IE9 fehlt derzeit die CSS3-Gradientenunterstützung. Hier ist jedoch eine gute Problemumgehungslösung, bei der PHP verwendet wird, um stattdessen einen SVG-Gradienten (vertikal linear) zurückzugeben, sodass wir unser Design in unseren Stylesheets behalten können.

<?php

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

Laden Sie es einfach auf Ihren Server hoch und rufen Sie die URL folgendermaßen auf:

gradient.php?from=f00&to=00f

Dies kann in Verbindung mit Ihren CSS3-Verläufen wie folgt verwendet werden:

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

Wenn Sie unter IE9 zielen müssen, können Sie weiterhin die alte proprietäre Filtermethode verwenden:

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

Natürlich können Sie den PHP-Code ändern, um dem Verlauf mehr Stopps hinzuzufügen, oder ihn komplexer gestalten (radiale Farbverläufe, Transparenz usw.), aber dies ist ideal für einfache (vertikale) lineare Farbverläufe.

Der Code, den ich für alle Browserverläufe verwende:

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

Sie müssen eine Höhe angeben oder zoom: 1auf hasLayoutdas Element anwenden , damit dies im IE funktioniert.

Aktualisieren:

Hier ist eine LESS Mixin (CSS) -Version für alle WENIGER Benutzer da draußen:

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

Opera wird in Kürze Builds mit Gradientenunterstützung sowie anderen CSS-Funktionen zur Verfügung stellen.

Die W3C CSS-Arbeitsgruppe ist noch nicht einmal mit CSS 2.1 fertig, weißt du das, oder? Wir wollen sehr bald fertig sein. CSS3 ist präzise modularisiert, sodass wir Module schneller als eine gesamte Spezifikation zur Implementierung bringen können.

Jedes Browser-Unternehmen verwendet eine andere Software-Zyklus-Methode, Tests usw. Der Prozess braucht also Zeit.

Ich bin sicher, dass viele, viele Leser wissen, dass Sie, wenn Sie etwas in CSS3 verwenden, das tun, was als "progressive Verbesserung" bezeichnet wird - die Browser mit der größten Unterstützung erhalten die beste Erfahrung. Der andere Teil davon ist "anmutige Verschlechterung", was bedeutet, dass die Erfahrung angenehm ist, aber vielleicht nicht die beste oder attraktivste, bis dieser Browser das Modul oder Teile des Moduls implementiert hat, die für das, was Sie tun möchten, relevant sind.

Dies führt zu einer merkwürdigen Situation, in der Front-End-Entwickler leider äußerst frustriert sind: inkonsistentes Timing bei Implementierungen. Es ist also eine echte Herausforderung für beide Seiten - beschuldigen Sie die Browser-Unternehmen, das W3C oder noch schlimmer - Sie selbst (Gott weiß, wir können nicht alles wissen!) Machen Sie diejenigen von uns, die für ein Browser-Unternehmen und eine W3C-Gruppe arbeiten Mitglieder beschuldigen uns? Du?

Natürlich nicht. Es ist immer ein Spiel des Gleichgewichts, und bis jetzt haben wir als Branche noch nicht herausgefunden, wo dieser Gleichgewichtspunkt wirklich liegt. Das ist die Freude an der Arbeit in der Evolutionstechnologie :)

Ich verstehe, dass IE9 immer noch keine CSS-Verläufe unterstützt. Was schade ist, weil es viele andere großartige neue Sachen unterstützt.

Vielleicht möchten Sie sich mit CSS3Pie befassen , um alle Versionen des IE dazu zu bringen, verschiedene CSS3-Funktionen (einschließlich Farbverläufe, aber auch Rahmenradius und Kastenschatten) mit minimalem Aufwand zu unterstützen.

Ich glaube, CSS3Pie funktioniert mit IE9 (ich habe es in den Vorabversionen versucht, aber noch nicht in der aktuellen Beta).

Ich bin mir über IE9 nicht sicher, aber Opera scheint noch keine Unterstützung für Farbverläufe zu haben:

• http://www.opera.com/docs/specs/presto26/#css

Kein Auftreten von "Farbverlauf" auf dieser Seite.

Es gibt einen großartigen Artikel von Robert Nyman darüber, wie CSS-Verläufe in allen Browsern funktionieren, die nicht Opera sind:

• http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

Ich bin mir nicht sicher, ob dies erweitert werden kann, um ein Bild als Fallback zu verwenden.

Ab Version 11 unterstützt Opera lineare Verläufe mit dem Herstellerpräfix -o. Chris Mills hat einen Dev.Opera-Artikel darüber geschrieben: http://dev.opera.com/articles/view/css3-linear-gradients/

Radiale Farbverläufe sind noch in Arbeit (sowohl in der Spezifikation als auch innerhalb von Opera).

Verwenden Sie einen Verlaufsgenerator - und alles wird perfekt sein;) http://www.colorzilla.com/gradient-editor/