Degradados en Internet Explorer 9

¿Alguien conoce el prefijo del proveedor para los gradientes dentro de IE9 o se supone que todavía estamos usando 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 conoce también el prefijo de proveedor de Opera?

Aún necesita usar sus filtros patentados a partir de IE9 beta 1.

Parece que llegué un poco tarde a la fiesta, pero aquí hay 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 admiten rgb / rgba en lugar de la notación hexadecimal.

La mejor solución para varios navegadores 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*/ 

IE9 actualmente carece de soporte de degradado CSS3. Sin embargo, aquí hay una buena solución alternativa que usa PHP para devolver un degradado SVG (lineal vertical) en su lugar, 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>

Simplemente cárguelo en su servidor y llame a la URL así:

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

Esto se puede usar junto con sus 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);
}

Si necesita apuntar por debajo de IE9, aún puede usar el antiguo método de 'filtro' propietario:

.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 genial para esos degradados lineales simples (verticales).

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;

Deberá especificar una altura o zoom: 1aplicarla hasLayoutal elemento para que esto funcione en IE.

Actualizar:

Aquí hay una versión MENOS Mixin (CSS) para todos los usuarios MENOS:

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

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

El Grupo de Trabajo de CSS del W3C ni siquiera ha terminado con CSS 2.1, todos lo saben, ¿verdad? Tenemos la intención de terminar muy pronto. CSS3 está modularizado con precisión para que podamos mover los módulos a la implementación más rápido en lugar de una especificación completa.

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

Estoy seguro de que muchos, muchos lectores saben muy bien que si está usando algo en CSS3, está haciendo lo que se llama "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 sea la mejor o la más atractiva hasta que el 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 de front-end se sienten extremadamente frustrados por: sincronización inconsistente en las implementaciones. Por lo tanto, es un verdadero desafío para ambos lados: ¿culpa a las compañías de navegadores, al W3C o, peor aún, a usted mismo (¡Dios sabe que no podemos saberlo todo!). los miembros se culpan a nosotros mismos? ¿Tú?

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

Entiendo que IE9 aún no admitirá gradientes CSS. Lo cual es una lástima, porque admite muchas otras cosas nuevas y geniales.

Es posible que desee considerar CSS3Pie como una forma de hacer que todas las versiones de IE admitan varias funciones de CSS3 (incluidos los degradados, pero también el radio de borde y la sombra de cuadro) con el mínimo de esfuerzo.

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

No estoy seguro acerca de IE9, pero Opera no parece tener ningún soporte de gradiente todavía:

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

No aparece "gradiente" en esa página.

Sin embargo, hay un gran artículo de Robert Nyman sobre cómo hacer que los gradientes CSS funcionen en todos los navegadores que no son Opera:

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

No estoy seguro de si eso se puede extender para usar una imagen como respaldo.

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

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