aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Pese a que los nuevos navegadores ya van integrando las últimas funcionalidades DOM del estándar HTML5 aún es muy pronto para depender de ellas en nuestras aplicaciones web.

Por otro lado, podemos ir usándolas para enriquecerlas en los navegadores más avanzados, de esta forma estaremos ayudando a la implantación de estos sin dejar de lado a los usuarios que aún no han querido, o podido, actualizar su navegador principal.

En Dive into HTML5, son conscientes de ello y por este motivo nos muestran un recomendable artículo con el que mostrarnos la forma de detectar si estas funcionalidades están disponibles antes de usarlas (mediante el uso de Modernizr). De esta forma, podremos planificar un procedimiento alternativo para los navegadores que aún no dispongan de ellas.

Geolocation

Ya hemos visto otras veces esta funcionalidad, detectarla será tan sencillo como esto:

function supports_geolocation() {
 return !!navigator.geolocation;
}

if (supports_geolocation()){
 // Existe geolocation
} else {
 // No existe
}

Canvas

Otra propiedad a la que espera un gran futuro es el uso de <canvas /> como lienzo para pintar desde Javascript.

function supports_canvas() {
 return !!document.createElement('canvas').getContext;
}

if (supports_canvas()){
 // Existe canvas
} else {
 // No existe
}

HTML5 video

Detectar el tag <video /> nos permitirá usar flash en su lugar, aunque vimos una forma basada en HTML que nos ofrecerá mayor fiabilidad.

function supports_video() {
 return !!document.createElement('video').canPlayType;
}

if (supports_video()){
 // Existe video
} else {
 // No existe
}

Nuevos tipos de <input />

En HTML5 los <input /> cogen mucha relevancia y de los 10 tipos actuales:

button
checkbox
file
hidden
image
password
radio
reset
submit
text

No encontramos con que pasan a ser 20 tipos disponibles:

button
checkbox
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
submit
text
time
url
week

Por eso debemos podemos comprobar si estos están disponibles:

function supports_input_type(type) {
 var i = document.createElement("input");
 i.setAttribute("type", type);
 return !!(i.type !== "text");
}

if (supports_input_type('color')){
 // Existe <input type="color" />
} else {
 // No existe
}

Esta versión, está basada en la propuesta por Dive into HTML5, y permite comprobar si están disponibles los <input /> de un tipo concreto. Hay que remarcar que en caso de no existir dicho tipo de <input /> el navegador nos generará un <input type="text" /> en su lugar.