Gradientes no Internet Explorer 9

Alguém sabe o prefixo do fornecedor para gradientes no IE9 ou ainda devemos continuar usando seus filtros proprietários?

O que eu 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 de fornecedor do Opera?

Você ainda precisa usar seus filtros proprietários no 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

Nota: todos esses navegadores também suportam rgb / rgba no lugar da notação hexadecimal.

A melhor solução entre 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 possui suporte ao gradiente CSS3. No entanto, aqui está uma boa solução alternativa usando PHP para retornar um gradiente SVG (vertical linear), 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 ' '; ?>          

Basta fazer o upload para o seu servidor e ligar para o URL da seguinte forma:

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

Isso pode ser usado em conjunto com seus gradientes CSS3 assim:

 .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 você precisar segmentar abaixo do IE9, ainda poderá 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 pontos no gradiente ou torná-lo mais sofisticado (gradientes radiais, transparência, etc.), mas isso é ótimo para os 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: 1 para aplicar o hasLayout ao elemento para que isso funcione no IE.


Atualizar:

Aqui está uma versão do LESS Mixin (CSS) para todos os usuários MENOS que estão 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 versões disponíveis com suporte a gradiente, bem como outros resources CSS.

O W3C CSS Working Group ainda não terminou com o CSS 2.1, vocês sabem disso, certo? Nós pretendemos terminar em breve. O CSS3 é modularizado precisamente para que possamos mover os módulos até a implementação mais rapidamente do que uma especificação inteira.

Cada empresa de navegadores usa uma metodologia de ciclo de software diferente, teste e assim por diante. Então o processo leva tempo.

Tenho certeza que muitos, muitos leitores bem sabem que se você estiver usando qualquer coisa em CSS3, você está fazendo o que é chamado de “aprimoramento progressivo” – os navegadores com maior suporte obtêm a melhor experiência. A outra parte disso é “degradação graciosa”, o que significa que a experiência será agradável, mas talvez não seja a melhor ou mais atraente até que o navegador tenha implementado o módulo, ou partes do módulo que são relevantes para o que você deseja fazer.

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

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

Eu entendo que o IE9 ainda não suportará gradientes de CSS. O que é uma pena, porque está suportando cargas de outras grandes novidades.

Você pode querer olhar para CSS3Pie como uma maneira de obter todas as versões do IE para suportar vários resources CSS3 (incluindo gradientes, mas também border-radius e box-shadow) com o mínimo de barulho.

Acredito que o CSS3Pie funciona com o IE9 (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 ainda não parece ter suporte a gradientes:

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

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

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

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

Gradientes radiais ainda estão em andamento (tanto na especificação quanto no Opera).

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