Ya he comentado este tema en otras ocasiones, pero esta vez ampliaré el rango de navegadores a detectar, concretamente nos centraremos en Internet Explorer,  Firefox, Safari,  Opera, Konqueror, Chrome, iPod Touch, iPhone, Android (vale, estos tres no son navegadores, pero en estos casos me refiero a detectar el sistema operativo) o cualquier tipo de navegador para móvil.

En esta ocasión crearemos una función que acepte dos parámetros: el navegador que queremos buscar y la versión específica que buscamos (si es que buscamos alguna versión en especial). Para el primer parámetro, usaremos una serie de identificadores:

Sobre la versión del navegador, sólo nos centraremos en las versiones de Internet Explorer.

La función seguirá la siguiente estructura:

1. Cargamos en una variable el agente de usuario del visitante.
2. Mediante un bucle foreach determinamos en qué navegador buscamos.
3. Mediante la función strrpos comprobamos si el agente de usuario se corresponde con el del navegador que buscamos.
4. Sólo si buscamos Internet Explorer: Detectamos si se ha accedido con la versión que hemos establecido (si es que hemos establecido alguna versión).
5. Sólo si buscamos un navegador móvil: Buscamos alguno de los diversos agentes de usuario que tienen los diferentes navegadores para móviles.
6. Devolvemos el valor true si se ha detectado el navegador en cuestión y false si no se ha detectado, a través de una variable que tiene por defecto el valor false y sólo cambia a true al detectarse el navegador.

Finalmente todo esto traducido a PHP quedaría así:

	function is_browser($name, $version=”) {
		$user_agent = $_SERVER['HTTP_USER_AGENT']; // Cargamos el UserAgent en una variable
		$wtr = false; // Esta variable es la que indica si se ha accedido con el navegador que buscamos o no. Por defecto es false, sólo cambia si se accede con el navegador buscado
		$wtmb = ”; // Esta variable almacena el navegador del dispositivo móvil (sólo si buscamos un navegador de dispositivo móvil, esto no incluye ni Android ni iPod ni iPhone)
		// Primero veamos a quién buscamos y luego comprobemos si es él
		switch ($name) {
			// Caso Internet Explorer
			case ‘IE’:
				if (strrpos($user_agent, "MSIE") === false) {} else {
					if ($version != ”) {
						if (strrpos($user_agent, ‘MSIE ‘.$version) === false) {} else { $wtr = true; }
					} else {
						$wtr = true;
					}
				}
				break;
			// Caso Firefox
			case ‘FF’: if (strrpos($user_agent, "Firefox") === false) {} else { $wtr = true; } break;
			// Caso Opera
			case ‘OP’: if (strrpos($user_agent, "Opera") === false) {} else { $wtr = true; } break;
			// Caso Konqueror
			case ‘KQ’: if (strrpos($user_agent, "Konqueror") === false) {} else { $wtr = true; } break;
			// Caso Chrome
			case ‘CH’: if (strrpos($user_agent, "Chrome") === false) {} else { $wtr = true; } break;
			// Caso Safari
			case ‘SF’: if (strrpos($user_agent, "Safari") === false) {} else { $wtr = true; } break;
			// Caso iPod
			case ‘IPD’: if (strrpos($user_agent, "iPod") === false) {} else { $wtr = true; } break;
			// Caso iPhone
			case ‘IPH’: if (strrpos($user_agent, "iPhone") === false) {} else { $wtr = true; } break;
			// Caso iPod o iPhone
			case ‘IPO’:
				if (strrpos($user_agent, "iPod") === false) {} else { $wtr = true; }
				if (strrpos($user_agent, "iPhone") === false) {} else { $wtr = true; }
				break;
			// Caso Android
			case ‘AD’: if (strrpos($user_agent, "Android") === false) {} else { $wtr = true; } break;
			// Caso navegador móvil
			case ‘MB’:
				$mua = array(
					‘PIE4′ => ‘compatible; MSIE 4.01; Windows CE; PPC; 240×320′,
					‘PIE4_Smartphone’ => ‘compatible; MSIE 4.01; Windows CE; Smartphone;’,
					‘PIE6′ => ‘compatible; MSIE 6.0; Windows CE;’,
					‘Minimo’ => ‘Minimo’,
					‘OperaMini’ => ‘Minimo’,
					‘AvantGo’ => ‘AvantGo’,
					‘Plucker’ => ‘Plucker’,
					‘NetFront’ => ‘NetFront’,
					‘SonyEricsson’ => ‘SonyEricsson’,
					‘Nokia’ => ‘Nokia’,
					‘Motorola’ => ‘mot-’,
					‘BlackBerry’ => ‘BlackBerry’,
					‘WindowsMobile’ => ‘Windows CE’,
					‘PPC’ => ‘PPC’,
					‘PDA’ => ‘PDA’,
					‘Smartphone’ => ‘Smartphone’,
					‘Palm’ => ‘Palm’
				);
				foreach($mua as $nav => $ua){ if(strstr($user_agent, $ua) != false) { $wtmb = $nav; } }
				if ($wtmb != ”) { $wtr = true; }
				break;
			// Caso genérico
			default: $wtr = false; break;
		}
		return $wtr;
	}

