Gradientes no Internet Explorer 9

Alguém sabe o prefixo do fornecedor para gradientes no IE9 ou ainda devemos usar seus filtros de propriedade?

O que tenho para os outros navegadores é:

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

Como bônus, alguém conhece o prefixo do fornecedor do Opera também?

Você ainda precisa usar seus filtros proprietários a partir do IE9 beta 1.

Parece que estou um pouco atrasado para a festa, mas aqui está um exemplo para alguns dos principais navegadores:

/* 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%);

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

Observação: todos esses navegadores também oferecem suporte a rgb / rgba no lugar da notação hexadecimal.

A melhor solução para vários navegadores é

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

O IE9 atualmente não tem suporte para gradiente CSS3. No entanto, aqui está uma boa solução alternativa usando PHP para retornar um gradiente SVG (linear vertical), o que nos permite manter nosso design em nossas folhas de estilo.

<?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>

Basta fazer o upload para o seu servidor e chamar o URL assim:

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

Isso pode ser usado em conjunto com seus gradientes CSS3 como este:

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

Se precisar segmentar abaixo do IE9, você ainda pode usar o antigo método proprietário de 'filtro':

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

É claro que você pode alterar o código PHP para adicionar mais paradas no gradiente ou torná-lo mais sofisticado (gradientes radiais, transparência etc.), mas isso é ótimo para aqueles gradientes lineares simples (verticais).

O código que uso para todos os gradientes do navegador:

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;

Você precisará especificar uma altura ou zoom: 1aplicar hasLayoutao elemento para que funcione no IE.

Atualizar:

Aqui está uma versão MENOS do Mixin (CSS) para todos os MENOS usuários por aí:

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

O Opera em breve começará a ter compilações disponíveis com suporte a gradiente, bem como outros recursos CSS.

O W3C CSS Working Group nem terminou o CSS 2.1, vocês sabem disso, certo? Pretendemos terminar muito em breve. O CSS3 é modularizado com precisão para que possamos mover os módulos para a implementação mais rápido, em vez de uma especificação inteira.

Cada empresa de navegador usa uma metodologia de ciclo de software diferente, testes e assim por diante. Portanto, o processo leva tempo.

Tenho certeza de que muitos, muitos leitores sabem que se você estiver usando algo em CSS3, estará fazendo o que é chamado de "aprimoramento progressivo" - os navegadores com mais suporte obtêm a melhor experiência. A outra parte disso é a "degradação elegante", o que significa que a experiência será agradável, mas talvez não a melhor ou mais atraente até que o navegador tenha implementado o módulo ou partes do módulo que sejam relevantes para o que você deseja fazer.

Isso cria uma situação bastante estranha que, infelizmente, os desenvolvedores front-end ficam extremamente frustrados com: tempo inconsistente nas implementações. Portanto, é um verdadeiro desafio para ambos os lados - você culpa as empresas de navegadores, o W3C, ou pior ainda - você mesmo (Deus sabe que não podemos saber tudo!) Faça aqueles de nós que trabalham para uma empresa de navegadores e para o grupo W3C membros se culpam? Vocês?

Claro que não. É sempre um jogo de equilíbrio e, até o momento, não descobrimos, como indústria, onde esse ponto de equilíbrio realmente está. Essa é a alegria de trabalhar em tecnologia evolutiva :)

Eu entendo que o IE9 ainda não será compatível com gradientes CSS. O que é uma pena, porque está dando suporte a muitas outras coisas novas excelentes.

Você pode querer olhar para o CSS3Pie como uma forma de fazer com que todas as versões do IE suportem vários recursos do CSS3 (incluindo gradientes, mas também raio de borda e sombra de caixa) com o mínimo de confusão.

Eu acredito que o CSS3Pie funciona com o IE9 (eu tentei nas versões de pré-lançamento, mas ainda não no beta atual).

Não tenho certeza sobre o IE9, mas o Opera não parece ter suporte a gradientes ainda:

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

Nenhuma ocorrência de “gradiente” nessa página.

Há um ótimo artigo de Robert Nyman sobre como fazer com que gradientes CSS funcionem em todos os navegadores que não são o Opera:

• http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

Não tenho certeza se isso pode ser estendido para usar uma imagem como fallback.

A partir da versão 11, o Opera oferece suporte a gradientes lineares com o prefixo -o- vendor. Chris Mills escreveu um artigo Dev.Opera sobre isso: http://dev.opera.com/articles/view/css3-linear-gradients/

Gradientes radiais ainda estão em desenvolvimento (tanto nas especificações quanto no Opera).

Use um Gradient Generator - e tudo ficará perfeito;) http://www.colorzilla.com/gradient-editor/