Blog

opciones para comprobar la version del navegador

Al rebufo de nuestro anterior post, en el que hablábamos de diferentes opciones para comprobar la visualización final de nuestro proyecto web en el niño rarito de la clase Internet Explorer, me he decidido a hacer otro pequeño post donde hablaros un poco de todo este tema que tiene que ver con la visualización de contenidos; concretamente con comprobar la version del navegador.

En próximos post ya ahondaré en las oscuras aguas de «por qué alguien querría usar contenido dependiendo del navegador», pero de momento vamos a lo práctico.

Yo os cuento todas las opciones que conozco para hacerlo, y ya según cada caso podréis aplicar el que más os convenga. Bueno, o podéis usarlo todo, a fin de cuentas esto es como los Pokemon, que a uno le gusta coleccionar «todo» de algo.

Comentarios condicionales

Si nos encontramos en la triste pero normal situación en que nuestros usuarios acceden desde diferentes tipos de navegadores, una de las opciones que más pueden convenirnos es el uso de los (tachán tachán) comentarios condicionales. Los introdujo microsoft en la versión 5 de su castaña internet explorer con la sana intención de mostrar u ocultar trozos de código, scripts, applets o el scooter del vecino.

La sintaxis es bastante sencilla, usa los operadores lógicos al uso tal y como podéis ver en la tabla que he racaneado de por las wikipedias:

Elemento Ejemplo Comentario
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.
IE [if IE] The string «IE» is a feature corresponding to the version of Internet Explorer used to view the Web page.
value [if IE 7] An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version.
WindowsEdition [if WindowsEdition] Internet Explorer 8 on Windows 7. The string «WindowsEdition» is a feature corresponding to the edition of Microsoft Windows used to view the Web page.
value [if WindowsEdition 1] An integer corresponding to the edition of Windows used to view the Web page. Returns a Boolean value of true if the value matches the edition being used. For information about supported values and the editions they describe, see the pdwReturnedProductType parameter of the GetProductInfo function.
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

Y con esto mas o menos podemos reapañar todas las situaciones en las que la discriminación está entre «es o no IE», o «es tal o cual versión de IE». Por lo que, hay otras circunstancias en las que no nos será suficiente. Por ejemplo, si tenemos que valorar entre varios navegadores al mismo tiempo. ¿Qué hacer entonces? Pues depende. Si lo que necesitamos es mostrar un mensajito y poco más, nos bastará con hacer un apaño a través de css, tal como os cuento a continuación:

@-moz-document url-prefix(){

#mensajito{ display: block; }

}

Aquí especificamos que, si el explorador es mozilla, entonces nos muestre el #mensajito (Que presuponemos que está previamente en display:none).

Pero el zorrito no es el único chico aplicado de la clase (Para fortuna nuestra), sino que de hecho hay otros cuantos navegadores que demuestran tener estudios a base de webkits:

@media screen and(-webkit-min-device-pixel-ratio:0{

#mensajito{ display: block; }

}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){

#mensajito{ display: block; }

}

El primero, para chrome, safari y derivados. El segundo, para opera.

Si sólo mostramos nuestro mensajito, hasta aquí habrá bastado. Pero muchas veces, necesitaremos hacer algo más. Y en esos casos, tenemos que tirar de otras opciones.

Detectar el navegador con javascript

Tal como podéis leer en esta fuente, hay una manera bastante práctica que es mediante el uso del objeto navigator. Detectándolo, ya podemos hacer todas las manipulaciones que creamos oportunas. Ejemplo literal:

Detectar el navegador con php

Nuestro bienamado php tiene un utilísimo recurso que son las variables globales. Para nuestra tarea actual tenemos una muy muy concreta llamada $_SERVER[«http_user_agent»]. Una prueba de lo mas tontaca pasa por imprimir su contenido con un echo.

Con un poco de tiempo y ganas podemos hacer maravillas, tal y como podéis ver en este otro post, en el que ahondan en el uso de varias funciones específicas para tratar de hacer algo semejante a lo que andamos buscando en php.

Volver arriba