HTML 5 es la nueva generación de HTML que provee nuevas funcionalidades para aplicaciones web modernas y estandariza características existentes. Modernizr es una librería que detecta el soporte de las funcionalidades de HTML5 y CSS en los navegadores y provee propiedades booleanas que indican dicho soporte.

1. HTML 5

2. ◦ Nueva generación de HTML.
◦ Provee nuevas funcionalidades necesarias
para las aplicaciones web modernas.
◦ Estandariza funcionalidades de la plataforma
web que se han utilizado durante mucho
tiempo pero que no estaban documentadas
oficialmente (estándares de facto).

3.  No existe la noción de “soporte” completo de
HTML5 en los navegadores.
 Se pueden detectar individualmente las
funcionalidades soportadas, por ejemplo:
canvas, vídeo o geolocalización.
 Para detectar si un navegador soporta una
funcionalidad determinada hay que examinar el
DOM.

4.  Librería de detección:
◦ http://www.modernizr.com/
 Librería open source que detecta el soporte de muchas
funcionalidades de HTML5 y CSS.
 Provee una serie de propiedades booleanas que informan del
soporte de cada funcionalidad.
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
 Pruebasprueba1.html

5.  El elemento <canvas> es un rectángulo en la
página en el que se puede dibujar utilizando
Javascript.
 El API canvas permite utilizar las
funcionalidades del elemento <canvas>
 El soporte del API canvas se puede detectar a
través de la propiedad Modernizr.canvas.

6.  Existe un API “canvas text”, que puede no estar
soportado aunque sí se soporte el API
“canvas”.permite utilizar las funcionalidades del
elemento <canvas>.
 El soporte del API “canvas text” se puede
detectar a través de la propiedad
Modernizr.canvastext.

7.  El elemento <video> sirve para embeber vídeo
en la página web.
 Se pueden introducir vídeos de diversos
formatos.
 Los navegadores que no cuenten con el
elemento <video> lo ignorarán.
 El soporte del elemento <video> se puede
detectar a través de la propiedad
Modernizr.video.

8.  Aunque soporten el elemento <video> los
navegadores no soportan todos los formatos
existentes (codecs).
 Para detectar el soporte de un formato
específico se puede utilizar este código:
if (Modernizr.video) {
// let's play some video! but what kind?
if (Modernizr.video.ogg) {
// try Ogg Theora + Vorbis in an Ogg container
} else if (Modernizr.video.h264){
// try H.264 video + AAC audio in an MP4 container
}

9.  Permite que los sitios web almacenen información
en el ordenador local para su posterior
recuperación.
 Para detectar el soporte de almacenamiento local se
puede utilizar este código:
if (Modernizr.localstorage) {
// window.localStorage is available!
} else {
// no native support for local storage :(
// maybe try Gears or another third-party solution
}

10.  Permite a los navegadores ejecutar código JS en
segundo plano y lanzar múltiples threads de
ejecución.
 Para detectar el soporte de web workers o se
puede utilizar este código:
if (Modernizr.webworkers) {
// window.Worker is available!
} else {
// no native support for web workers :(
// maybe try Gears or another third-party solution
}

11.  Permite que una aplicación web pueda funcionar
desconectada del servidor web. Posteriormente
cuando se vuelve a conectar los cambios realizados
se actualizan en el servidor remoto.
 Para detectar el soporte de aplicaciones web off line
se puede utilizar este código:
if (Modernizr.applicationcache) {
// window.applicationCache is available!
} else {
// no native support for offline :(
// maybe try Gears or another third-party solution
}

12.  Permite detectar la posición propia en el mundo
y opcionalmente compartir esa información con
otra gente.
 Para detectar el soporte geolocalización se
puede utilizar este código:
if (Modernizr.geolocation) {
// let's find out where you are!
} else {
// no native geolocation support available :(
// maybe try Gears or another third-party solution
}

13.  Se define más de una docena de tipos de
entradas que se pueden utilizar en los forms.
 <input type="search"> (search boxes)
 <input type="number"> (spinboxes)
 <input type="range"> (sliders)
 <input type="color">(color pickers)
 <input type="tel">(telephone numbers)
 <input type="url">(web addresses)
 <input type="email">(email addresses)
 <input type="date">(calendar date pickers)
 <input type="month">(months)
 <input type="week">(weeks)
 <input type="time">(timestamps)
 <input type="datetime">(precise, absolute date/timestamps)
 <input type="datetime-local">(local dates and times)

14.  Para detectar el soporte de una entrada de
datos se puede utilizar el siguiente código:
if (!Modernizr.inputtypes.date) {
// no native support for <input type="date"> :(
// maybe build one yourself with
// Dojo
// or jQueryUI
}

15.  Permite definir un texto en un campo de entrada de
datos que aparece cuando el campo está vacío y
fuera del foto. Ese texto desaparece en el momento
en que se entra al campo.
 Para detectar el soporte de texto placeholder se
puede utilizar este código:
if (Modernizr.input.placeholder) {
// your placeholder text should already be visible!
} else {
// no placeholder support :(
// fall back to a scripted solution
}