Foros del Web » Creando para Internet » CSS »

Lista de comentarios condicionales CSS

Estas en el tema de Lista de comentarios condicionales CSS en el foro de CSS en Foros del Web. 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" /> <!--[if IE]> ...

  #1 (permalink)  
Antiguo 22/10/2008, 02:46
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.338
Antigüedad: 9 años, 3 meses
Puntos: 169
Lista de comentarios condicionales CSS

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" />

<!--[if IE]>
<link rel="stylesheet" href="ie-style.css" type="text/css" />
<![end if]-->

<!--[if FF]>
<link rel="stylesheet" href="ff-style.css" type="text/css" />
<![end if]-->

<!--[if Opera]>
<link rel="stylesheet" href="opera-style.css" type="text/css" />
<![end if]-->

<!--[if Safari]>
<link rel="stylesheet" href="safari-style.css" type="text/css" />
<![end if]-->

<!--[if Konquerer]>
<link rel="stylesheet" href="konquerer-style.css" type="text/css" />
<![end if]-->

<!--[if iCab]>
<link rel="stylesheet" href="icab-style.css" type="text/css" />
<![end if]-->

<!--[if Flock]>
<link rel="stylesheet" href="flock-style.css" type="text/css" />
<![end if]-->

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.

Última edición por Fuzzylog; 24/10/2008 a las 05:45 Razón: Corrección de código
  #2 (permalink)  
Antiguo 22/10/2008, 04:49
 
Fecha de Ingreso: octubre-2008
Mensajes: 6
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Lista de comentarios condicionales CSS

Gracias me sera de mucha ayuda.
  #3 (permalink)  
Antiguo 22/10/2008, 04:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lista de comentarios condicionales CSS

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?
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 22/10/2008, 10:39
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.338
Antigüedad: 9 años, 3 meses
Puntos: 169
Respuesta: Lista de comentarios condicionales CSS

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.
  #5 (permalink)  
Antiguo 23/10/2008, 17:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lista de comentarios condicionales CSS

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>
<!--[if FF]><style>a {color: red;}</style><![endif]-->
<!--[if Opera]><style>a {color: red;}</style><![endif]-->
<!--[if IE]><style>a {color: red;}</style><![endif]-->
</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.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 23/10/2008, 21:17
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Lista de comentarios condicionales CSS

estaria genial tener esto!
__________________
Degiovanni Emilio
developtus.com
  #7 (permalink)  
Antiguo 24/10/2008, 06:04
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.338
Antigüedad: 9 años, 3 meses
Puntos: 169
Respuesta: Lista de comentarios condicionales CSS

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.
  #8 (permalink)  
Antiguo 24/10/2008, 06:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lista de comentarios condicionales CSS

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.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 24/10/2008, 06:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lista de comentarios condicionales CSS

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:

<!--[if FF]><link rel="stylesheet" href="firefox.css" type="text/css" /><![endif]-->
<!--[if Opera]><link rel="stylesheet" href="opera.css" type="text/css" /><![endif]-->
<!--[if IE]><link rel="stylesheet" href="IE.css" type="text/css" /><![endif]-->

El resultado tiene que ser el mismo obligatoriamente:

FF: negro, IE: rojo, Opera: negro.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 27/10/2008, 03:10
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.338
Antigüedad: 9 años, 3 meses
Puntos: 169
Respuesta: Lista de comentarios condicionales CSS

le has quitado los atributos al html?
  #11 (permalink)  
Antiguo 27/10/2008, 10:51
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Lista de comentarios condicionales CSS

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


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 27/10/2008, 11:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Lista de comentarios condicionales CSS

Fuzzylog:
¿Y el corolario es...?
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 27/10/2008, 11:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lista de comentarios condicionales CSS

