Lista de comentarios condicionales CSS

Fuzzylog · #1 (**permalink**) 22/10/2008, 01:46

Como hay muchas preguntas sobre comentarios condicionales voy a poner esta lista para que veais que opciones teneis.

<link rel="stylesheet" href="base-style.css" type="text/css" />















Entre estos tags se puede poner el link al .css correspondiente o código html/javascript que se ejecutará de forma específica para un navegador concreto.

Para las diferentes versiones de explorer hay variaciones en los comentarios condicionales que se pueden encontrar con la búsqueda adecuada en google. Espero que os sirva.

Ferosz · #2 (**permalink**) 22/10/2008, 03:49

Gracias me sera de mucha ayuda.

Mikmoro · #3 (**permalink**) 22/10/2008, 03:52

Hola, Fuzzylog.

El comentario condicional fue algo creado por Microsoft para determinadas cuestiones relacionadas con sus navegadores.

¿Has hecho pruebas con estas cosas antes de publicarlo?

Fuzzylog · #4 (**permalink**) 22/10/2008, 09:39

he utilizado el de firefox, pero directamente en los css, y luego el de IE en el html pero para una zona específica de la web que hice. En ambos casos conseguí que funcionase. Es posible que algunas combinaciones no funcionen bien. Por ejemplo, en la css intenté poner el condicional del explorer y no iba, luego probé a poner el condicional especifico para FF y así, si q funcionaba. Así que dejé la versión css del explorer como la normal.

Mikmoro · #5 (**permalink**) 23/10/2008, 16:34

Me extraña bastante que te funcione, porque es un asunto exclusivo de los navegadores de Microsoft (Internet Explorer).

Si te ha parecido que en FF te ha funcionado es porque FF ha ignorado el comentario, y ha ejecutado lo que había en tu hoja de estilo.

Prueba esto:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a {color: black;}
</style>



</head>
<body>
<a href="#">Enlace</a>
</body>
</html>

Y mira a ver de que color ves el texto del enlace en FF, IE y Opera.

FF: negro, IE: rojo, Opera: negro.

Aparte de que tienes mal escritos los comentarios condicinales, porque te falta un signo de admiración:

<[end if]-->

debe ser

<![endif]-->

Lo aclaro para no confundir a la gente.

emiliodeg · #6 (**permalink**) 23/10/2008, 20:17

estaria genial tener esto!

Fuzzylog · #7 (**permalink**) 24/10/2008, 05:04

Bueno, ya he corregido los cierres.

Mikmoro, creo que lo que pretendes hacer es distinto a lo que yo tengo en el post.

Esos comentarios condicionales tuyos están atribuidos al estilo de un elemento concreto contenido en el html, con lo que navegadores como opera, y firefox no se molestan en leer los comentarios condicionales y ponen como válido el estilo predefinido.

Lo que estoy haciendo yo es no predefinir ningún estilo en el html, sino enviar a cada navegador a leer distintas .css que ya tendrán cada uno sus estilos.

Mikmoro · #8 (**permalink**) 24/10/2008, 05:13

Pero es lo mismo: si Firefox obvia un comentario condicional, lo obvia siempre, pongas lo que pongas dentro de este.

Si lo prefieres, haz la misma prueba llamando a diferentes hojas de estilo, como lo habías hecho tu, y en cada hoja de estilo incluye únicamente el selector que yo he puesto para evitar confusiones.

¿Cuál va a ser el resultado? Exactamente el mismo. Haz la prueba y me dices.

Mikmoro · #9 (**permalink**) 24/10/2008, 05:22

No te molestes en probarlo; míralo aqui:

http://www.araudi.net/forosdelweb/Fu.../Fuzzylog.html

Una css para cada nacegador, y en el html llamo a cada hoja como tú decías:





El resultado tiene que ser el mismo obligatoriamente:

FF: negro, IE: rojo, Opera: negro.

Fuzzylog · #10 (**permalink**) 27/10/2008, 02:10

le has quitado los atributos al html?

daPhyre · #11 (**permalink**) 27/10/2008, 09:51

