Dégradés dans Internet Explorer 9

Question

Quelqu'un sait-il le préfixe du vendeur de gradients dans IE9 ou sommes-nous encore censés continuer d’utiliser leurs filtres numérotés ?

Ce que j’ai pour les autres navigateurs est :

En prime quelqu'un sait-il préfixe de vendeur de l’opéra ainsi ?

Answer 1

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

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

Note : tous ces navigateurs supportent également rgb/rgba en lieu et place de la notation hexadécimale.

Answer 2

Est la meilleure solution multi-navigateurs

Answer 3

Vous devez toujours utiliser leurs filtres exclusifs à partir de IE9 beta 1.

Answer 4

IE9 ne dispose pas actuellement d'CSS3 gradient de soutien. Cependant, voici une belle solution de rechange à l'aide de PHP, de retour d'un SVG (linéaire verticale) gradient de la place, ce qui nous permet de garder 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 à votre serveur et à l'appel de l'URL comme ceci:

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

Ceci peut être utilisé en conjonction avec votre 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 ci-dessous IE9, vous pouvez toujours utiliser l'ancien propriétaire 'filtre' méthode:

.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 plusieurs arrêts sur le gradient, ou de la rendre plus sophistiqués (les dégradés radiaux, la transparence, etc.) mais ce qui est excellent pour ceux simple (vertical) des dégradés linéaires.

Answer 5

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

Vous devrez spécifier une hauteur ou se à l’élément pour cela fonctionne dans Internet Explorer.

---

Mise à jour :

Voici une version de Mixin (CSS) moins pour tout ce que vous moins d’utilisateurs là-bas :