CSS3 en IE9: Gradient, border-radius y text-shadow

[d3xf4ult]

Hola a tod@s:

Tengo un problema con estas propiedades en Internet Explorer 9 (versión final)

Tengo cuatro propiedades CSS:
Código CSS:

Código (css) [Seleccionar] Expandir

border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;

box-shadow: 1px 1px 5px #585858;
-moz-box-shadow: 1px 1px 5px #585858;
-webkit-box-shadow: 1px 1px 5px #585858;

text-shadow: 1px 2px 1px #000000;

background: -moz-linear-gradient(center top ,#37598e, #101116) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#37598e), to(#101116));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37598e', endColorstr='#101116');

A) box-shadow-> ahora es compatible con la nueva versión de IE9, no tengo problema en nada.

B) text-shadow -> no es compatible aun con IE9?? sabe alguien que puedo utilizar en su lugar para un correcto funcionamiento en IE9?.

C) border-radius -> Por qué en algunos selectores (en estos casos "div id") cuando declaro esta propiedad me funcionan en IE9 pero en otros selectores no?. Aclaro que estoy declarando la misma propiedad pero con otros valores similares.

D) Bien, a parte de este anterior, otro gran problema viene con la propiedad background y su nuevo valor en CSS3 "gradient" (para conseguir desagrados):
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='VALOR', endColorstr='VALOR'); -> para IE9, Por que se aplica en algunos selectores "div id" y en otros no?, al igual que border-radius, es la misma sentencia pero solamente cambio el valor del color.

No creo que sea problema de compatibilidad ya que, como ya dije, IE9 me reconoce las propiedades y valores pero en algunos casos me los aplica y en otros no.

[d3xf4ult]

Por favor, si alguien tiene alguna idea de cual puede ser el problema o la causa de lo mencionado, agradecería alguna respuesta.

[#!drvy]

IE siempre ha sido así. Tienes que buscar fixes o bypass para eso. Lo de text-shadow creo que había un complemento que al añadirlo al css funcionaba perfectamente hasta con IE7. Y si no puedes usar jquery y sus complementos.


PD: IE también tiene un filter para los shadow's pero no es nada en comparación del que trae CSS3.



Saludos

[d3xf4ult]

IE siempre ha sido así. Tienes que buscar fixes o bypass para eso. Lo de text-shadow creo que había un complemento que al añadirlo al css funcionaba perfectamente hasta con IE7. Y si no puedes usar jquery y sus complementos.

PD: IE también tiene un filter para los shadow's pero no es nada en comparación del que trae CSS3.

Saludos

Gracias por tu respuesta.

Quizás no me expliqué bien...
No estoy diciendo que no sean compatibles, ya sé y muchos ya saben IE como tu bien dices "siempre ha así".

Lo que yo pregunto es:
No es raro que en IE9 en algunos selectores div id donde yo tengo en el bloque de sentencia las propiedades que están arriba, funcionen pero sin embargo en otro div id dentro de su bloque de sentencias con las mismas propiedades no funciona?
Con esto IE9 demuestra que si que reconoce dichas propiedades pero por que en algunos div id las muestra y en otros no?? SI SON IGUALES! (simplemente con un id diferente, obviamente).

[Nakp]

al parecer ni opera ni IE9 soportan los gradientes en el fondo, en este articulo lograron algo muy similar usando imagenes svg en el fondo

http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

[d3xf4ult]

al parecer ni opera ni IE9 soportan los gradientes en el fondo, en este articulo lograron algo muy similar usando imagenes svg en el fondo

http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

Gracias! aún no lo miré a fondo pero lo miraré, quizás puede servirme para algo.

Quiero mostrar dos imágenes, en las que veremos las diferencias más claramente de lo que intento decir.
1º)


2º)


En la 1º imagen podemos ver, que las propiedades:
box-shadow: es compatible con los 5 navegadores mostrados.
text-shadow: es compatible con los 4 citados, menos con IE9.

Pero ahora viene lo interesante!:
border-radius:
- En la 1º imagen vemos que es compatible con los 5 navegadores.
- En la 2º imagen vemos que ya no, solo con 4 de ellos por que IE9 no lo reconoce en ese div la propiedad. Y mi pregunta es por que ocurre esto cuando es la misma propiedad para cada caso??

Gradient:
- En la 1º vemos que IE9 y Opera NO lo reconocen, y el resto si.
- En la 2º vemos que Opera sigue sin reconocerlo, PERO IE9 lo reconoce de repente!. Me pregunto lo mismo. Por que en lado si y en otro??. Cuando las propiedades son las mismas.

[Nakp]

precisamente eso trata el articulo... usa svg con gradientes como backgrounds para ie9 y opera

sobre el border-radius.. usas clases distintas para ambos casos?

[d3xf4ult]

precisamente eso trata el articulo... usa svg con gradientes como backgrounds para ie9 y opera

sobre el border-radius.. usas clases distintas para ambos casos?

Se de lo que se trata pero, como puedo aplicar (a un ejemplo práctico) SVG?.
Y si usara unas imágenes como fondo, claro que se me solucionaría el problema pero quiero evitar hacerlo, aunque si no queda más remedio, tendré que generarlas.

Y con border-radius (como puedes ver arriba el código, en el planteamiento de este post), si, uso distintas clases únicas "div id", una para el menú que se muestra en la captura 1º y otra clase única para el sidebar. Pero eso no debería de influir, al menos eso creo. Ya que añado las MISMAS propiedades en un div que en otro y como se ve en la captura: Donde IE9 me reconoce border-radius en la 2º no y con los gradient lo mismo pero viceversa. No se que pasa...

Por que estoy tan pesado con esto...jaja:
Por que si dijéramos: -Bueno, pues no me reconoce en NINGÚN lado las propiedades ni Opera ni IE9, pues ya estaba pongo imágenes con fondos redondeados y listo!.-
Pero al ver que en unas me las reconoce y en otras no..., y saber que entonces puede ser posible utilizar CSS para conseguirlo, pues mejor.
De ese modo el navegador no tendrá que cargar las imágenes, si no que en su lugar, gestionará unas lineas de código que le resultarán menos tediosas de cargar que unos backgrounds.

[Nakp]

para serte sincero no tengo ni idea del por que funciona en un lado y en otro no... pero preferiria ver el CSS de ambas definiciones... sobre el svg se puede cargar condicionalmente si es IE9 u Opera en un stylesheet distinto xD creo que es el unico workaround disponible a los gradinetes por el momento... opera desde la version 11.10+ soporta los gradientes CSS añadiendo -o como prefijo a la regla