Dégradés dans Internet Explorer 9


111

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?


Même si j'ai sélectionné une réponse, cela n'est pertinent que pour le moment. Si cela change, quelqu'un peut-il mettre à jour le fil de discussion? Très appréciée.
Sniffer

Totalement. Je doute que IE 9 implémente maintenant des gradients, car il est en version bêta.
Paul D.Waite

5
IE9 ne prend pas en charge les dégradés, mais IE10 le fera.
Catch22

4
IE est juste un horrible navigateur dans son ensemble, ne prend pas en charge les blocs en ligne, les valeurs de position cassent sans raison, pas de support de gradient, lent comme l'enfer ... Commençons tous à avertir les utilisateurs qu'ils doivent cesser d'utiliser IE au lieu de gaspiller notre temps supportant un navigateur sous standard. Personnellement, j'empêche carrément les utilisateurs d'IE de voir l'une de mes pages depuis des années maintenant (demandez-leur d'obtenir un vrai navigateur) et je n'ai jamais perdu une vente. Faites des recherches et vous verrez que IE représente <5% de tout le trafic Internet et <1% des ventes. Pourquoi le soutenons-nous?

12
Dan, je serais intéressé de savoir d'où viennent vos chiffres, je ne trouve pas une seule source indiquant que IE représente <5% du trafic.
Jamie Taylor

Réponses:


44

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


2
Selon css3please.com , IE10 semble compatible avec les dégradés CSS, ce qui est une bonne nouvelle ...
Sniffer

css3please.com m'a aidé à trouver une solution à la mienne. Merci
redolent

57

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.


10
Je ne considérerais pas encore IE10 comme un navigateur majeur.
David Murdoch

3
@DavidMurdoch c'est techniquement vrai, mais cela n'a pas de sens de ne pas ajouter l'exension propriétaire à votre CSS, car nous savons ce que ce sera. Après tout, IE10 est destiné à devenir un navigateur majeur.
thepeer

4
@Robotsushi bien qu'elle ne réponde pas à la question pour IE9 (la réponse sélectionnée le fait, ce qui est probablement la raison pour laquelle elle a été choisie), cette question se trouve sur la première page des résultats Google pour "Internet Explorer css gradients", donc il n'y en a pas tout mal à avoir quelque chose d'utile ici maintenant que IE10 est presque prêt pour Windows 7.
Kevin Arthur

Les dernières versions de Firefox et Opera prennent en charge la norme W3C. (J'ai testé sur Firefox 19 et Opera 12.14 sur Windows 7)
JayVee

2
Comme il s'agit de la réponse la plus votée à la question, qui concerne IE9, il convient d'ajouter le filtre: à la fin pour qu'il inclue le support IE9.
Joel Coehoorn

46

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

37

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


Solution élégante. FYI: Je viens de confirmer que SVG n'est pas téléchargé pour les navigateurs prenant en charge linear-gradient.
Jonathan Cross

Je me demande s'il existe un moyen de mettre en cache ces fichiers svg une fois qu'ils sont créés.
Mike Kormendy

Une question plus robuste serait de savoir quelles sont les performances à la fois sur le temps et la charge du serveur pour demander un fichier mis en cache par rapport à la génération d'un flux de fichiers à chaque fois.
Mike Kormendy

1
PHP ne devrait jamais avoir de connaissances ou d'aide dans la conception de votre interface utilisateur. Gardez les besoins du client sur le client.
Alex White

11

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

En tant qu'utilisateur MOINS, je cherchais également un moyen de faire fonctionner les dégradés dans IE9. J'ai trouvé un article de blog détaillant comment générer le SVG: blog.philipbrown.id.au/2012/09/…
James Long

6

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


4

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


Merci Spudley. J'utilise CSS3Pie sur IE6 à 8, mais j'espérais ne plus l'utiliser sur IE9! J'ai une feuille de style distincte pour chaque IE avec mes styles CSS3Pie dans IE8. Tant que les dégradés sont la seule chose qui manque dans le CSS3 que j'utilise actuellement, j'ajouterai une autre feuille de style pour IE9 sans utiliser CSS3Pie si je peux m'en tirer.
Sniffer

Je n'ai même pas vu ce post, mon mauvais. Juste écrit une réponse et voté pour la supprimer avec les mêmes informations. Remarque: méfiez-vous des problèmes connus: css3pie.com/documentation/known-issues
NateDSaint

2

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

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:

Je ne sais pas si cela peut être étendu pour utiliser une image comme solution de secours.


1
Cela me surprend, car Opera est généralement à la pointe de la mise en œuvre des normes. Merci pour la réponse Paul.
Sniffer

1
Je ne pense pas que les dégradés en aient encore fait une norme. Si je comprends bien le processus, les nouvelles fonctionnalités CSS ont tendance à être implémentées dans un navigateur, puis éventuellement spécifiées dans une norme. Je crois que l'équipe WebKit a d'abord implémenté des dégradés en CSS (à moins que vous ne comptiez Microsoft et leurs filtertrucs, qui ne sont pas vraiment qualifiés de CSS dans mon livre). Firefox les a maintenant suivis, mais il ne semble pas encore y avoir quoi que ce soit dans un brouillon de spécification CSS du W3C: voir google.co.uk/...
Paul D. Waite


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.