Gradients dans Internet Explorer 9
Est-ce que quelqu'un connaît le préfixe du fournisseur pour les gradients dans IE9 ou sommes-nous toujours supposés utiliser encore 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, quelqu'un connaît-il également le préfixe du vendeur 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 principaux 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-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*/
IE9 manque actuellement de prise en charge du dégradé CSS3. Cependant, voici une solution de contournement intéressante utilisant PHP pour renvoyer un dégradé SVG (vertical linéaire) à 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>
Il suffit de le télécharger sur votre serveur et d'appeler l'URL comme suit:
gradient.php?from=f00&to=00f
Ceci 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 avez besoin de cibler en dessous de IE9, vous pouvez toujours utiliser l'ancienne méthode de filtrage propriétaire:
.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 d'autres arrêts sur le dégradé, ou le rendre plus sophistiqué (dégradés radiaux, transparence, etc.), mais cela convient parfaitement aux dégradés linéaires simples (verticaux) .
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 devrez spécifier une hauteur ou zoom: 1 appliquer hasLayout à l'élément pour que cela fonctionne dans IE.
Mise à jour:
Voici une version LESS Mixin (CSS) pour tous vos 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 va bientôt commencer à disposer de versions avec 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 terminé CSS 2.1, vous le savez tous, non? Nous avons l'intention d'être finis très bientôt. CSS3 est modularisé avec précision afin que nous puissions passer des modules à une implémentation plus rapidement plutôt qu’une spécification complète.
Chaque entreprise de navigation utilise une méthodologie de cycle de logiciel, des tests, etc. différents. Donc, le processus prend du temps.
Je suis sûr que beaucoup, beaucoup de lecteurs savent bien que si vous utilisez quelque chose en CSS3, vous faites ce que l'on appelle "l'amélioration progressive" - les navigateurs avec le plus grand soutien obtiennent la meilleure expérience. L’autre partie concerne la "dégradation progressive", c’est-à-dire que l’expérience sera agréable mais ne sera peut-être pas la meilleure ou la plus attrayante tant que ce navigateur n’aura pas implémenté le module, ou des parties du module pertinentes par rapport à ce que vous voulez faire.
Cela crée une situation assez étrange et malheureusement, les développeurs front-end sont extrêmement frustrés par: un timing incohérent pour les implémentations. C’est donc un véritable défi des deux côtés - blâmez-vous les entreprises de navigation, le W3C, ou pire encore - de vous-même (Dieu sait que nous ne pouvons pas tout savoir!) Faites ceux d’entre nous qui travaillons pour une entreprise de navigation et le groupe W3C les membres nous blâmer? Toi?
Bien sûr que non. C'est toujours un jeu d'équilibre et, pour le moment, notre industrie n'a pas encore déterminé où se trouve ce point d'équilibre. C'est la joie de travailler dans la technologie évolutive :)
Je comprends que IE9 ne supportera toujours pas les dégradés CSS. Ce qui est dommage, car cela supporte des tonnes de nouvelles choses géniales.
Vous voudrez peut-être examiner CSS3Pie pour obtenir toutes les versions de IE afin de prendre en charge diverses fonctionnalités de CSS3 (y compris les dégradés, mais également les propriétés border-radius et box-shadow). ) avec le minimum de tracas.
Je pense que CSS3Pie fonctionne avec IE9 (je l’ai essayé sur les versions préliminaires, mais pas encore sur la version bêta actuelle).
Pas sûr de IE9, mais Opera ne semble pas encore prendre en charge le dégradé:
Aucune occurrence de "dégradé" sur cette page.
Robert Nyman a écrit un excellent article sur l’utilisation des dégradés CSS dans tous les navigateurs qui ne sont pas Opera bien que:
Je ne sais pas si cela peut être étendu pour utiliser une image comme solution de secours.
A partir de la version 11, Opera supporte les dégradés linéaires avec le préfixe du fournisseur.). Chris Mills a écrit un article pour Dev.Opera à ce sujet: http://dev.opera.com/articles/vue/css3-linear-gradients /
Des dégradés radiaux sont toujours en cours (à la fois dans les spécifications et dans Opera).
Utilisez un générateur de gradient - et tout sera parfait;) http://www.colorzilla.com/gradient-editor/