CSS y Javascript condicional. Página Web correcta en todos los navegadores

Cual es problema


De seguro que chocaste con este problema cuando hiciste tu primera página web, NO SE VE IGUAL EN TODOS LOS NAVEGADORES. Puede que en Firefox que para mí es mejor de los navegadores, se vea perfecto pues estuviste probando tu web solo con este navegador; pero cuando pruebas con el IE, no se ve igual.
Las respuesta a por qué no se ve igual es distintos navegadores es simple: todos los navegadores son hechos por empresas distintas, y todos no implementan bien los estándares o se inventan sus propios estándares sin contar con nadie, luego casi siempre estos inventos se ponen en la posteriores versiones del estándar HTML y XHTML.



CSS condicional

La solución entonces es conocer cómo funcionan las hojas de estilo según la interpretación que hace cada navegador y hacer una hoja de estilo y/o códigos javascript para cada tipo de navegador: algo como esto:

<link rel="stylesheet" href="base-style.css" type="text/css" />

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<[end if]-->

<!--[if FF]>
<link rel="stylesheet" href="ff.css" type="text/css" />
<[end if]-->

<!--[if Opera]>
<link rel="stylesheet" href="opera.css" type="text/css" />
<[end if]-->

<!--[if Safari]>
<link rel="stylesheet" href="safari.css" type="text/css" />
<[end if]-->

<!--[if Konqueror]>
<link rel="stylesheet" href="konquerer.css" type="text/css" />
<[end if]-->

<!--[if iCab]>
<link rel="stylesheet" href="icab.css" type="text/css" />
<[end if]-->

<!--[if Flock]>
<link rel="stylesheet" href="flock.css" type="text/css" />
<[end if]-->

Aquí lo que estamos haciendo es poner en cometario una condición encerrada entre corchetes , de modo el código de abajo significa que si el navegador utilizado por el cliente es Internet Explorer (en cualquier versión) entonces la hoja de estilo cargada es: ie.css

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<[end if]-->

Abreviaturas para navegadores

Igual para los demás navegadores las abreviaturas utilizadas son las siguientes:


FF => Firefox en cualquier versión
IE => Internet Explorer en cualquier versión
Opera => Opera en cualquier versión
Safari => Safari en cualquier versión
Konqueror => Konqueror en cualquier versión
iCab => iCab en cualquier versión (navegador propietario para Mac OS)



Versiones de navegadores

Qué pasa si queremos diferenciar entre versiones del navegador , que también tienen sus diferencias sustanciales , como es el caso en IE , donde Internet Explorer 6 (casi en de la era de palo para las páginas actuales ) tiene una muy diferente implementación de la versiones posteriores.

<!--[if IE 5.5]>
[Aquí va nuestro código]
<![endif]-->
<!--[if IE 6]>
[Aquí va nuestro código]
<![endif]-->

Simplemente se coloca la versión en la condición [if IE 5.5]


Operadores a usar en las condiciones

Si desea que el CSS se cargue cuando una versión sea inferior o superior a otra debe hacerlo de la siguiente manera:

<!--[if gt IE 5.5]>
[Esto se mostrará a versiones posteriores a  IE 5.5. "gt" = mayor que]
<![endif]-->
<!--[if gte IE 5.5]>
[Esto se mostrará a IE 5.5 y versiones posteriores. "gte" = mayor que o igual]
<![endif]-->
<!--[if lt IE 6]>
[Esto se mostrará a  versiones anteriores a IE 6. "lt" = menor que]
<![endif]-->
<!--[if lte IE 6]>
[Esto se mostrará a IE 6 y versiones anteriores. "lte" = menor que o igual]
<![endif]-->

En resumen estas son las sintaxis que se pueden usar:

lt – Menor que
lte – Menor o igual
eq – Igual
gte – Mayor o igual
gt – Mayor que


El operador negación (!)

<!--[if  !IE]>
   Si no está usando el IE  
<![endif]-->

Javascript condicional

Con Javascript se puede hacer exactamente lo mismo:

<!--[if IE 6]>
<SCRIPT>
    alert("Esto es Internet Explorer 6");
</SCRIPT>
<![endif]-->

<!--[if IE 7]>
<SCRIPT>
    alert("Esto es Internet Explorer 7");
</SCRIPT>
<![endif]-->

<!--[if FF]>
<SCRIPT>
    alert("Esto es Firefox");
</SCRIPT>
<![endif]-->

Como usar la sintaxis condicional en documentos CSS

Se hace de igual forma solo que no se coloca entre comentarios HTML

#header {  
heigth: 200px;  
[if IE 6] heigth: 300px;  
}  

En este ejemplo se arriba hemos cambiado el alto de una etiqueta con ID header en cualquier navegador tiene 200 pixel ; pero en IE tiene 300.



También se pueden importar CSS distintos desde un documento CSS:

 
 [if IE] @import('ie.css');  
 [if FF] @import('ff.css'); 
 

CSS condicionales a nivel código del lado del servidor (Ejemplo con PHP)

En PHP con la variable Global: $_SERVER se puede obtener datos del navegador que hizo la petición, uno de estos datos es el tipo de agente , que se obtiene de la siguiente manera : $cliente = $_SERVER["HTTP_USER_AGENT"] ;
Luego teniendo el cliente se puede poner condicionalmente lo que se desee:

$cliente  = $_SERVER["HTTP_USER_AGENT"] ;
$firefox = strops($cliente  , \'Firefox\') ? true : false;
$safari = strpos($cliente  ,\'Safari\') ? true : false; 
$chrome = strpos($cliente  ,\'Chrome\') ? true : false;

if($firefox )
echo ‘<link rel="stylesheet" href="ff.css" type="text/css" />’;
else
if($safari)
echo ‘<link rel="stylesheet" href="safari.css" type="text/css" />’;

En próximos artículos ampliaremos sobre casos particulares de problemas comunes en navegadores y soluciones para los mismos.