Degradados en Internet Explorer 9

111

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

css  background  internet-explorer-9  gradient 
— Oledor
fuente
Aunque he seleccionado una respuesta, esto solo es relevante en este momento. Si esto cambia, ¿alguien puede actualizar el hilo? Muy apreciado.
— Sniffer
Totalmente. Sin embargo, dudo que IE 9 implemente gradientes ahora, ya que está en versión beta.
— Paul D. Waite
5
IE9 no admite gradientes, pero IE10 sí.
— Captura el 22 de
4
IE es solo un navegador horrible en conjunto, no admite bloques en línea, los valores de posición se rompen sin razón, sin soporte de gradiente, lento como el infierno ... Empecemos todos a advertir a los usuarios que deben dejar de usar IE en lugar de desperdiciar nuestro tiempo soportando un navegador por debajo del estándar. Personalmente, he estado impidiendo por completo que los usuarios de IE vean cualquiera de mis páginas durante años (diríjalos para que obtengan un navegador real) y nunca he perdido una venta. Investigue un poco y verá que IE representa <5% de todo el tráfico de Internet y <1% de las ventas. ¿Por qué lo apoyamos?
12
Dan, me interesaría saber de dónde vienen tus números, no puedo encontrar una sola fuente que indique que IE es <5% del tráfico.
— Jamie Taylor

Respuestas:

44

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

— Gaurav
fuente
2
Según css3please.com , IE10 parece ser compatible con gradientes CSS, lo cual es una buena noticia ...
— Sniffer
css3please.com me ayudó a encontrar una solución al mío. Gracias
— oloroso
57

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.

— Kevin Arthur
fuente
10
No consideraría IE10 como un navegador importante todavía.
— David Murdoch
3
@DavidMurdoch eso es técnicamente cierto, pero no tiene sentido no agregar la extensión propietaria a su CSS, ya que sabemos cuál será. Después de todo, IE10 está destinado a convertirse en un navegador importante.
— thepeer
4
@Robotsushi aunque no responde a la pregunta para IE9 (la respuesta seleccionada sí lo hace, que probablemente sea la razón por la que se eligió), esta pregunta está en la primera página de los resultados de Google para "gradientes css de Internet Explorer", por lo que no hay Cualquier daño en tener algo útil aquí ahora que IE10 está casi listo para Windows 7.
— Kevin Arthur
Las últimas versiones de Firefox y Opera son compatibles con el estándar W3C. (
— Probé
2
Dado que esta es la respuesta más votada para la pregunta, que aborda IE9, debe agregar el filtro: al final para que incluya compatibilidad con IE9.
— Joel Coehoorn
46

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

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

— neave
fuente
Solución elegante. FYI: Acabo de confirmar que SVG no se descarga para los navegadores compatibles linear-gradient.
— Jonathan Cross
Me pregunto si hay una manera de almacenar en caché estos archivos svg una vez que se crean.
— Mike Kormendy
Una pregunta más sólida sería averiguar cuál es el rendimiento tanto en el tiempo como en la carga del servidor para solicitar un archivo en caché en lugar de generar un flujo de archivos cada vez.
— Mike Kormendy
1
PHP nunca debería tener conocimientos o ayuda en el diseño de su interfaz de usuario. Mantenga las necesidades del cliente en el cliente.
— Alex White
11

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;
}
— Blowsie
fuente
Como usuario MENOS, estaba buscando una forma de hacer que los degradados también funcionaran en IE9. Encontré un artículo de blog que detalla cómo generar el SVG: blog.philipbrown.id.au/2012/09/…
— James Long
6

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

— mollydotcom
fuente
4

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

— Spudley
fuente
Gracias Spudley. Estoy usando CSS3Pie en IE6 a 8, ¡pero esperaba dejar de usarlo en IE9! Tengo una hoja de estilo separada para cada IE con mis estilos CSS3Pie en IE8. Siempre que los degradados sean lo único que falte en el CSS3 que uso actualmente, agregaré otra hoja de estilo para IE9 sin usar CSS3Pie si puedo salirme con la mía.
— Sniffer
Ni siquiera vi esta publicación, mi mal. Simplemente escribió una respuesta y votó para eliminarla con la misma información. Nota: tenga cuidado con los problemas conocidos: css3pie.com/documentation/known-issues
— NateDSaint
2

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

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:

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

— Paul D. Waite
fuente
1
Eso me sorprende, ya que Opera suele estar a la vanguardia en la implementación de los estándares. Gracias por la respuesta Paul.
— Sniffer
1
Sin embargo, no creo que los degradados se hayan convertido en un estándar todavía. Según tengo entendido el proceso, las nuevas funciones de CSS tienden a implementarse en un navegador y, finalmente, a especificarse en un estándar. Creo que el equipo de WebKit primero implementó gradientes en CSS (a menos que cuentes a Microsoft y sus filtercosas, que en mi libro no califican como CSS). Firefox ahora los ha seguido, pero no parece haber nada en una especificación de borrador de CSS del W3C todavía: consulte google.co.uk/…
— Paul D. Waite
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.