Gradientes no Internet Explorer 9

111

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?

css  background  internet-explorer-9  gradient 
— Farejador
fonte
Embora eu tenha selecionado uma resposta - isso só é relevante neste momento. Se isso mudar, alguém pode atualizar o tópico? Muito apreciado.
— Sniffer de
Totalmente. Duvido que o IE 9 implemente gradientes agora, já que está em beta.
— Paul D. Waite,
5
O IE9 não oferece suporte a gradientes, mas o IE10 sim.
— Catch22
4
O IE é apenas um navegador horrível, não oferece suporte a blocos embutidos, valores de posição quebram sem motivo, sem suporte de gradiente, lento como o inferno ... Vamos todos começar a alertar os usuários de que eles precisam parar de usar o IE em vez de desperdiçar nosso tempo de suporte a um navegador de padrão inferior. Pessoalmente, há anos tenho impedido os usuários do IE de visualizar qualquer uma das minhas páginas (direcione-os para obter um navegador de verdade) e nunca perdi uma venda. Faça alguma pesquisa e você verá que o IE é responsável por <5% de todo o tráfego da Internet e <1% das vendas. Por que estamos apoiando isso?
12
Dan, estou interessado em saber de onde vêm seus números. Não consigo encontrar uma única fonte afirmando que o IE é <5% do tráfego.
— Jamie Taylor

Respostas:

44

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

— Gaurav
fonte
2
De acordo com css3please.com , o IE10 parece compatível com gradientes CSS, o que é uma boa notícia ...
— Sniffer de
css3please.com me ajudou a encontrar uma solução para o meu. Obrigado
— cheirando a
57

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.

— Kevin arthur
fonte
10
Eu não consideraria o IE10 um navegador importante ainda.
— David Murdoch
3
@DavidMurdoch isso é tecnicamente verdade, mas não faz sentido não adicionar a extensão proprietária ao seu CSS, já que sabemos o que será. Afinal, o IE10 está destinado a se tornar um navegador importante.
— thepeer
4
@Robotsushi embora não responda à pergunta para o IE9 (a resposta selecionada responde, provavelmente por isso foi escolhida), essa pergunta está na primeira página de resultados do Google para "gradientes css do internet explorer", então não há qualquer dano em ter algo útil aqui, agora que o IE10 está quase pronto para o Windows 7.
— Kevin Arthur
As versões mais recentes do Firefox e Opera suportam o padrão W3C. (Eu testei no Firefox 19 e Opera 12.14 no Windows 7)
— JayVee
2
Como esta é a resposta mais votada para a pergunta, que aborda o IE9, ele deve adicionar o filtro: ao final para que inclua suporte ao IE9.
— Joel Coehoorn
46

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*/
— goksel
fonte
37

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

— neave
fonte
Solução elegante. Para sua informação: acabei de confirmar que o download de SVG não é compatível com navegadores linear-gradient.
— Jonathan Cross
Gostaria de saber se há uma maneira de armazenar em cache esses arquivos SVG depois de criados.
— Mike Kormendy
Uma questão mais robusta seria descobrir qual é o desempenho no tempo e na carga do servidor para solicitar um arquivo em cache em vez de gerar um fluxo de arquivo todas as vezes.
— Mike Kormendy,
1
PHP nunca deve ter conhecimento ou ajuda no design de sua IU. Mantenha as necessidades do cliente no cliente.
— Alex White
11

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;
}
— Blowsie
fonte
Como um usuário MENOS, eu estava procurando uma maneira de fazer os gradientes funcionarem no IE9 também. Encontrei um artigo no blog detalhando como gerar o SVG: blog.philipbrown.id.au/2012/09/…
— James Long
6

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

— mollydotcom
fonte
4

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

— Spudley
fonte
Obrigado, Spudley. Estou usando CSS3Pie no IE6 a 8, mas esperava não usá-lo no IE9! Eu tenho uma folha de estilo separada para cada IE com meus estilos CSS3Pie no IE8. Contanto que gradientes seja a única coisa que falta no CSS3 que uso atualmente, adicionarei outra folha de estilo para o IE9 sem usar o CSS3Pie, se puder.
— Sniffer de
Eu nem vi esse post, que pena. Apenas escrevi uma resposta e votei para excluí-la com a mesma informação. Nota: Desconfie dos problemas conhecidos: css3pie.com/documentation/known-issues
— NateDSaint
2

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

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:

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

— Paul D. Waite
fonte
1
Isso me surpreende, já que o Opera geralmente está na vanguarda da implementação dos padrões. Obrigado pela resposta Paul.
— Sniffer de
1
Não acho que os gradientes tenham se tornado um padrão ainda. Pelo que entendi do processo, novos recursos CSS tendem a ser implementados em um navegador e, em seguida, eventualmente especificados em um padrão. Acredito que a equipe do WebKit primeiro implementou gradientes em CSS (a menos que você conte a Microsoft e suas filtercoisas, que realmente não se qualificam como CSS em meu livro). O Firefox já os seguiu, mas não parece haver nada em uma especificação de rascunho de CSS do W3C ainda: consulte google.co.uk/…
— Paul D. Waite
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.