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 navegador 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" />';
}
?>

5 thoughts on “CSS condicionado por navegador en distintos lenguajes”

  1. Con respecto a los comentarios condicionales, en lo personal nunca he escuchado (o más bien, leído) que existan para todos los navegadores; lo que sí se que existe (y quizás esto podría provocar confusión) son dos tipos de comentarios condicionales para MSIE: uno de estos tipos es el que ejemplificaste acá, es lo que podríamos llamar el comentario condicional “clásico” (o, de acuerdo a la documentación de MS, “hidden”), y los comentarios “revealed”, que de hecho revelan información a los navegadores que no soportan comentarios condicionales… o sea, todos menos MSIE. Por ejemplo:
    <![if lt IE 5]>
    <p>Please upgrade to Internet Explorer version 5.</p>
    <![endif]>

    Pero eso rompe la validación, por lo que la alternativa es poner algo así:

    <!–[if !IE]>–> HTML <!–<![endif]–>

    que de hecho es un comentario “hidden” pero como está en negativo, lo que causa efectivamente es que todos los navegadores menos MSIE procesan el código.

    De todos modos, considerando que generalmente los comentarios condicionales se usan para enviar hojas de estilo específicas para MSIE 6, me parece más práctico recurrir a algo como esto: http://dean.edwards.name/IE7/

    ;)

  2. Gracias por el código! Lo usaré y lo usaré y hará felices a muchas personas.
    (si quieres borra esto, se parece más a un mail) Te mando muchos saludos! Y espero que lo estés pasando bien!

    1. Hola tati,
      $_SERVER es una variable predefinida dentro de PHP, al igual que $_GET, $_POST o $_REQUEST.
      Si quieres condicionar sólo para IE7, debes detectar esa referencia dentro de la información que entrega $_SERVER[“HTTP_USER_AGENT”] :
      if(stristr($_SERVER[“HTTP_USER_AGENT”], ‘MSIE 7′)){
      echo ‘Esto es IE 7′;
      }

      Saludos,
      Basilio

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>