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