Gradients in Internet Explorer 9

StackOverflow https://stackoverflow.com/questions/3934693

Frage

Hat jemand den Hersteller Präfix für Gradienten innerhalb IE9 wissen oder sollen wir noch nach wie vor ihre proprietry Filter verwenden?

Was habe ich für den anderen Browsern 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 */

Als Bonus Wer weiß, Opera Anbieter Präfix als auch?

War es hilfreich?

Lösung

Sie müssen noch ihre proprietären Filter wie von IE9 Beta 1 verwenden.

Andere Tipps

Sieht aus wie ich bin ein wenig spät, um die Partei, 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 von hexadezimale Notation

Die beste Cross-Browser-Lösung 

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 CSS3 Gradient Unterstützung. Aber hier ist eine schöne Umgehungslösung mit PHP ein SVG (vertikal linear) Gradienten statt zurückzukehren, die uns unser Design in unserem Stylesheets halten 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>

Einfach laden Sie sie auf Ihren Server und rufen Sie die URL wie folgt: 

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

Dies kann in Verbindung mit Ihrem CSS3 Gradienten 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 auf Ziel unter IE9 benötigen, können Sie immer noch die alten proprietären ‚Filter‘ verwenden Methode: 

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

Natürlich können Sie den PHP-Code ändern mehr stoppt auf dem Gradienten hinzuzufügen, oder machen es anspruchsvollere (radiale Gradienten, Transparenz usw.), aber dies ist für diejenigen einfach (vertikal) linearen Gradienten.

Der Code, den ich Verwendung für alle Browser-Gradienten: 

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 oder zoom: 1 angeben hasLayout das Element für diese Arbeit in IE anzuwenden.

Update:

Hier ist ein WENIGER Mixin (CSS) Version für alle Sie LESS User 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 beginnen, baut mit Gradienten-Unterstützung zur Verfügung zu haben, sowie anderen CSS-Funktionen.

Die W3C CSS-Arbeitsgruppe nicht einmal mit CSS 2.1 fertig ist, weiß, y'all, dass, nicht wahr? Wir beabsichtigen, sehr bald abgeschlossen sein. CSS3 ist modularisiert genau so wir Module bis hin zur Implementierung schneller eher als eine ganze spec bewegen können.

Jeder Browser Unternehmen verwendet eine andere Software-Zyklus Methodik, Testen, und so weiter. So nimmt die Prozesszeit.

Ich bin sicher, dass viele, auch viele Leser wissen, dass, wenn Sie etwas in CSS3 verwenden, Sie tun, was „Progressive Enhancement“ genannt - der Browser mit der meisten Unterstützung, um die beste Leistung erhalten. Der andere Teil davon ist „Graceful Degradation“ wird die Erfahrung Sinn angenehm sein, aber vielleicht nicht die beste oder attraktivste bis das Browser, um das Modul oder Teile des Moduls durchgeführt hat, die relevant sind, was Sie tun wollen.

Das schafft eine recht merkwürdige Situation, dass leider Front-End-Entwickler extrem frustriert durch: inkonsistente Timing auf Implementierungen. So ist es auf beiden Seiten eine echte Herausforderung ist - tun Sie die Browser-Unternehmen, das W3C die Schuld, oder schlimmer noch - selbst (Gott weiß, wir nicht wissen können sie alle!) Diejenigen von uns tun, die für einen Browser Unternehmen und W3C-Gruppe arbeiten Mitglieder beschuldigen uns selbst? Du?

Natürlich nicht. Es ist immer ein Spiel der Balance, und als die noch, wir haben nicht wie eine Industrie herausgefunden, wo dieser Punkt der Balance wirklich ist. Das ist die Freude in der Evolutions Technologie arbeiten:)

Ich verstehe, dass IE9 noch nicht CSS Gradienten unterstützen. Was schade ist, denn es gibt jede Menge andere große neue Sachen zu unterstützen.

Sie können schauen wollen CSS3Pie als eine Möglichkeit, alle Versionen von IE zu bekommen verschiedenen CSS3-Funktionen (einschließlich Steigungen zu unterstützen, aber auch border-radius und box-shadow) mit einem Minimum an Aufwand.

Ich glaube, CSS3Pie mit IE9 funktioniert (ich habe es auf den Pre-Release-Versionen ausprobiert, aber noch nicht auf der aktuellen Beta-Version).

Nicht sicher IE9, aber Opera scheint es noch keine Steigung Unterstützung haben:

Kein Auftreten von „Gradient“ auf dieser Seite.

Es gibt einen großen Artikel von Robert Nyman auf CSS-Gradienten immer in allen Browsern, die nicht Opera aber:

Nicht sicher, ob das verlängert werden kann, ein Bild als Ausweich zu verwenden.

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

Radial-Gradienten sind noch in Arbeit (sowohl in der Spezifikation und in Opera).

Verwenden Sie ein Gradient Generator - und alles wird perfekt;) http://www.colorzilla.com/gradient-editor/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top