Isotipo

27/2 - 2008 ajax - programación - xhtml

CSS condicionado por navegador en distintos lenguajes

Una amiga me hizo esta pregunta en un mail ayer, así que esto fue lo que le conteste

HTML

Es una buena opción si estás trabajando sólo con documentos HTML. Aunque se dice que se pueden ocupar condiciones para todos los navegadores, la verdad es que nunca he conseguido aplicarla para otros agentes que no sean IE6 o IE7

<!--[if IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

JAVASCRIPT

Trabajando con la variable navigator se pueden obtener datos como el agente del usuario (userAgent) o el nombre de la aplicación (appName) que estemos usando. Sin embargo, no es 100% accesible, ya que no funciona si se tiene el javascript del navegaor desactivado.

<script type="text/javascritp>
if(navigator.userAgent.match("MSIE 6")) {
     document.write('<link href="css/ie6.css" rel="stylesheet" type="text/css" />');
}
if(navigator.userAgent.match("Firefox")) {
     document.write('<link href="css/firefox.css" rel="stylesheet" type="text/css" />');
}
</script>

PHP

Perfecta si se esta trabajando en este lenguaje porque es más segura y accesible que la opción en JS. Además de obtener similares datos que la opción en JS

<?php
if(stristr($_SERVER["HTTP_USER_AGENT"]),"firefox") {
     echo '<link href="css/firefox.css" rel="stylesheet" type="text/css" />';
}

if(stristr($_SERVER["HTTP_USER_AGENT"]),"firefox") {
     echo '<link href="css/firefox.css" rel="stylesheet" type="text/css" />';
}
?>