Degradados en Internet Explorer 9

Question

¿Alguien conoce el prefijo del proveedor para gradientes dentro de IE9 o se supone que todavía debemos usar sus filtros de propiedad?

Lo que tengo para los otros navegadores es:

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 beneficio adicional, ¿alguien sabe prefijo de proveedor de Opera así?

Answer 1

que todavía tienen que utilizar sus propios filtros como de IE9 beta 1.

Answer 2

No

seguro acerca de IE9, pero Opera no parecen tener ningún apoyo gradiente aún:

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

Sin ocurrencia de “gradiente” en esa página.

Hay un gran artículo de Robert Nyman en conseguir gradientes CSS que trabajan en todos los navegadores que no son Opera sin embargo:

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

No sé si esto se puede extender a utilizar una imagen como una reserva.

Answer 3

entiendo que IE9 todavía no será el apoyo a los gradientes CSS. Lo cual es una pena, porque está soportando muchas otras cosas nuevas y geniales.

Es posible que desee ver en CSS3Pie como una forma de conseguir que todas las versiones de IE admitan varias características de CSS3 (incluidos degradados, pero también radio de borde y sombra de cuadro) con el mínimo de alboroto.

Creo que CSS3Pie funciona con IE9 (lo probé en las versiones preliminares, pero todavía no en la versión beta actual).

Answer 4

Opera pronto comenzará a tener versiones disponibles con soporte de degradado, así como otras características de CSS.

El W3C CSS Working Group ni siquiera ha terminado con CSS 2.1, ¿saben? Tenemos la intención de terminarlo muy pronto. CSS3 se modulariza con precisión para que podamos pasar los módulos a la implementación más rápido en lugar de una especificación completa.

Cada empresa de navegador utiliza una metodología de ciclo de software diferente, pruebas, etc. Entonces el proceso toma tiempo.

Estoy seguro de que muchos lectores saben que si utiliza algo en CSS3, está haciendo lo que se denomina "mejora progresiva": los navegadores con más soporte obtienen la mejor experiencia. La otra parte es la "degradación elegante", lo que significa que la experiencia será agradable, pero tal vez no la mejor ni la más atractiva hasta que ese navegador haya implementado el módulo, o partes del módulo que sean relevantes para lo que desea hacer.

Esto crea una situación bastante extraña que desafortunadamente los desarrolladores front-end se sienten extremadamente frustrados por: sincronización incoherente en las implementaciones. Entonces, es un verdadero desafío para cualquiera de los lados: ¿culpan a las compañías de navegadores, al W3C o, peor aún, a ustedes mismos (¡Dios sabe que no podemos saberlo todo!) ¿Quiénes trabajamos para una empresa de navegadores y un grupo W3C? miembros nos culpan a nosotros mismos? ¿Tú?

Por supuesto que no. Siempre es un juego de equilibrio, y hasta ahora, como industria, no hemos descubierto dónde está realmente ese punto de equilibrio. Esa es la alegría de trabajar en tecnología evolutiva :)

Answer 5

A partir de la versión 11, Opera admite gradientes lineales con el prefijo -o- vendor. Chris Mills escribió un artículo de Dev.Opera al respecto: http://dev.opera.com/articles/view/css3-linear-gradients/

Los degradados radiales todavía están en proceso (tanto en la especificación como en Opera).

Answer 6

La mejor solución cross-browser es

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

Answer 7

IE9 actualmente carece de apoyo gradiente CSS3. Sin embargo, aquí hay una buena solución alternativa que utiliza PHP para devolver un degradado SVG (lineal vertical), lo que nos permite mantener nuestro diseño en nuestras hojas 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 con subir a su servidor y llamar a la URL de esta manera:

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

Esto puede ser usado en conjunción con sus gradientes CSS3 como esto:

.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 necesita para segmentar por debajo de IE9, aún puede usar el antiguo método de 'filtro' patentado:

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

Por supuesto, puede modificar el código PHP para agregar más paradas en el degradado, o hacerlo más sofisticado (degradados radiales, transparencia, etc.), pero esto es ideal para esos gradientes lineales simples (verticales).

Answer 8

Parece que estoy un poco tarde a la fiesta, pero aquí es un ejemplo de algunos de los principales 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%); 

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

Nota: todos estos navegadores también apoyan rgb/rgba en lugar de la notación hexadecimal.

Answer 9

El código que utilizo para todos los gradientes del 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; 

Tendrá que especificar una altura o zoom: 1 aplicar hasLayout al elemento para que esto funcione en IE.

---

Actualización:

Aquí es una versión menos Mixin (CSS) para todo lo que los usuarios menos por ahí:

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

Answer 10

Utilice un generador de gradiente - y todo será perfecto;) http://www.colorzilla.com/gradient-editor/