Fuzzylog, podrías mostrarme un link a una página donde funcione esto, ya lo he intentado yo y no me funciona o~o...

kseso? · #12 (**permalink**) 27/10/2008, 10:09

Fuzzylog:
¿Y el corolario es...?
Un saludo

Mikmoro · #13 (**permalink**) 27/10/2008, 10:31

Cita:

Iniciado por Fuzzylog

le has quitado los atributos al html?

Sï. ¿Has mirado el código fuente? porque eso se ve fácil.

Fuzzylog · #14 (**permalink**) 11/11/2008, 07:26

Por otra parte, dentro de las .css se pueden poner también comentarios condicionales:

Hay uno que funciona especialmente bien:

pones:

.elemento {
propiedad1:valor;
propiedad2:valor;
....;
}

//eso para el explorer7 e inferiores, y luego ...

html>/**/body .elemento {
propiedad1:valor;
propiedad2:valor;
....;
}

//que vale para firefox, opera y otros navegadores modernos. Espero que sí os sirva.

daPhyre · #15 (**permalink**) 11/11/2008, 09:44

Pensé que ya había muerto el tema

Pero eso no es un comentario condicional, es un hack

Por cierto, sigo esperando la página de muestra que me decías donde usabas los comentarios condicionales

Fuzzylog · #16 (**permalink**) 11/11/2008, 09:49

La página aún no está publicada, está en preproducción. Faltan por pulir algunos detalles.

netizen.01 · #17 (**permalink**) 14/01/2009, 04:07

Entonces existe el dichoso comentario condicional para Firefox o es solo ficción? porque a mí tampoco me va...

Mikmoro · #18 (**permalink**) 14/01/2009, 04:55

Si has leído el hilo entero mira los ejemplos y saca tus propias conclusiones.

daPhyre · #19 (**permalink**) 15/01/2009, 11:29

Parece ser que Fuzzylog ha tirado la toalla, aunque no aceptó su derrota al público (¿Demasiado orgullo?)

Creo que podemos dar por conclusión que esto NO es real

kseso? · #20 (**permalink**) 15/01/2009, 11:52

Mensaje #3 de este tema:

Cita:

Iniciado por Mikmoro

Hola, Fuzzylog.

El comentario condicional fue algo creado por Microsoft para determinadas cuestiones relacionadas con sus navegadores.

¿Has hecho pruebas con estas cosas antes de publicarlo?

Esto se veía venir desde entonces

prototype · #21 (**permalink**) 17/01/2009, 01:48

Y que hay de Google Chrome? no tiene condicional?

Mikmoro · #22 (**permalink**) 17/01/2009, 02:37

Ninguno lo tiene. ¿Has leído el hilo?

prototype · #23 (**permalink**) 17/01/2009, 03:47

Cita:

Iniciado por Mikmoro

Ninguno lo tiene. ¿Has leído el hilo?

Claro!! por quien me tomas?... solo preguntaba que si alguien sabia el condicional para chrome... pero he buscado y nada!

Ademas intente establecer un condicional en Opera pero no me funciono (a vos si Mikmoro? se me hace raro que en el ejemplo que hiciste FF y Opera tengan el mismo color...¬¬) has que cada uno sea diferente pls!...

otra cosa mas aqui no se habla de las otras opciones que tiene, ni la manera en que se pueden "agrupar" como por ejemplo:

