2009-11-01 11 views
11

estoy trabajando en algo de código de demostración de HTML5, incluyendo cosas como <input type="date" />Detección de soporte para HTML 5 características específicas a través de jQuery

Esta actualmente funciona correctamente en Opera 10 que está, pero cada otro navegador sólo muestra un texto normal entrada. Luego estoy usando un complemento jQuery.date-input para anular este comportamiento en navegadores que no lo admiten.

El problema es que - en funcionamiento del jQuery sobre el Opera, así que en Opera estoy recibiendo dos fecha-recolectores de calendario (uno desde el navegador, uno de jQuery)

puedo evitar esto por ahora usando if (window.opera) - pero ¿existe alguna forma de utilizar, por ejemplo, jQuery.support, que pueda detectar de forma fiable si el navegador actual admite o no una característica HTML5 concreta?

Respuesta

17

Me gustaría echar un vistazo a Modernizr. Es una biblioteca Javascript de código abierto, con licencia de MIT que detecta compatibilidad con muchas funciones de HTML5/CSS3 y es REALMENTE pequeña (7kb comprimida). Para usarlo, simplemente:

<script src="modernizr.min.js"></script> 

dentro del <head> de su documento. Después de eso, tiene una variedad de funciones para verificar lo que necesita. Ejemplo:

if (Modernizr.canvas) { 
    // do stuff 
} 

Hay muchas más maneras de verificar la característica específica de HTML5/CSS3 que le gustaría. Check out their website para obtenerlo y ver los documentos.

+0

esto funcionó en cierta medida, pero MSIE hace cosas incómodas cuando el tipo está configurado para algo que no puede entender. La solución de @bobince funciona mejor. –

11

Sí, la búsqueda de un navegador en particular no es lo que desea en absoluto. En ocasiones es útil para detectar cuándo se deben aplicar soluciones provisionales para los errores del navegador (generalmente con IE), pero si quiere saber si un navegador admite una característica, simplemente hállelo.

Algunas cosas son más fáciles de oler que otras. Para su ejemplo de data-input-support es muy fácil. La propiedad input.type le dice qué tipo de control cree que es el navegador; si las entradas de fecha no son compatibles, obtendrá 'text'.

<input type="date" class="dateinput" /> 

if ($('.dateinput')[0].type!=='date') { 
    $('.dateinput').addSomeDateScriptingPluginThing(); 
} 
Cuestiones relacionadas