Blog what I write

CSS adaptado al navegador con PHP

post - - 4 replies -

Tener diferentes hojas de estilo dependiendo del navegador me parece algo horrible 馃檨 .聽 Pero si por alg煤n motivo es necesario, podemos emplear una forma bastante f谩cil y limpia mediante PHP (Ref. Andrew Martin).

Para ello, (1) pondremos un CSS base que sea compatible para todos los navegadores y a continuaci贸n (2) haremos uso del array $_SERVER y del campo donde se cargan las cabeceras con informaci贸n del navegador del usuario “HTTP_USER_AGENT”.

1. C贸digo CSS base:

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

2. C贸digo PHP:

$browser = $_SERVER['HTTP_USER_AGENT'];	
if (preg_match('/MSIE.8/i', $browser)) { echo ''; } 
elseif (preg_match('/MSIE.7/i', $browser)) { echo ''; }
elseif (preg_match('/MSIE.6/i', $browser)) { echo ''; }
elseif (preg_match('/MSIE.9/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.2/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.3.5/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.3/i', $browser)) { echo ''; }
elseif (preg_match('/Chrome/i', $browser)) { echo ''; }
elseif (preg_match('/Safari/i', $browser)) { echo ''; }
elseif (preg_match('/Opera/i', $browser)) { echo ''; }
else { echo ''; }

El c贸digo escribir谩 el link con la hoja de estilo correspondiente al navegador empleado por el usuario bas谩ndose en la comparaci贸n de cadenas.

Si lo que queremos es 煤nicamente discernir la versi贸n de MSIE, podemos tambi茅n recurrir a los comentarios condicionales de Internet Explorer.

Para hacer las pruebas necesarias con los diferentes navegadores, podemos descargarlos o emularlos.

  • Para emular cabeceras, si os gusta usar Firefox, existe un complemento muy conocido entre los que trabajamos para m贸viles que es User Agent Switcher, https://addons.mozilla.org/en-US/firefox/addon/59/ que precisamente nos permite que firefox mande los headers que deseemos, e incluso tenerlos gestionados para cambiar de uno a otro f谩cilmente.

    Cuando se usa para desarrollo m贸vil, hay que tener en cuenta que lo que hace simplemente es mandar unas cabeceras distintas, no emula el navegador del terminal en cuesti贸n, obviamente. Pero para probar sistemas de detecci贸n de dispositivo de forma r谩pida viene genial 馃檪

    Saludos!

    • Que buen reporter Marcos, lo desconocia. Muchas gracias 馃檪

  • Hola, a m铆 me va bastante bien con Safari, lo recomiendo mucho.
    Tienes una larga lista de User Agents diferentes como Safari (Mac, Windows, iPod, iPhone), Firefox, IEs y Opera, adem谩s de poder a帽adir otros definidos por el usuario y hace el cambio din谩micamente entre ellos. La verdad es que la barra de desarrollo web que tiene est谩 muy completa con lo que puedes depurar muy c贸modamente todo el tema de CSS y dem谩s.

  • Menos mal que esto va a cambiar con la llegada de HTML5 y CSS3