JMiur [E]

Usar comentarios condicionales para eludir incompatibilidades con distintas versiones de Internet Explorer no es lo ideal porque lo ideal es resolverlas pero, tampoco es un pecado y es la forma más simple agrupar etiquetas específicas que sólo serán aplicadas a ese navegador y, sin duda, es un método mucho más flexible y seguro que utilizar hacks estrafalarios que no siempre dan resultados.

Este método permite agregar etiquetas de cualquier tipo, ya sean reglas de estilo específicas, como scripts o cualquier otra y las condiciones pueden ser utilizada tanto en el head de una página como en el body e incluso, dentro de una entrada de un blog.

El formato standard es el siguiente:
<!--[if IE]>
  ... acá ponemos las etiquetas que sólo se ejecutaran en Internet Explorer ...
<![endif]-->
Una serie de variantes permiten establecer las versiones de IE donde se aplicarán:
<!--[if IE 7]>
  ... sólo en IE version 7 ...
<![endif]-->
Con lt se indica menor que y con lte menor o igual que:
<!--[if lt IE 8]>
  ... versiones anteriores a la 8 ...
<![endif]-->

<!--[if lte IE 8]>
  ... IE8 o inferior ...
<![endif]-->
Con gt se indica mayor que y con gte mayor o igual que:
<!--[if gt IE 8]>
  ... versiones posteriores a la 8 ...
<![endif]-->

<!--[if gte IE 8]>
  ... IE8 o superior ...
<![endif]-->
También pueden usarse condiciones negativas con el carácter ! que indica NOT:
<![if !IE 7]>
  ... NO se está usando IE7 ...
<![endif]>
Algunos preguntan si es posible usar estos condicionales para detectar el navegador y crear condicionales para otros. La respuestas es no pero, sin embargo, si es posible condicionar algo para que sólo se ejecute en navegadores que no sean Internet Explorer y hay una confusión respecto a esa sintaxis que debe ser escrita de este modo:
<![if !IE]>
  ... esto sólo se ejecutará en navegadores que no sean Internet Explorer ...
<![endif]>
En este ejemplo, si se está utilizando IE se verá una imagen y en caso contrario, se verá otra:



<!--[if IE]>
  <img src="imagen_ IE_SI" />
<![endif]-->

<![if !IE]>
<img src="imagen_ IE_NO" />
<![endif]>
Para Microsoft, a todo navegador que no sea Internet Explorer se lo denomina downlevel browser y ellos simplifican las cosas de este modo:
<!--[if true]>
  ESTAS USANDO INTERNET EXPLORER
<![endif]-->

<![if false]>
  NO ESTAS USANDO INTERNET EXPLORER
<![endif]>
Así que con el ejmplo anterior, el resultado será el mismo:


20 comentarios:

JUANSI  

que te puedo decir... me has sacado un gran peso de encima. Gracias ;)

Bueno, y volviendo con el tema anterior (disculpa la insistencia, pero no puedo quedarme tranquilo sin antes haber hecho todo lo posible para solucionar el tema): Cuando digo que quiero el botón de ir arriba fuera de la columna de gadgets me refiero a lo que he visto en Gem@blog y oloblogger; en cualquier resolución y en cualquier navegador la columna lo suficientemente separada de la flecha creando una armonia visual... lo que me molesta es ver una cosa semimontada sobre la otra, pues para algunos eso luce desordenado. Si puedes darme una solución estaré enormemente agradecido, y si no puedes hacerlo también... yo cumplí con hacer mi pregunta. Un abrazo enorme.

Responder
egoloco  

Osea que para Microsoft los otros navegadores son inferiores a toda versión de IE? jeje

Responder
JMiur  

JUANSI:
En el xaso del blog de Gem@, el resultado será el mismo ya que está posicionado a una cierta distancia del borde derecho del navegador; quiere decir que, si la ventana del navegagor es menos al ancho del blog, la palabra TOP se verá dentro del area blanca. Es algo perfectamente normal.

En el caso de Oloman, su criterio es distinto ya que, primero centra esa flecha con, por ejemplo left:50% y luego, le agrega un margen derecho con un valor superior a la mitad del ancho de su blog, de tal modo que la flecha queda siempre posicionada a cierta distancia del área de posts.

egoloco:
Sí. No quise decirlo pero, es tal cual :D

Responder
Daniel Paredes  

¡Hola, JMiur!
Muy buenos tus trabajos: poco a poco voy sumando herramientas gracias a la dedicación de gente como vos. Y también voy descubriendo las diferentes secciones de tu blog. Ya he visto que tenés algunos textos literarios. A propósito de esa página, algún día debieras explicarme cómo podés incluir distintas entradas en una de las páginas anexas, es decir, en una que no es la página principal. ¡Mis felicitaciones, y te aliento para que sigas adelante con Vagabundia!
Ah, me suscribí y llevé tu widget a mi blog;).
Saludos.

Responder
Yurika-Chan  

Yo lo vengo usando desde hace un tiempo y es la mejor forma de hacer lo más compatible el diseño a lo que se ve en Firefox, pero sigue siendo imposible que lea correctamente el CSS3, bueno ya es cosa de la gente de Microsoft

Responder
JUANSI  

ok ok... si pongo un "left: 50%" el boton queda justo en medio de la pantalla. Antes de eso hay un "bottom: 10px" que si lo modifico envia el boton arriba de la pantalla. Antes de eso hay un "position: fixed" que si lo modifico envia el boton a los lugares mas insolitos, jajaj

