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?
css
background
internet-explorer-9
gradient
Schnüffler
quelle
quelle
Antworten:
Sie müssen weiterhin die proprietären Filter ab IE9 Beta 1 verwenden.
quelle
Sieht so aus, als wäre ich etwas spät zur Party, aber hier ist ein Beispiel für einige der Top-Browser:
Quelle: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
Hinweis: Alle diese Browser unterstützen auch rgb / rgba anstelle der hexadezimalen Notation.
quelle
Die beste browserübergreifende Lösung ist
quelle
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.
Laden Sie es einfach auf Ihren Server hoch und rufen Sie die URL folgendermaßen auf:
Dies kann in Verbindung mit Ihren CSS3-Verläufen wie folgt verwendet werden:
Wenn Sie unter IE9 zielen müssen, können Sie weiterhin die alte proprietäre Filtermethode verwenden:
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.
quelle
linear-gradient
.Der Code, den ich für alle Browserverläufe verwende:
Sie müssen eine Höhe angeben oder
zoom: 1
aufhasLayout
das Element anwenden , damit dies im IE funktioniert.Aktualisieren:
Hier ist eine LESS Mixin (CSS) -Version für alle WENIGER Benutzer da draußen:
quelle
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 :)
quelle
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).
quelle
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.
quelle
filter
Inhalte, 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/…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).
quelle
Verwenden Sie einen Verlaufsgenerator - und alles wird perfekt sein;) http://www.colorzilla.com/gradient-editor/
quelle