He encontrado que http://www.colorzilla.com/gradient-editor/ es ideal para generar degradados CSS3. Sin embargo, hay una cosa que sería genial si alguien pudiera aclararme.¿Debo usar los gradientes SVG generados por Colorzilla para IE9?
Según tengo entendido, IE9 no admite los filtros de la misma manera que lo hizo IE6-8, y tampoco admite gradientes CSS3. Colorzilla ofrece una forma muy inteligente de obligar a IE9 a trabajar con degradados de varias paradas, al incluir datos SVG para el degradado en CSS, y al configurar el filtro a ninguno para IE9 solo en cualquier elemento que use el degradado. A continuación se muestra un ejemplo de lo que genera Colorzilla si marca la casilla Soporte de IE9, la línea background: url(data ... es lo que se agrega para IE9.
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); /* IE6-8 */
con el siguiente agregado al elemento <head> en el código HTML.
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Me pregunto si por lo general es preferible incluir el código de IE9, o confiar en un repliegue de imagen regular en lugar? ¿Hay alguna situación en la que un enfoque sea mejor que el otro? Además, ¿podría este código SVG afectar el rendimiento de otros navegadores que usan las propiedades de CSS3, o simplemente ignorarán esta línea?
Colorzilla no parece explicar las implicaciones de incluir este código, quizás no haya ninguno y es la forma correcta de hacerlo todo el tiempo? Si ese es el caso, lamento perder el tiempo de las personas, pero el hecho de que sea una opción marcable me hizo pensar que puede haber alguna razón para no usarlo.
Dado que IE10 dejará de ser compatible con los comentarios condicionales, debería incluir el atributo 'filter' para versiones anteriores de IE en lugar de anularlo de nuevo para los actuales. – Joey
Bienvenido. Es imposible romper la etiqueta del foro porque * este no es un foro *. Por supuesto, no darme cuenta de que esto es una infracción grave de la etiqueta;) – robertc