Dégradés dans Internet Explorer 9

Est-ce que quelqu'un connaît le préfixe du fournisseur pour les dégradés dans IE9 ou sommes-nous toujours censés utiliser leurs filtres de propriété?

Ce que j'ai pour les autres navigateurs, c'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, est-ce que quelqu'un connaît également le préfixe de fournisseur d'Opera?

Vous devez toujours utiliser leurs filtres propriétaires à partir de IE9 beta 1.

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

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

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

La meilleure solution multi-navigateurs 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*/ 

IE9 ne prend actuellement pas en charge le dégradé CSS3. Cependant, voici une solution de contournement intéressante utilisant PHP pour renvoyer un dégradé SVG (linéaire vertical) à la place, ce qui nous permet de conserver notre conception 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>

Téléchargez-le simplement sur votre serveur et appelez l'URL comme suit:

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

Cela peut être utilisé en conjonction avec vos dégradés 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 devez cibler sous 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 c'est parfait pour ces dégradés linéaires simples (verticaux).

Le code que j'utilise pour tous les dégradés 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 devrez spécifier une hauteur ou zoom: 1appliquer hasLayoutà l'élément pour que cela fonctionne dans IE.

Mettre à jour:

Voici une version MOINS de Mixin (CSS) pour tous les utilisateurs MOINS:

.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 commencera bientôt à avoir des versions disponibles avec la prise en charge du dégradé, ainsi que d'autres fonctionnalités CSS.

Le groupe de travail CSS du W3C n'a même pas fini avec CSS 2.1, vous le savez tous, non? Nous comptons être finis très bientôt. CSS3 est modularisé avec précision afin que nous puissions déplacer les modules vers l'implémentation plus rapidement plutôt qu'une spécification entière.

Chaque société de navigation utilise une méthodologie de cycle logiciel, des tests, etc. différents. Le processus prend donc du temps.

Je suis sûr que beaucoup de lecteurs savent très bien que si vous utilisez quelque chose en CSS3, vous faites ce que l'on appelle une «amélioration progressive» - les navigateurs avec le plus de support obtiennent la meilleure expérience. L'autre partie de cela est la «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 ce 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 qui, malheureusement, les développeurs frontaux sont extrêmement frustrés par: un timing incohérent sur les implémentations. C'est donc un vrai défi de chaque côté - blâmez-vous les sociétés de navigateurs, le W3C ou pire encore - vous-même (Dieu sait que nous ne pouvons pas tout savoir!) Faites ceux d'entre nous qui travaillent pour une société de navigateurs et un groupe W3C les membres se blâment? Tu?

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

Je comprends qu'IE9 ne supporte toujours pas les dégradés CSS. Ce qui est dommage, car il prend en charge de nombreuses autres nouveautés.

Vous voudrez peut-être examiner CSS3Pie pour que toutes les versions d'IE prennent 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).

Je ne sais pas pour IE9, mais Opera ne semble pas encore prendre en charge le dégradé:

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

Aucune occurrence de «dégradé» sur cette page.

Il y a un excellent article de Robert Nyman sur le fonctionnement des dégradés CSS dans tous les navigateurs qui ne sont pas Opera:

• 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 solution de secours.

Depuis la version 11, Opera prend en charge les dégradés linéaires avec le préfixe -o- vendor. Chris Mills a écrit un article sur 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).

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