Normalmente cuando tenemos una web terminada llega el momento fatídico de comprobarla en todos los navegadores posibles, solemos tenerle miedo a los móviles pero el tema del responsive es juego de niños comparado con la pesadilla de hacer tu web retrocompatible con navegadores más antiguos.
Una de las formas es utilizar los condicionales dentro del head
para la etiqueta <html>
, como por ejemplo:
<!--[if lt IE 7 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie8"> <![endif]--> <html xmlns="http://www.w3.org/1999/xhtml" lang="es_ES">
La sintaxis para esclarecer qué condicional utilizar según el navegador (if IE 7, por ejemplo) la podéis encontrar en librosweb.
De esta manera, en vuestra hoja de estilos podéis crear excepciones particulares ya que la etiqueta <html> tendrá una clase única según el navegador, en el CSS la excepción sería algo tal que así:
html.ie6 .contenedor {background:red;} html.ie7 .contenedor {background:green;}
Aunque la mejor manera, si tenemos que modificar muchos estilos, es utilizar esos condicionales para tener distintos CSS según el navegador, algo así:
<link href="css/estilos.css" rel="stylesheet" media="screen" type="text/css" /> <!--[if IE 8 ]> <link rel="stylesheet" href="css/estilos-ie8.css" type="text/css" media="screen" /> <![endif]-->
Al estar debajo de los estilos generales sobreescribirán (en condiciones normales, es decir, si no hay !important o estilos en línea) los estilos definidos en el CSS previo.