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

#1 (**permalink**) 15/03/2011, 18:55

Hola a tod@s:

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

Tengo cuatro propiedades CSS:

Código CSS:

Ver originalborder-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.

kseso? · #2 (**permalink**) 16/03/2011, 08:24

¿ie9?
La misma mierda con un número mayor. Hubiera sido un buen navegador... hace tres años.
No tengo respuestas y mucho menos solucciones a sus fallos con el css (para eso están los que han cobrado por desarrollarlo).
Tampoco he podido testearlo (la versión final que ha salido esta semana), sólo he visto un par de páginas con él. Y es de pena. Cuestiones resueltas en la ver.8 fallan en la 9.
Ni @font-face muestra. Y eso que estaban avisados.

En definitiva, si no había bastante con tener que modificar 3 veces los códigos para ie8, ie7, ie6 (quien le de soporte), ahora se suma el 9.

Esperemos que saquen pronto el service pack correspondiente o la versión 10.

Pero sí han hecho una cosa bien: sólo es compatible con vi$ta y 7. Por usuarios de Xp y anteriores no hay que preocuparse.

Edito y amplío:
Por cierto, combine en un mismo div border-radius y box-shadow, verá que bonito queda

(

#3 (**permalink**) 16/03/2011, 10:23

@kseso?
Gracias por tu respuesta

Yo simplemente lo que quería era alguna solución para optimizar una website en IE9.
Con IE7 e IE8 ya costaba encontrar algo que puediese valer por temas de compatibilidad (en CSS). Pero con la llegada de IE9 (final) pensaba que estos problemas se podrían resolver (por lo menos algunos de ellos), pero ya veo que no incluso en algunos casos se empeora.

Cita:

Iniciado por kseso?

Por cierto, combine en un mismo div border-radius y box-shadow, verá que bonito queda

A que te refiere con eso?

Es lo que hago, en un mismo selector div adjunto todas las propiedades citadas anteriormente, que se muestran arriba, y en otro selector div distinto (con otra id), escribo las mismas propiedades pero con diferentes valores. Y lo extraño es que en IE9 me reconoce ciertas propiedades en un div y otro no me las reconoce, siendo las mismas propiedades en ambos. Por qué?

kseso? · #4 (**permalink**) 16/03/2011, 11:17

Con lo de combinar radius y shadow me refería a esto:

#5 (**permalink**) 16/03/2011, 19:00

Cita:

Iniciado por kseso?

Con lo de combinar radius y shadow me refería a esto:

Bueno eso quizás depende de los valores que se pongan en dichas propiedades, por que la verdad es que nunca vi ese efecto en IE jaja.

Yo probé y probé intercalando las dos y también las dos adjuntas en un mismo bloque de sentencias y nunca me paso nada así...

#6 (**permalink**) 17/03/2011, 06:53

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 un lado si y en otro??. Cuando las propiedades son las mismas.

seocusco · #7 (**permalink**) 17/03/2011, 10:26

nooo, ahora cuando maquetemos tendremos otro IE con quien rompernos la cabeza

#8 (**permalink**) 17/03/2011, 10:39

Cita:

Iniciado por seocusco

nooo, ahora cuando maquetemos tendremos otro IE con quien rompernos la cabeza

Ya amigo seocusco... otro quebradero más de cabeza.

Ahora que ya subí las imágenes de captura de pantalla sobre lo que quería decir, si alguien sabe por que entonces me ocurre esto, que lo haga saber, no solo a mi si no a todos los que puedan leer este post y así solventar dudas.
Gracias.

escudo40 · #9 (**permalink**) 03/05/2011, 06:53

Lo que conseguí para crear Gradient en ie fue

#id {
filter: progid:DXImageTransform.Microsoft.Gradient(
gradientType=0,startColorStr=#d8cde9,
endColorStr=#8f7eac);
}

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="aaaaa" />
	<title>Untitled 1</title>
<script type="text/javascript">
<!-- Toggle the Enabled property to toggle the gradient.  -->
function fnToggle(oObj) {
    if (oDiv.filters(0).enabled){
        oDiv.filters(0).enabled='false';
        oObj.innerText='Add Gradient';}
    else {                                                        
        oDiv.filters(0).enabled='true';
        oObj.innerText='Make Normal';}
}
</script>
</head>
<body>

        <font size="+5">
            <div id="oDiv" style="height:120px; color:green; filter: 
                    progid:DXImageTransform.Microsoft.gradient(enabled='false',
                        startColorstr=#550000FF, endColorstr=#55FFFF00)" >
                A simple gradient   
            </div>
        </font>
        <p>
        <button onclick="fnToggle(this)">Add Gradient</button><br/></p>
</body>
</html>

solo lo probe en ie5 hasta el ie8 y funciona correctamente

escudo40 · #10 (**permalink**) 03/05/2011, 07:07

aqui les dejo para crear sombras

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="aaaaa" />
	<title>Untitled 1</title>
<script type="text/javascript">
function fnDepress() {
var bState = oFilterDIV.filters.item('DXImageTransform.Microsoft.dropshadow').enabled;
oFilterDIV.filters.item('DXImageTransform.Microsoft.dropshadow').enabled = !bState;
}
</script>
</head>
<body>
    <div id="oFilterDIV" style="cursor:hand;height:160px; padding:10px; font:bold 13pt verdana;  
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true');" onclick="fnDepress();">
        This is the DIV content.
    </div>
</body>
</html>

escudo40 · #11 (**permalink**) 03/05/2011, 07:22

seme había olvidado mencionar esto

Código CSS:

Ver original.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); /* IE6 & IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC')"; /* IE8 */
}

#12 (**permalink**) 03/05/2011, 07:38

Cita:

Iniciado por escudo40

seme había olvidado mencionar esto

Código CSS:

Ver original.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); /* IE6 & IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC')"; /* IE8 */
}

Gracias por la info. He probado solo con IE9 y no funciona... Yo creo que es problema de como están heredadas las clases (class y id) de los elementos. Por que si no, no entiendo por en en unos casos si funcionan ciertas propiedades y en otros casos no... (hablo del código no de los navegadores).

Y lo único diferente que encuentro en las lineas CSS que nombras es: GradientType=0

Saludos ;)

escudo40 · #13 (**permalink**) 03/05/2011, 09:12

ie bordes
puedes usar IETester para probar con todas las versiones de ie http://www.my-debugbar.com/wiki/IETester/HomePage
yo en este momento investigando e conseguido como redondear bordes en ie

http://www.anieto2k.com/2008/12/05/b...rnet-explorer/

Pero me genera incompatibilidad con las sombras y el degradado

opera degradados
http://stackoverflow.com/questions/4...dient-in-opera