2009-11-01 10 views
11

Sto lavorando su un codice demo HTML5, tra cui cose come <input type="date" />Rilevamento di supporto per la specifica HTML 5 caratteristiche tramite jQuery

Questo attualmente funziona correttamente in Opera 10 così com'è, ma ogni altro browser solo visualizza un testo normale ingresso. Sto quindi utilizzando un plugin di input jQuery.date per sovrascrivere questo comportamento sui browser che non lo supportano.

Il problema è - in esecuzione del jQuery su Opera e, in modo in Opera sto ottenendo due di calendario di data-raccoglitori (uno dal browser, uno da jQuery)

posso ovviare a questo, per ora utilizzando if (window.opera) - ma c'è un modo per utilizzare, ad esempio, jQuery.support, che posso rilevare in modo affidabile se il browser corrente supporta o meno una particolare funzionalità HTML5?

risposta

17

Vorrei dare un'occhiata a Modernizr. È una libreria Javascript open source, con licenza MIT che rileva il supporto per molte funzionalità HTML5/CSS3 ed è REALMENTE minuscola (7kb compressa). Per utilizzarlo, è sufficiente:

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

All'interno del <head> del documento. Dopo di ciò, ha una varietà di funzioni per verificare ciò di cui hai bisogno. Esempio:

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

Ci sono molti altri modi per verificare la funzionalità specifica di HTML5/CSS3 che desideri. Check out their website per scaricarlo e consultare i documenti.

+0

questo ha funzionato in qualche modo, ma MSIE fa cose scomode quando il tipo è impostato su qualcosa che non può capire. La soluzione di @bobince funziona meglio. –

11

Sì, cercare un browser particolare non è quello che vuoi. È occasionalmente utile per rilevare quando è necessario applicare soluzioni alternative per i bug del browser (in genere con IE), ma se si desidera sapere se un browser supporta una funzione, basta annusarla.

Alcune cose sono più facili da annusare di altre. Per il tuo esempio di supporto input per data è molto semplice. La proprietà input.type ti dice quale tipo di controllo il browser pensa che sia; se gli input di data non sono supportati riceverai 'text'.

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

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