La técnica para manejar estas diferencias, se basa en añadir clases a la etiqueta <html> dependiendo del navegador en el que estemos y luego a través de CSS poder aplicar los estilos al navegador que queramos.
Como IE suele ser el mas problemático vamos a empezar con él, para ello vamos a añadir estos condicionales en el <head> de nuestra página.
<!--[if lt IE 7]> <html class="ie6"> <![endif]--> <!--[if IE 7]> <html class="ie7"> <![endif]--> <!--[if IE 8]> <html class="ie8"> <![endif]--> <!--[if gt IE 8]> <html class="ie9"> <![endif]-->
Como podemos ver [if lt IE 7] (si IE es anterior a la versión 7) nos devuelve <html class="ie6"> y ya sólo tendríamos que añadir esta clase .ie6 p {color:red;} para que los párrafos en versiones inferiores de IE7 se vean en rojo. Los operadores que admite el condicional son: lt = less than (menor que) y gt = great than (mayor que).
Si lo que queremos es añadir un mensaje en el html debemos añadir el siguiente código en el <body>
<!--[if lt IE 7]><p>ESTAS EN IE6 O Inferior</p><![endif]--> <!--[if IE 7]><p>ESTAS EN IE7</p><![endif]--> <!--[if IE 8]><p>ESTAS EN IE8</p><![endif]-->
Hay que recordar que a partir de IE10 no reconoce los comentarios condicionales.
Para el resto de navegadores vamos a usar el mismo método pero esta vez añadiremos las clases a través de JavaScript.
<script>
(function detectarNavegador(navegador) {
if(navegador.indexOf("Chrome") != -1 ) {
$("html").addClass("chrome");
}
else if(navegador.indexOf("Opera") != -1 ) {
$("html").addClass("opera");
}
else if(navegador.indexOf("Firefox") != -1 ) {
$("html").addClass("firefox");
}
else if((navegador.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) {
$("html").addClass("ie");
}
else if(navegador.indexOf("Safari") != -1 ) {
$("html").addClass("safari");
}
else {
$("html").addClass("otronavegador");
}
})(navigator.userAgent);
</script>
Con eta función autoejecutable, agregaremos a la etiqueta <html> las clases .chrome .opera .firefox .ie .safari de forma dinámica en función del navegador en que nos encontremos.
Si queremos poner los párrafos de color verde en firefox simplemente tendríamos que añadir esta clase.
.firefox p {
color: green;
}
Si queréis ampliar vuestros conocimiento respecto a este tema os aconsejamos este artículo de la W3C
Entradas
No hay comentarios:
Publicar un comentario