Cita:
Iniciado por Fuzzylog Ver Mensaje
le has quitado los atributos al html?
Sï. ¿Has mirado el código fuente? porque eso se ve fácil.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 11/11/2008, 07:26
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.338
Antigüedad: 9 años, 3 meses
Puntos: 169
Respuesta: Lista de comentarios condicionales CSS

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.
  #15 (permalink)  
Antiguo 11/11/2008, 09:44
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Lista de comentarios condicionales CSS

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #16 (permalink)  
Antiguo 11/11/2008, 09:49
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.338
Antigüedad: 9 años, 3 meses
Puntos: 169
Respuesta: Lista de comentarios condicionales CSS

La página aún no está publicada, está en preproducción. Faltan por pulir algunos detalles.
  #17 (permalink)  
Antiguo 14/01/2009, 04:07
 
Fecha de Ingreso: agosto-2007
Ubicación: Barcelona
Mensajes: 39
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Lista de comentarios condicionales CSS

Entonces existe el dichoso comentario condicional para Firefox o es solo ficción? porque a mí tampoco me va...
  #18 (permalink)  
Antiguo 14/01/2009, 04:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lista de comentarios condicionales CSS

Si has leído el hilo entero mira los ejemplos y saca tus propias conclusiones.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 15/01/2009, 11:29
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Lista de comentarios condicionales CSS

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #20 (permalink)  
Antiguo 15/01/2009, 11:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Lista de comentarios condicionales CSS

Mensaje #3 de este tema:
Cita:
Iniciado por Mikmoro Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #21 (permalink)  
Antiguo 17/01/2009, 01:48
Avatar de prototype  
Fecha de Ingreso: enero-2009
Mensajes: 7
Antigüedad: 8 años, 11 meses
Puntos: 0
Lista de comentarios condicionales CSS

Y que hay de Google Chrome? no tiene condicional?
  #22 (permalink)  
Antiguo 17/01/2009, 02:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lista de comentarios condicionales CSS

Ninguno lo tiene. ¿Has leído el hilo?
__________________
Visita mi nueva web idplus.org
  #23 (permalink)  
Antiguo 17/01/2009, 03:47
Avatar de prototype  
Fecha de Ingreso: enero-2009
Mensajes: 7
Antigüedad: 8 años, 11 meses
Puntos: 0
Exclamación Respuesta: Lista de comentarios condicionales CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
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
  #24 (permalink)  
Antiguo 17/01/2009, 09:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Lista de comentarios condicionales CSS

Cita:
Iniciado por prototype Ver Mensaje
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?
__________________
Visita mi nueva web idplus.org
  #25 (permalink)  
Antiguo 17/01/2009, 09:42
Avatar de prototype  
Fecha de Ingreso: enero-2009
Mensajes: 7
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Lista de comentarios condicionales CSS

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?
  #26 (permalink)  
Antiguo 04/11/2009, 17:10
Avatar de DiegoKaiser  
Fecha de Ingreso: febrero-2008
Ubicación: Lima, Peru
Mensajes: 51
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: Lista de comentarios condicionales CSS

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
  #27 (permalink)  
Antiguo 04/11/2009, 22:04
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Lista de comentarios condicionales CSS

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]-->
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 04/11/2009 a las 22:09
  #28 (permalink)  
Antiguo 05/11/2009, 09:16
Avatar de DiegoKaiser  
Fecha de Ingreso: febrero-2008
Ubicación: Lima, Peru
Mensajes: 51
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: Lista de comentarios condicionales CSS

Gracias por responder zerokilled, aún no me ha funcionado pero lo que voy a hacer es redirigir dependiendo el explorador.
  #29 (permalink)  
Antiguo 05/11/2009, 09:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Lista de comentarios condicionales CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #30 (permalink)  
Antiguo 05/11/2009, 17:38
Avatar de DiegoKaiser  
Fecha de Ingreso: febrero-2008
Ubicación: Lima, Peru
Mensajes: 51
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: Lista de comentarios condicionales CSS

Geeeeniooooooooooooooooo!

Gracias kseso?, te has ganado mi alabanza
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:32.