css - websites - Gradientes en Internet Explorer 9

web design with html css javascript and jquery set pdf

Question

¿Alguien sabe el prefijo del proveedor para degradados 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 una ventaja, ¿alguien sabe el prefijo del vendedor de Opera también?

Answer 1

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 aún están en proceso (tanto en la especificación como en Opera).

Answer 2

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

Answer 3

El código que uso para todos los degradados 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 un zoom: 1 para aplicar hasLayout al elemento para que esto funcione en IE.

Actualizar:

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

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

Entiendo que IE9 aún no admitirá degradados de CSS. Lo cual es una pena, porque está soportando muchas otras cosas nuevas y geniales.

Es posible que desee ver 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 beta actual).

Answer 5

IE9 actualmente carece de soporte de degradado 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>

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

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

Esto se puede usar junto con los degradados de 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 segmentar por debajo de IE9, aún puede usar el antiguo método de ''filtrado'' 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 6

La mejor solución entre 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*/ 

Answer 7

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

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

No hay aparición de "gradiente" en esa página.

Hay un gran artículo de Robert Nyman sobre cómo obtener degradados CSS trabajando 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 si eso se puede extender para usar una imagen como alternativa.

Answer 8

Opera pronto comenzará a tener versiones 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, ¿saben eso, verdad? 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 usas algo en CSS3, estás 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 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 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 9

Parece que llegué un poco tarde a la fiesta, pero aquí hay un ejemplo para algunos de los mejores 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.

Answer 10

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