Finalmente el uso es muy sencillo, basta con verificar el valor que devuelve la función, de modo que si buscamos, por ejemplo, a Opera, usaríamos el siguiente código:

if (is_browser(‘OP’)) {
/* Código específico para Opera */
} else {
/* Código para el resto de navegadores */
}

En todos los modos partiremos de un código CSS preestablecido (que deberéis añadir a vuestro CSS):

#usuarios-ie {
width:100%;
font-family:Verdana, Geneva, sans-serif;
background: #FFFFDE;
border-bottom:1px solid #666;
color:#000;
position:fixed;
top:0px;
left:0px;
z-index:999999;
}
#usuarios-ie p { font-size: 13px; margin: 0; padding:2px 10px; }
#usuarios-ie a  {text-decoration: underline; font-weight: bold; color: #D64411; }

Y también partiremos del mismo código HTML cada vez:

<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>

Usando HTML

Este método es el más fácil de implementar y consiste en utilizar un estilo CSS especial para Internet Explorer que muestre el cartel de aviso. Básicamente usaremos un comentario condicional que sólo analiza Internet Explorer y que nos permite distinguir cada versión de Internet Explorer. Este comentario, al ser código HTML, nos funcionará en cualquier servidor, sin necesidad de que tenga instalado PHP.

La estructura del comentario condicional es la siguiente:

<!–[if IE]>
Código especial para IE
<![endif]–>
<!–[if IE N]>
Código especial para IE, donde N es el número de la versión de Internet Explorer
<![endif]–>
<!–[if IE 6]>
Código especial para IE 6
<![endif]–>
<!–[if IE 7]>
Código especial para IE 7
<![endif]–>
<!–[if lt IE 6]>
Código espcial para versiones anteriores a IE 6
<![endif]–>
<!–[if lte IE 6]>
Código especial para versiones anteriores o iguales a IE 6
<![endif]–>
<!–[if gt IE 6]>
Código especial para versiones posteriores a IE 6
<![endif]–>
<!–[if gte IE 6]>
Código espcial para IE 6 y versiones posteriores
<![endif]–>

Como podréis imaginar, situaremos el código entre los comentarios condicionales, dependiendo de a quién queramos mostrarle el cartel. Si por ejemplo nos basta con IE6 y anteriores, usaremos el siguiente código:

<!–[if lte IE 6]>
<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>
<![endif]–>

Atención: Este método funciona debido a que el motor de renderizado de Internet Explorer (Trident) analiza estos comentarios, así que este método no funcionará alterando el User Agent del navegador con el que accedemos.

Usando PHP

Ahora sí que usaremos PHP, y por tanto necesitaremos un servidor capaz de ejecutarlo para poder detectar a Internet Explorer. Lo que haremos será leyendo el User Agent del navegador buscaremos la cadena identificatoria de Internet Explorer y si la encontramos, le daremos true al valor de la variable $ie.

Con este método podemos llegar a falsos positivos, ya que si el navegador con el que accedemos a la página tiene el User Agent cambiado por el de Internet Explorer, lo detectaremos como si de él se tratase.

El código PHP que usaremos será:

$user_agent = $_SERVER['HTTP_USER_AGENT'];
$posicion = strrpos($user_agent, "MSIE");
if ($posicion === false) {
$ie = false;
} else {
$ie = true;
}

Ahora basta con comprobar si $ie es true o false y actuar en consecuencia. El código necesario para hacerlo sería:

<?php if ($ie) { ?>
<div id="usuarios-ie"><p>El navegador que est&aacute;s utilizando no es recomendable para navegar en Internet.  Te recomiendo te cambies a <a href="http://www.mozilla.com" title="Firefox web browser">Firefox</a>, <a href="http://www.opera.com/" title="Opera Browser">Opera</a>, <a href="http://www.apple.com/es/safari/" title="Apple Safari">Safari</a> o <a href="http://www.google.com/chrome" title="Google Chrome">Google Chrome</a></p></div>
<?php } ?>

