Dégradés dans Internet Explorer 9

Question

Quelqu'un connaît-il le préfixe du fournisseur pour les dégradés dans IE9 ou sommes-nous toujours supposés utiliser encore leurs filtres propriétaires?

Ce que j'ai pour les autres navigateurs est:

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 */ 

En prime ne sait le préfixe fournisseur d'Opera ainsi?

Answer 1

Vous devez toujours utiliser leurs filtres exclusifs comme la bêta IE9 1.

Answer 2

ne suis pas sûr IE9, mais Opera ne semble pas avoir de support gradient encore:

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

Aucune occurrence de « gradient » sur cette page.

Il y a un article de Robert Nyman sur l'obtention de gradients CSS de travail dans tous les navigateurs qui ne sont pas Opera si:

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

Je ne sais pas si cela peut être étendu pour utiliser une image comme un repli.

Answer 3

Je comprends que IE9 encore ne sera pas soutenir des gradients CSS. Ce qui est dommage, car cela supporte beaucoup d'autres nouveautés. Vous voudrez peut-être regarder dans CSS3Pie comme un moyen d'obtenir toutes les versions de IE pour prendre en charge diverses fonctionnalités CSS3 (y compris les dégradés, mais aussi border-radius et box-shadow) avec le minimum de tracas.

Je crois que CSS3Pie fonctionne avec IE9 (je l'ai essayé sur les versions préliminaires, mais pas encore sur la version bêta actuelle).

Answer 4

Opera commencera bientôt à avoir des versions disponibles avec le support de dégradé, ainsi que d'autres fonctionnalités CSS.

Le groupe de travail CSS W3C n'est même pas fini avec CSS 2.1, vous le savez, non? Nous avons l'intention d'être finis très bientôt. CSS3 est modularisé avec précision afin que nous puissions déplacer les modules jusqu'à la mise en œuvre plus rapidement plutôt qu'une spécification entière.

Chaque société de navigation utilise une méthodologie différente de cycle de logiciel, de test, et ainsi de suite. Donc, le processus prend du temps. Je suis sûr que beaucoup, beaucoup de lecteurs savent que si vous utilisez quelque chose dans CSS3, vous faites ce qu'on appelle "l'amélioration progressive" - ​​les navigateurs avec le plus de soutien obtiennent la meilleure expérience. L'autre partie de cela est "dégradation gracieuse", ce qui signifie que l'expérience sera agréable mais peut-être pas la meilleure ou la plus attrayante jusqu'à ce que le navigateur ait implémenté le module, ou des parties du module qui correspondent à ce que vous voulez faire.

Cela crée une situation assez étrange que malheureusement les développeurs frontaux sont extrêmement frustrés par: un timing incohérent sur les implémentations. C'est donc un vrai challenge de part et d'autre - blâmez-vous les sociétés de navigateurs, le W3C, ou pire encore - vous-même (nous savons que nous ne pouvons pas tout savoir!) Ceux d'entre nous qui travaillent pour un navigateur et un groupe W3C Les membres se reprochent-ils? Toi?

Bien sûr que non. C'est toujours un jeu d'équilibre, et pour l'instant, nous n'avons pas encore compris en quoi consiste ce point d'équilibre. C'est la joie de travailler dans la technologie évolutive :)

Answer 5

Depuis la version 11, Opera prend en charge les dégradés linéaires avec le préfixe -o- fournisseur. Chris Mills a écrit un article Dev.Opera à ce sujet: http://dev.opera.com/articles/view/css3-linear-gradients/

Les dégradés radiaux sont toujours en cours (à la fois dans la spécification et dans Opera).

Answer 6

La meilleure solution multi-navigateur est

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*/ 

Answer 7

IE9 manque actuellement de support de gradient de CSS3. Cependant, voici une bonne solution de contournement utilisant PHP pour renvoyer un dégradé SVG (linéaire vertical) à la place, ce qui nous permet de conserver notre design dans nos feuilles de style.

<?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> 

Il suffit de télécharger sur votre serveur et appeler l'URL comme ceci:

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

Ceci peut être utilisé en conjonction avec vos gradients CSS3 comme ceci:

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

Si vous avez besoin Pour cibler ci-dessous IE9, vous pouvez toujours utiliser l'ancienne méthode propriétaire de «filtre»:

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

Bien sûr, vous pouvez modifier le code PHP pour ajouter plus d'arrêts sur le dégradé, ou le rendre plus sophistiqué (dégradés radiaux, transparence, etc.) mais cela est idéal pour les dégradés linéaires simples (verticaux).

Answer 8

On dirait que je suis un peu en retard à la fête, mais voici un exemple pour certains des navigateurs principaux:

/* 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%); 

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

Note: tous ces navigateurs prennent en charge également rgb/rgba à la place de la notation hexadécimale.

Answer 9

Le code que j'utilise pour tous les gradients de navigateur:

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; 

Vous devez spécifier une hauteur ou zoom: 1 à appliquer hasLayout à l'élément pour que cela fonctionne dans IE.

---

Mise à jour:

Voici une version pour vous tous les utilisateurs moins là MOINS mixin (CSS):

.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; 
} 

Answer 10

Utilisez un générateur de dégradé - et tout sera parfait; http://www.colorzilla.com/gradient-editor/