Existe una etiqueta que permite mostrar contenido ÚNICAMENTE cuando usamos este navegador, y es bastante sencilla de utilizar, con ella corregiremos algunos errores de previsualización y además podremos dar una apariencia distinta cuando algún usuario visite desde Internet Explorer.
El tutorial:
Recomiendo que si no sabes cómo importar un archivo .css que leas el siguiente artículo:Dicho esto procederemos a utilizar las etiquetas que hacen posible esta acción:
<!--[if IE]>Es importante saber que podemos modificar esta etiqueta para elegir qué versión de Internet explorer será la que condicionaremos:
Acá irá el contenido que se mostrará en Internet Explorer
<![endif]-->
<!--[if IE 6]>El número destacado corresponde al límite de la versión, podemos usar valores entre el 6 y el 10 (Internet Explorer 10 de momento sólo está disponible en Windows 8 Developer Preview, y la compatibilidad web no varía mucho aún).
Acá irá el contenido que se mostrará en Internet Explorer
<![endif]-->
Para insertar CSS:
Podemos dar atributos de manera independiente al navegador de 2 formas, una es mediante un archivo .CSS:
<!--[if IE]>
<link href='URL-ARCHIVO.CSS' rel='stylesheet' type='text/css'/>
<![endif]-->
Mientras que la segunda forma es de la siguiente:
<!--[if IE]>
<style type="text/css">ATRIBUTOS ACÁ</style>
<![endif]-->
Recomiendo la primera forma ya que sólo cargará los estilos cuando se utilice dicho navegador y no sobrecargaremos la plantilla del blog con elementos innecesarios.
Usando contenedores fuera del <body>:
Algo que no es posible en Blogger es utilizar algún tipo de contenedor fuera del <body>, si lo intentamos aparecerá un error y el editor lo impedirá, gracias a estas etiquetas es posible insertarlos, puede servir como un hack para distintos propósitos, en mi caso utilicé este defecto para mostrar un mensaje en caso de utilizar Internet Explorer:
<!--[if IE]>
<div id="nombre-contenedor-para-css">Contenido del div</div>
<![endif]-->
Eso es todo, recuerda que también es posible condicionar otros navegadores mediante javascript, pero en esta entrada no lo veré ya que no quiero desviarme, en otra oportunidad mostraré cómo insertar distintos atributos en otros navegadores como Safari, Chrome Chrome, Firefox, etc.
No hay comentarios:
Publicar un comentario