* lt - Less than = Menor que (ejemplo <!--[if lt IE 7]>, solo se vera para versiones menores a IE 7.
* lte - Less than or equal to = Menor o Igual que (ejemplo <!--[if lte IE 7]>, se podra ver en versiones menores a IE 7, pero en IE 7 tambien se vera.
* eq - Equal to = Igual a (ejemplo <!--[if eq IE 7]>, Se vera solo en IE 7, es igual que la opcion por defecto...(corrijanme si no!)
* gt - Greater then = Mayor que (ejemplo <!--[if gt IE 7]>, se podra ver en una version de IE superior a la 7
* gte - Greater than or equal to = Mayor o Igual que (ejemplo <!--[if gte IE 7]>,solo se podra ver en IE 7 o en una version superior a esta...

No he comprobado lo de agrupar condicionales pero pues aqui estan las "opciones"

# <!--[if (IE 7)|(IE 8)]> - Solo se vera en IE 7 e IE 8
# <!--[if (gte IE 6)&(lte IE 8)]> - Se vera entre las vesiones 6 y 8 de IE (incuyendo estas!)
# <!--[if !IE]> - Se vera en Cualquier navegador, exepto IE

Mikmoro · #24 (**permalink**) 17/01/2009, 09:25

Cita:

Iniciado por prototype

Claro!! por quien me tomas?...

Pues no te tomo por nadie, pero creo que lo has entendido exactamente al revés: soy yo quien afirma categóricamente que los comentarios condicionales son invento de Microsoft y que sólo sirven para IE, para lo cuál aporto ejemplos que demuestran que no funcionan en absoluto para ningún otro navegador, es decir, todo lo contrario de lo que crees que he dicho.

Y si pregunto si has leído el hilo no es para faltarte, sino que preguntas si hay uno para Chrome, y al leeer el hilo deberías haberte dado cuenta de que queda demostrado que ni para chrome ni para ningún otro que no sea IE.

¿Dónde está la confusión?

prototype · #25 (**permalink**) 17/01/2009, 09:42

upss mis disculpas... pero es que ayer estaba como lelo, lento y no me daba cuenta de lo que decias Mikmoro.. en fin parte de la culpa la tienen muchos sitios de internet entonces; por que tambien en batantes de ellos se habla de condicionales para los otros exploradores... (hay uno que incluia hasta a el explorador de la PSP!), entonces es algo asi como un mito o una idea erronea que hay difundida en la red?

DiegoKaiser · #26 (**permalink**) 04/11/2009, 17:10

Saludos, estoy intentando algo pero no me esta dando buenos resultados.

Es algo así:

Código HTML:

<!--[if IE]>
<?php include("mapa_ie.html");
?>
<![end if]-->
<!--[if!IE]>
<?php include("mapa_.html");
?>
<![end if]-->

pero no está resultando, en IE se ve el comentario <![end if]--> al final del include y en los demás navegadores no se ve ninguna cosa.

Si coloco:

Código HTML:

<!--[if IE]>
<?php include("mapa_ie.html");
?>
<![end if]-->

<?php include("mapa_.html");
?>

En IE se mostrarán ambos includes

zerokilled · #27 (**permalink**) 04/11/2009, 22:04

te recomiendo que leas el siguiente tema que parece ser muy parecido a lo que intentas plantear, http://www.forosdelweb.com/f4/condic...ra-ie6-743846/
mas o menos el asunto es que no tiene sentido el condicional <!--[if !IE]> porque lo que significa es si el navegador no es IE, entonces analiza tal cosa. por lo que iexplorer nunca mostrara el contenido de dicha condicion dado que es iexplorer. pero sin embargo, tampoco ningun otro navegador lo mostrara porque los comentarios condicionales solo funciona en iexplorer.

creo que lo tuyo deberia ser asi,

Código:

<!--[if !IE]>-->
<?php include("mapa_.html");
?>
<!--[end if]-->
<!--[if IE]>
<?php include("mapa_ie.html");
?>
<![end if]-->

DiegoKaiser · #28 (**permalink**) 05/11/2009, 09:16

Gracias por responder zerokilled, aún no me ha funcionado pero lo que voy a hacer es redirigir dependiendo el explorador.

kseso? · #29 (**permalink**) 05/11/2009, 09:25

Creo que no llegaste a #número que te indicaba Zerokilled

:
A partir de este comentario en ese tema y un ejemplo de "perversión de los cc".
Sólo tienes que abrir el ejemplo con distintos navegadores para ver un mensaje u otro, dependiendo del navegador usado (o de la versión de ie)

Un saludo

DiegoKaiser · #30 (**permalink**) 05/11/2009, 17:38

Geeeeniooooooooooooooooo!

Gracias kseso?, te has ganado mi alabanza