Farbverläufe in Internet Explorer 9

111

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?

Schnüffler
quelle
Obwohl ich eine Antwort ausgewählt habe, ist dies nur zu diesem Zeitpunkt relevant. Wenn sich dies ändert, kann jemand den Thread aktualisieren? Sehr geschätzt.
Sniffer
Total. Ich bezweifle, dass IE 9 jetzt Farbverläufe implementieren wird, da es sich in der Beta befindet.
Paul D. Waite
5
IE9 unterstützt keine Farbverläufe, IE10 jedoch.
Catch22
4
IE ist nur ein schrecklicher Browser, unterstützt keine Inline-Blöcke, Positionswerte brechen ohne Grund, keine Gradientenunterstützung, langsam wie die Hölle ... Lassen Sie uns alle Benutzer warnen, dass sie den IE nicht mehr verwenden müssen, anstatt unseren zu verschwenden Zeit, die einen Browser unterstützt, der nicht dem Standard entspricht. Persönlich habe ich IE-Benutzer seit Jahren daran gehindert, eine meiner Seiten anzuzeigen (weisen Sie sie an, einen echten Browser zu erhalten), und ich habe nie einen Verkauf verloren. Wenn Sie nachforschen, werden Sie feststellen, dass der IE <5% des gesamten Internetverkehrs und <1% des Umsatzes ausmacht. Warum unterstützen wir es?
12
Dan, ich würde mich interessieren, woher deine Nummern kommen. Ich kann keine einzige Quelle finden, die besagt, dass der IE <5% des Datenverkehrs ausmacht.
Jamie Taylor

Antworten:

44

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

Gaurav
quelle
2
Laut css3please.com scheint IE10 CSS-Verläufe zu unterstützen, was eine gute Nachricht ist ...
Sniffer
css3please.com hat mir geholfen, eine Lösung für meine zu finden. Dank
redolent
57

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.

Kevin Arthur
quelle
10
Ich würde IE10 noch nicht als großen Browser betrachten.
David Murdoch
3
@DavidMurdoch, das ist technisch gesehen wahr, aber es macht keinen Sinn, die proprietäre Erweiterung nicht zu Ihrem CSS hinzuzufügen, da wir wissen, was es sein wird. Immerhin ist IE10 dazu bestimmt, ein wichtiger Browser zu werden.
Thepeer
4
@Robotsushi Obwohl die Frage für IE9 nicht beantwortet wird (die ausgewählte Antwort ist wahrscheinlich der Grund, warum sie ausgewählt wurde), befindet sich diese Frage auf der ersten Seite der Google-Ergebnisse für "Internet Explorer CSS-Farbverläufe" Es schadet, hier etwas Nützliches zu haben, da IE10 fast für Windows 7 bereit ist.
Kevin Arthur
Die neuesten Versionen von Firefox und Opera unterstützen den W3C-Standard. (Ich habe auf Firefox 19 und Opera 12.14 unter Windows 7 getestet)
JayVee
2
Da dies die am besten gewählte Antwort auf die Frage ist, die sich mit IE9 befasst, sollte der Filter: am Ende hinzugefügt werden, damit er IE9-Unterstützung enthält.
Joel Coehoorn
46

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*/ 
goksel
quelle
37

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.

Neave
quelle
Elegante Lösung. Zu Ihrer Information: Ich habe gerade bestätigt, dass SVG nicht für Browser heruntergeladen wird, die dies unterstützen linear-gradient.
Jonathan Cross
Ich frage mich, ob es eine Möglichkeit gibt, diese SVG-Dateien zwischenzuspeichern, sobald sie erstellt wurden.
Mike Kormendy
Eine robustere Frage wäre, herauszufinden, wie hoch die Leistung sowohl für die Zeit als auch für die Serverlast beim Anfordern einer zwischengespeicherten Datei ist, anstatt jedes Mal einen Dateistream zu generieren.
Mike Kormendy
1
PHP sollte niemals Kenntnisse oder Hilfe in Ihrem UI-Design haben. Behalten Sie die Client-Anforderungen auf dem Client.
Alex White
11

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;
}
Blowsie
quelle
Als WENIGER Benutzer suchte ich nach einer Möglichkeit, die Farbverläufe auch in IE9 zum Laufen zu bringen. Ich fand einen Blog-Artikel, der ausführlich beschreibt, wie die SVG generiert wird: blog.philipbrown.id.au/2012/09/…
James Long
6

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 :)

Mollydotcom
quelle
4

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).

Spudley
quelle
Danke Spudley. Ich verwende CSS3Pie auf IE6 bis 8, aber ich hatte gehofft, es nicht auf IE9 zu verwenden! Ich habe für jeden IE ein separates Stylesheet mit meinen CSS3Pie-Styles im IE8. Solange in der CSS3, die ich derzeit verwende, nur Farbverläufe fehlen, werde ich ein weiteres Stylesheet für IE9 hinzufügen, ohne CSS3Pie zu verwenden, wenn ich damit durchkommen kann.
Sniffer
Ich habe diesen Beitrag nicht einmal gesehen, mein schlechtes. Ich habe gerade eine Antwort geschrieben und dafür gestimmt, sie mit denselben Informationen zu löschen. Hinweis: Seien Sie vorsichtig bei den bekannten Problemen: css3pie.com/documentation/known-issues
NateDSaint
2

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

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:

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

Paul D. Waite
quelle
1
Das überrascht mich, da Opera normalerweise bei der Umsetzung der Standards an vorderster Front steht. Danke für die Antwort Paul.
Sniffer
1
Ich glaube nicht, dass Farbverläufe es bisher zu einem Standard gemacht haben. Nach meinem Verständnis werden neue CSS-Funktionen in der Regel in einem Browser implementiert und schließlich in einem Standard festgelegt. Ich glaube, das WebKit-Team hat zuerst Farbverläufe in CSS implementiert (es sei denn, Sie zählen Microsoft und deren filterInhalte, die in meinem Buch nicht wirklich als CSS gelten). Firefox ist ihnen jetzt gefolgt, aber es scheint noch nichts in einer W3C CSS-Entwurfsspezifikation zu geben: siehe google.co.uk/…
Paul D. Waite
2

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).

Webinista
quelle