Hace tiempo que conozco Modernizr, pero nunca había escrito sobre esta librería de Javascript que nos permite adaptar la página al navegador del visitante.

Básicamente lo que hace es comprobar si el navegador soporta ciertas características (que podemos indicar nosotros en la página de descarga, añadir en base a eso ciertas clases a nuestro <html>, y almacenarlo en un objeto js.

Por ejemplo, si en nuestro modernizr hemos puesto que compruebe si el navegador soporta la propiedad box-shadow, podríamos poner en nuestro CSS algo así:


.box-shadow .sombra {
/*Para navegadores que soportan la propiedad*/
-webkit-box-shadow: 1px 1px #eee;
-moz-box-shadow: 1px 1px #eee;
box-shadow: 1px 1px #eee;
}
.no-box-shadow .sombra {
/*Para los que no la soportan usaremos un borde*/
border: 1px solid #eee;
}

Cómo usarlo

Para usarlo sólo hay que ir a la página de descarga, seleccionar nuestras opciones, darle a descargar y guardarlo en algún hosting propio, o en lugares como dropbox.

Después sólo habría que referenciarlo entre <head> y </head> así:


<script src="URL DEL SCRIPT"></script>

Modernizr no sólo sirve para eso: Prepara el documento para poder usar HTML5 en navegadores antiguos, tiene utilidades para cargar archivos condicionalmente, etc. Son ciertas utilidades de las que quiero hablar más adelante.

2 pensamientos en “Modernizr: Comprobando las capacidades del navegador

  1. CSS3: Lo que está por venir | Emilio Cobos-CMC
  2. Polyfill para input type time – TimePikr | Emilio Cobos-CMC

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.