Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

Trucos HTML: condicional en Internet Explorer

Dentro de la gran cantidad de chapucerías con respecto a los estándares W3C que han cometido nuestros amigos de Microsoft en su querido Internet Explorer, hubo algún desarrollador que tuvo una brillante idea: la de implementar un sistema de condicionales dentro de un comentario SGML.

Me explico. El motor del Internet Explorer es capaz de reconocer dentro de un <!-- comentario --> un condicional con el cuál indicarle hacer una acción determinada si el navegador usado es el que se especifica. El formato es el siguiente:

<!--[if (condicional) IE (versión)]>
... código HTML ...
<![endif]-->

Donde condicional es:

  • gte : mayor o igual que
  • gt : mayor que
  • lt : menor que
  • lte : menor o igual que
  • (nada) : igual que

Y en versión podemos indicar la versión del Internet Explorer deseada. Así podrían quedar cosas como las siguientes:

Si nuestro navegador es anterior al IE6...
<!--[if lt IE 6 ]>
Tu versión de Internet Explorer es demasiado antigua.
<![endif]-->

Si nuestro navegador es superior al IE5.5 carga una hoja de estilos determinada...
<!--[if gte IE 5.500 ]>
<link rel="stylesheet" type="text/css" href="estilosIE.css">
<![endif]-->

Si nuestro navegador es IE en cualquier versión...
<!--[if IE]>
¡Estás usando Internet Explorer! ¿Porqué no te bajas Firefox? ;-)
<![endif]-->

Esto puede ser ideal para diseñar soluciones y CSS Hacks para webs estándar que están perfectamente diseñadas pero se ven mal en el navegador del lado oscuro... al menos hasta que salga el esperado IE7.

Escrito por Manz, el , en html. Comentarios recibidos: 24.

24 comentarios de lectores
cumic
cumic
1

El problema no se va a solucionar cuando salga ie7, mucha gente va a seguir con ie6, pero muchísima. Están acostumbrados a nuevos Windows, no a nuevos navegadores (es decir, que solo cambian de navegador si actualizan su Windows). Ahora, hay gente que incluso maqueta sus webs en css pensando en IE para Mac, algo que me parece increíble... O sea, que el problema será el mismo, pero ahora en vez de ser el 90% será el 50%...

cumic
cumic
2

De todas formas, el hack está cojonúo! ;)

cumic
cumic
3

Por cierto, ¡has quitado los globitos! En Opera esos globos no se terminan de ver muy bien, porque sale por defecto un globo en cada enlace especificando la dirección y el title si lo hubiera.

cumic
cumic
4

Días después vuelvo para comentarte que es muy útil, y para decirte que existe lo contrario, es decir, que aparezca código que ignore ie y los demás lo lean: las etiquetas <*comment> (sin asteriscos). Un pequeño ejemplo, combinando las dos cosas: <*!--[if IE]> ¿Todavía sufriendo IE? Prueba a navegar con un navegador. <*![endif]--> <*!--[if IE]> <*comment> <*![endif]--> Tú sí utilizas un buen navegador :) <*!--[if IE]> <*/comment> <*![endif]-->

Carma
Carma
5

wenas me gustaria saver si m puedes agregar a mi korreo msn pra preguntarte unas kosas asias

jgarcía
jgarcía
6

Muchas gracias por la información. Creo que debes quitar el punto final que tienes en el ejemplo ( link rel="stylesheet" type="text/css" href="estilosIE.css". )

german
german
7

esta re bueno su sitio

Arzakon
Arzakon
8

Gracias, me has salvado la vida!

MIMy
MIMy
9

ola soy paloma pero me llaman mimy, eskribo este mensaje xk no se taba aburria y pa ke la ente ma gregue weno solo era eso... MIMY

chiquitap2006
chiquitap2006
10

hola yo kiero saber poner letras lindas y escrisbo solo poq toy aburrida!

brnni_TTA
brnni_TTA
11

Ola..!! io escribo aki porq pasaba nada mas y necesito ver las escalas d los colores para el nick del msn.... weno un salu2 (k)(k) y postteen www.fotolog.com/brnni_TTa AAAAAAAAAAAiiiiiiiiiiiiiiOOOOOOOOOOOOssssssss

G4T1lL3R0
G4T1lL3R0
12

Saludos José espero mas informacion ! Muy bueno tu blog Echate una vuelta por mi y me comentas ! amm bueno creo k el servicio para fotos no esta disponible !Sale

Jordi
Jordi
13

Gràcies pel post! És exactament el que necessitava!

Iris Fernández
Iris Fernández
14

Maravilloso!!! Gracias!!!!!!

Marcial
Marcial
15

buena pagina

ruffuz
ruffuz
16

lo que pasa, es que si se explicara un poco mejor todo, seria màs facil

ninfa86
ninfa86
17

Hola, una pregunta. Añado este comentario en la cabecera del código html para aplicar dos hojas de estilo CSS: La hoja "estiloF.css" es para navegadores Mozilla Firefox. La hoja "estiloIE.css" es para navegadores Internet Explorer. Mi duda es que al abrir mi web en Explorer, sí me coje la hoja de estilo correcta, lo malo es que me aparece en la esquina superior izquiera el final del comentario: . ¡Y no quiero que se vea! Esto no tendría que aparecer no? He comprobado que no hubiese escrito la condición en alguna parte del código donde no debía pero creo que en teoría está bien. Help!!

javi
javi
18

se puede hacer un if de esos para mozilla??? conteste alguien a mi mail please que mi web no se ve bien en mozilla y no se como arreglarlo :D un saludo santano983@msn.com

monse
monse
19

Como hiciste tu formulario de comentarios??Salu2

Fa
Fa
20

gracias por la informacion, y ojala desapareciera este estupido navegador que solo sirve para descargar firefox

Edu777
Edu777
21

Muchas gracias! muy útil ;)

quaran
quaran
22

hola, que tal. ojala puedan ayudarme. soy nueva en esto de hacer web y no entiendo cómo hacer para que algo que se ve perfecto en safari, chrome, firefox se vea tambien en internet explorer es por ahora extra sencillo porque es solo una imagen de "proximamente" pero que en internet explorer no se ve url es: http://www.quehacemosonline.com.ar/ en un futuro la web estara hecha en wordpress. si saben tambien un truco para esto porfa me dicen agradeceria mucho la ayuda!!

Joan Marc Guillam
Joan Marc Guillam
23

Estamos en 2012 y seguimos usando esto ya que IE9 sigue siendo una gran... lol

carlos
carlos
24

Que pendejos esto es codigo y no dejan dar copie page no vuelvo a visitar esta pagina jejeej pendejos

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.