fondo de rgba con alternativa de filtro IE: ¡IE9 representa ambos!

Estoy intentando Hacer uso de fondo de un div transparente utilizando una mezcla de CSS3 rgba() y filter propiedad de Microsoft como esto:fondo de rgba con alternativa de filtro IE: ¡IE9 representa ambos!

div { 
    width: 200px; 
    height: 200px; 
    /* blue, 50% alpha */ 
    background: rgba(0,0,255,0.5); 
    /* red, 50% alpha */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000); 
}

Como era de esperar, los navegadores que soportan rgba() hará que el div como el azul, mientras que IE 6 8 lo convertirá en rojo.

IE9 aparentemente puede manejar ambos (anteriormente pensé que se había eliminado el soporte filter) y el resultado es div div. ¿Hay alguna forma de hacer que IE9 soporte cualquiera de estas propiedades pero no la otra? rgba() obviamente sería preferible.

N.B. Estoy usando IETester para ejecutar estas pruebas. Si la compilación correcta de IE9 no hace esto, por favor avíseme.

Fuente

2011-06-28 Liam Newmarch

Yo he llegado con una solución hacky que pensé que me gustaría compartir.

IE9 y superior admite el pseudo selector CSS :not(). Mediante el uso de un atributo que no existe en un elemento que podemos conseguir IE9 para deshabilitar es filter gradiente:

div { 
    width: 200px; 
    height: 200px; 

    /* For FF, Chome, Opera, IE9+ */ 
    background: rgba(0,0,255,0.5); 

    /* For IE6-9 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000); 
} 

div:not([dummy]) { 
    /* IE9 only */ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); 
}

Terminé usando esto porque mi div transparente sólo presenta una vez. También parecía un poco más ordenado mantener las cosas en CSS, en lugar de usar comentarios condicionales en el HTML.

Editar: En apoyo de otras respuestas, he encontrado this article desde el equipo de desarrollo de Microsoft alentar a los desarrolladores usar comentarios condicionales, no soluciones CSS como la mía.

Fuente

2011-06-29 11:41:07

justo lo que he estado buscando. ¡Gracias! – frequent

Eche un vistazo a la orientación del navegador/versión con comentarios condicionales. Querrá apuntar a versiones específicas de IE e implementar su estilo por versión.

http://www.positioniseverything.net/articles/cc-plus.html

Fuente

2011-06-28 14:45:23

Esto parece funcionar para mí (no se ha probado por completo en todas las versiones). Según las discusiones en el blog this, el selector de raíz solo está disponible en IE9 y, por lo tanto, se puede escribir el siguiente código para eliminar todas las configuraciones de filtro en IE9.

:root * 
{ 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important; 
}

Importante: es necesario asegurarse de que funciona en todos los lugares.

Fuente

2011-11-15 12:37:30 Anttu

De acuerdo con [Web Essentials] (http://vswebessentials.com/) nunca debe usar el selector universal, ya que tiene un gran impacto negativo en el rendimiento del rendimiento del navegador. Las buenas noticias son ': not ([dummy])' se pueden intercambiar por ': root *' – bbodenmiller

Si está utilizando HTML5 es posible que desee seguir el camino de la utilización de

<!doctype html> 
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="ie7 oldie"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="ie8 oldie"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> 
<html lang="en" class="gtie9 modern"> 
<!--<![endif]-->

y CSS en su uso algo como:

.ie9 .element {filter: none; }

Fuente

2011-12-07 12:11:58

El método más sencillo y fiable para el filtro : compatibilidad he encontrado utiliza el código genera http://www.colorzilla.com/gradient-editor/:

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]-->

Entonces agrega una clase de CSS gradient al elemento que lo necesita. Y eso es.

Aunque los comentarios condicionales aún son un poco hack, en mi opinión son menos que selectores universales o similares: no y no tienen los riesgos de rendimiento.

Recuerde que Microsoft eliminó los comentarios condicionales de IE10 y superior, pero casi nunca debería necesitarlos para esas versiones.

No confiaría en IETester tampoco; descargue una máquina virtual con IE9 apropiado en https://www.modern.ie/en-gb - es gratis; todo lo que necesita es tiempo y espacio en el disco (conserve la descarga original para que, cuando caduque, pueda reinstalar).

Fuente

2015-02-04 08:37:11

fondo de rgba con alternativa de filtro IE: ¡IE9 representa ambos!

Respuesta

Cuestiones relacionadas