Con este código estaríamos detectando a Internet Explorer, sea cual sea su versión. Si queremos buscar una única versión, basta con modificar la cadena MSIE, por ejemplo, para buscar a IE6, utilizaríamos MSIE 6 en lugar de MSIE.

Lo malo de este método es que no podemos detectar a Internet Explorer 6 o inferiores, tan sólo a IE6 (o IE7, o IE8, etc).

Yo por mi parte a partir de ahora mostraré un cartel de aviso a los usuarios de Internet Explorer 6 o inferior en el blog, lo siento por los usuarios de IE6, pero hay alternativas mejores, multiplataforma y gratuitas, así que no veo motivo alguno para no cambiarse.

¿Por qué Microsoft ha tomado esta decisión? Pues para evitar que los procesos legales que hay entre los organismos antimonopolio de la UE (que están en contra de la integración de Internet Explorer 8 en Windows 7) hagan que se retrase la fecha de lanzamiento de Windows 7.

¿Cómo podrán navegar los usuarios? Microsoft les dará a los fabricantes un “IE8 Pack“, que al instalarse en el equipo hace que las ediciones de Windows 7 de la UE sean casi idénticas a las normales. Si los fabricantes prefieren instalar otro navegador, también podrán hacerlo.

Sinceramente, creo que es una solución muy radical, y que bastaría con que durante la instalación del sistema operativo te dejase elegir entre los navegadores más populares para instalarlo y usarlo por defecto. También pienso que muchos fabricantes optarán por usar el “IE8 Pack“, con lo que no se solucionará el problema de monopolio que quiere arreglar la UE.

Google ha presentado una nueva beta de Google Chrome, pero lamentablemente sólo para Windows, dejando de lado a los usuarios de Mac y de Linux.

Se puede descargar desde aquí (vía Anieto2k).

Por su parte, Microsoft ha completado la versión definitiva de la 8ª versión de Internet Explorer. Está disponible en español y tanto para Windows XP como para Windows Vista y sus correspondientes versiones de 64 bits.

Se puede descargar aquí (vía Genbeta).

Diseñar siguiendo los estándares es algo frustrante, ya que al completar el trabajo y “admirar” tu obra en Firefox, Opera, Safari o Google Chrome (entre otros), ves lo “maravillosamente bien” que queda, sin embargo al intentar verlo con IE ves una extraña página que sí, tiene colores parecidos a los que escogiste, pero no se parece en nada al original.

Dejando de lado el cachondeo, es una realidad que para Internet Explorer son necesarios algunos “trucos” para que la página se muestre bien.
Si estamos hartos de tener que hacer un CSS sólo para IE (y otro para IE 6) podemos optar por una solución diferente: mostrar un diseño diferente si el usuario entra con IE, y para esto usaremos PHP.

Objetivo del tutorial

Crearemos un diseño que si se accede con IE no mostrará los elementos que no son compatibles con él, y si se visita con otro navegador, sí se mostraran esos elementos.

A por el PHP

Comenzaremos creando una variable que contendrá el valor de $_SERVER['HTTP_USER_AGENT'], esto es opcional, pero es más cómo trabajar con una variable cuyo nombre es corto que con $_SERVER['HTTP_USER_AGENT'].

Usaremos la misma función que usamos en otro tutorial para detectar si existen los caracteres MSIE en la variable.

Si la variable contiene MSIE es porque el navegador es Internet Explorer.

Nota: Si contuviese Opera sería Opera (aunque no lo parezca ), si contuviese Chrome, Google Chrome, si contuviese Safari, Safari y si contuviese Firefox, pues Firefox.

Así que creamos otra variable que contendrá la posición de la cadena MSIE en la variable $user_agent (que hemos creado al principio del tutorial).

Si no está la cadena en la variable, la nueva variable tendrá por valor false, con lo que podemos establecer una condición sencilla:

Si la variable es false, no se ha entrado en la página con Internet Explorer, si por el contrario no es false, se está navegando con Internet Explorer.

En el caso de que sea false, crearemos una nueva variable: $ie, con el valor false (ya que no se está usando IE).
En el caso de que $posicion no sea false, creamos una la variable $ie, pero esta vez con valor true.

Dejando el siguiente código:

Nota 2: Puede que os preguntéis por qué creo otra variable si con $posicion ya sabemos si se usa IE o no. Es sencillo. $posicion almacena la posición de MSIE, si se navegase con Internet Explorer, $posicion no sería true, sino que sería 25 (en el caso de IE 7, en versiones anteriores puede ser otro número).

Bien, con esa variable creada podemos determinar si se usa IE o no de forma muy sencilla:

De esta forma podemos tener un diseño completamente distinto para Internet Explorer, o una versión muy modificada de nuestro diseño.