f CSS específicos para cada navegador - El Maquetador Web, Maquetación Freelance, Curso HTML HTML5 CSS Tutorial Diseño Responsive Adaptable

¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

10.4.15

CSS específicos para cada navegador

Uno de los quebraderos de cabeza que nos podemos encontrar a la hora de maquetar una web son las diferencias entre navegadores a la hora de renderizar las páginas. A veces no tendremos otra opción que añadir clases específicas para algún navegador, e incluso si hablamos de Internet Explorer vamos a tener que añadir clases específicas para determinadas versiones.

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

No hay comentarios:

Publicar un comentario