Gradientes en Internet Explorer 9
https://stackoverflow.com/questions/3934693
-
30-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Alguien sabe el prefijo de proveedor para los gradientes dentro de IE9 o estamos todavía supone que aún está consumiendo sus filtros proprietry?
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 hace prefijo proveedor Alguien sabe de Opera así?
Solución
todavía tienen que utilizar sus propios filtros como de IE9 beta 1.
Otros consejos
Parece que estoy 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 apoyan RGB / RGBA en lugar de notación hexadecimal
La mejor solución multi-navegador 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 apoyo gradiente CSS3. Sin embargo, aquí es una solución buena solución usando PHP para devolver un gradiente de SVG (lineal vertical) en 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 subirlo a su servidor y llama 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 es necesario apuntar a continuación IE9, puede seguir utilizando el viejo 'filtro' patentada método:
.ie7 .my-color, .ie8 .my-color {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}
Por supuesto, puede modificar el código PHP para añadir más paradas en el gradiente, o hacerlo más sofisticado (gradientes radiales, transparencia, etc.), pero esto es muy bueno para aquellos sencilla (vertical) lineal gradientes.
El uso de código I 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;
Se deberá especificar una altura o zoom: 1 aplicar hasLayout al elemento para que esto funcione en IE.
Actualización:
Esta 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;
}
Opera pronto comenzará a tener disponibles construye con el apoyo de gradiente, así como otras características de CSS.
El grupo de trabajo W3C CSS está ni siquiera terminó con CSS 2.1, todos saben eso, ¿verdad? Tenemos la intención de ser terminado muy pronto. CSS3 está en módulos, precisamente para que podamos pasar a través de los módulos de aplicación más rápido en lugar de una especificación completa.
Cada compañía navegador utiliza una metodología del ciclo de software diferente, poniendo a prueba, y así sucesivamente. Por lo que el proceso toma tiempo.
Estoy seguro de que muchos, muchos lectores saben bien que si está usando cualquier cosa en CSS3, que está haciendo lo que se llama "mejora progresiva" - los navegadores con el mayor apoyo obtener la mejor experiencia. La otra parte de que es "degradación elegante", que significa la experiencia será agradable, pero quizás no sea el mejor o más atractivo hasta que el navegador ha implementado el módulo, o partes del módulo que son relevantes para lo que quiere hacer.
Esto crea una situación bastante extraña que, lamentablemente, los desarrolladores de aplicaciones para usuario llegar a ser extremadamente frustrados por: tiempo inconsistente en implementaciones. Por lo que es un verdadero reto a cada lado - ¿Culpa las compañías de navegadores, el W3C, o peor aún - a sí mismo (Dios sabe que no podemos saber todo!) ¿Aquellos de nosotros que están trabajando para una compañía de navegador y el grupo W3C miembros culpa a nosotros mismos? ¿Tú?
Por supuesto que no. Siempre es un juego de equilibrio, y hasta el momento, no hemos, como industria, donde descubrió que el punto de equilibrio es en realidad. Esa es la alegría de trabajar en la tecnología evolutiva:)
entiendo que IE9 todavía no será el apoyo a los gradientes CSS. Lo cual es una lástima, porque es soportar cargas de otros grandes cosas nuevas.
Es posible que desee ver en CSS3Pie como una manera de conseguir todas las versiones de IE para apoyar diversas características de CSS3 (incluyendo gradientes, pero también la frontera de radio y la caja de sombra) con el mínimo de esfuerzo.
Creo CSS3Pie trabaja con IE9 (he probado en las versiones preliminares, pero aún no en la actual versión beta).
No está seguro acerca de IE9, pero Opera no parecen tener ningún apoyo gradiente aún:
No 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:
No sé si esto se puede extender a utilizar una imagen como punto de retorno.
partir de la versión 11, Opera soporta gradientes lineales con la -O- proveedor prefijo. Chris Mills escribió un artículo Dev.Opera al respecto: http: //dev.opera .com / artículos / view / css3 lineales gradientes /
gradientes radiales están todavía en las obras (tanto en la especificación, y dentro de Opera).
El uso de un generador de gradiente - y todo será perfecto;) http://www.colorzilla.com/gradient-editor/