Mi pregunta es: ¿En donde y con que titulo agrego ese margen derecho? Ya intenté insertarlo de varios modos, pero no me funciona :-I (como verás no mentí cuando dije que no entendia nada de esos codigos, jajaj)

Por tu comprensión y pasiencia, MUCHAS GRACIAS ;)

Responder
JMiur  

Gracias, Daniel :D
¿A que te refieres con lo de páginas anexas?

Yurika-Chan:
No es que se lea incorrectamente sino que IE no incorpora algunas de esas propiedades.

JUANSI 6
position: fixed fija la imagen en un punto exacto de la ventana
bottom: 10px coloca la imagen 10 pixeles por encima del borde inferior del navegador

left: 50% coloca la imagen en el centro de la ventana del navegador sin importar su ancho que es desconocido y variable.

margin-left: VALORpx desplaza horizontalmente esa imagen una cantidad de pixeles definidas desde el centro hacia la derecha; tantos como la mitad o un poco más que el ancho del blog que es un dato fijo (820px) Por ejemplo:

<img title='Ir al principio' style='position: fixed; bottom: 10px; left: 50%; margin-left: 430px;' src='http://lh6.ggpht.com/_0eC4K-qZ7AM/SqqYQssdADI/AAAAAAAAJt4/-DmElCpGxvE/flecha.gif' />

Responder
Javierdealmagro  

buena publicación y ya que estamos dándole al explorer, mis alabanzas a http://acid3.acidtests.org/ que siempre nos dice que el explorer es un viejito antipático jeje. saludos

Responder
Rommel Diniz  

Excelente aporte en mi blog tambien anexo algunas etiquetas html 5 que les pueden servir Saludos..... Vean mi blog http://desarrollo-web-20.blogspot.com/

Responder
Daniel Paredes  

¡Hola, JMiur!
Es que yo pensaba que lo que figura en tu menú ("Blogger", "Preferidos", "Historias"...) eran páginas adicionales. Pero ahora veo que no, que es un menú con enlaces a entradas de la página principal. Parecen entradas normales (¡aunque sin sidebar!) con un índice de enlaces que remiten a su vez hacia otros post. Supongo que cada vez que subís un post nuevo, lo sumás en alguna de esas entradas. ¿Es así?
Disculpá mi interés, y también mi ignorancia, jaja. Como notarás, recién estoy empezando con esto de los blogs. :)
Saludos

Responder
JUANSI  

¡¡¡¡¡G_R_A_C_I_A_S!!!!!


(Habia estado intentando algo parecido; al parecer no soy tan idiota como pensaba ;)... pero no me resultaba!!!)

Bueno, otra vezz:

¡¡¡¡¡G_R_A_C_I_A_S!!!!!

Responder
JMiur  

Daniel:
Sí, es exactamente así, cuando lo hice, no había la posibilidad de utilizar páginas estáticas así que son entradas comunes y corrientes.
Lo hago manualmente pero no cada vez que agrego una entrada sino ... cuando me acuerdo :D

Responder
Daniel Paredes  

¡Muchas gracias, JMuir! Voy entendiendo algunas cosas. Esto que me decís me da la idea de que, entonces, en mi blog puedo tener sólo diez "páginas estáticas" (ahora ya sé cómo se llaman), pero puedo agregar otras similares a las tuyas. Ahora debo investigar un poco sobre las barras de menú. Buscaré si hay información sobre el tema en tu enorme "blogteca".
Saludos.

Responder
JMiur  

Unico consejo: PACIENCIA :D

En esta entrada se explica el menú que utilizo.

En esta otra, la forma de identificar entradas individuales en el caso de querer darles un estilo diferenciado del resto que es el caso de los índices.

Responder
Daniel Paredes  

¡Hola, JMiur! Sí, me lo tomo con calma. Pero cada vez me sumerjo más y con más gusto en estos trabajos. :)
Te agradezco mucho los enlaces. Ayer ya estuve viendo el primero. Al otro lo veo en un momento.
¡Mil gracias por todo!

Responder
Stefano Carcone Vasquez  

Hola, saludos.

mi pregunta es:
¿puedo usar esta herramienta para que directamente NO se muestren cosas en IE? Es decir yo no quiero que se muestre mi barra de menus y submenus por que en el ie no se ven bien. ¿como hago exactamente?

este es mi blog. http://elblogdelconsejero.blogspot.com/ en dodne aplicare tal conocimiento si logra alguien ayudarme.

Responder
JMiur  

Puedes probar con algo así:

<!--[if IE]>
<style>
.tabs-outer { display: none; }
</style>
<![endif]-->

Lo deberías agregar al final, es decir, antes de &lt/head>

Responder
CUENTAGOTAS  

Jorge, ayúdame con algo referente a IExplorer:

Mi blog http://ritmosymelodiasecuador.blogspot.com/ se visualiza perfectamente en todos los navegadores pero en IE los sidebars y el footer-wrapper pasa a formar parte del main-wrapper, pero esto solo sucede en la página principal, al navegar otras páginas y en los posts individuales se visualiza bien.

Por favor échame una mano que no lo puedo resolver.

Responder
JMiur  

Si eso ocurre sólo en el home, es probable que haya un post en el home que tenga una etiqueta mal cerrada o un error de sintaxis. Debes irlos quitando uno por uno hasta hallar al culpable.

Responder
CUENTAGOTAS  

Eres un Genio Jorge, Gracias :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR