CSS adaptado al navegador con PHP

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.

Compartir:

4 Comments

  • 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!

  • 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.

  • Levante UD

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

Comments are closed for this post