Detectando el navegador con CSS

Tweet

Este es uno de los trucos CSS más interesantes que he visto en mucho tiempo, el truco nos permitirá mostrar un div u otro dependiendo del navegador que utilizemos o mejor dicho de si tuilizamos Internet Explorer o Mozilla y todo esto sin utilizar Javascript.

El truco está en una de las características de IE que es el no aceptar los comentarios formados por doble barra (//), por lo que cualquier cosa seguida por // lo entenderá como parte del código.
Ej:

// display: hidden;

Una buena combinación nos permitirá mostrar diferentes cosas dependiendo del navegador cómo en el siguiente ejemplo:

Para probarlo es muy sencillo si te ha salido el cuadro rojo es porque estas utilizando un navegador que no es IE cómo Mozilla o Opera.

Y si te ha salido el cuadro verde es porque estas utilizando Internet Explorer.

Código Fuente

Este la hoja de estilos necesarias para este pequeño truco (No necesita explicación)

#nonie, #iebased{
margin: auto;
margin-top: 20px;
width: 400px;
padding: 10px;
background-color: #f8e6e6;
border: 1px solid #d2a2a2;
//background-color: #dbecd3;
//border: 1px solid #b1d2a2;
}

#nonie{
//display: none;
}

#iebased{
display: none;
//display: visible;
}

… y estos los dos div que se obtendrían dependiendo del navegador:

<div id=”nonie”> Tu no estas utilizando Internet Explorer. </div>
<div id=”iebased”> Tu estas utilizando Internet Explorer. </div>

Programming-Designs

Enlaces Relacionados

Generar passwords accesibles con Php
Codigo Fuente del generador de passwords en PHP
Ejemplo de ejecución del script
PHP y MySql una estrecha relación
5 cosas que no sabías hacer con PHP
Generar documentos OpenOffice con PHP
Nueva versión de Notepad++
Hola Mundo!
Identificar las consultas más lentas de MySql
Crea sencillas gráficas con MySql
Programar un script PHP para saber quién está en línea
Consejos para optimizar PHP
Editando en Opera páginas web en tiempo real