HTML5 - Modernizr

Modernizr è un piccolo JavaScript Library che rileva la disponibilità di implementazioni native per le tecnologie web di prossima generazione

Ci sono molte nuove funzionalità che vengono introdotte tramite HTML5 e CSS3, ma allo stesso tempo molti browser non supportano queste novità.

Modernizr fornisce un modo semplice per rilevare qualsiasi nuova funzionalità in modo da poter eseguire l'azione corrispondente. Ad esempio, se un browser non supporta la funzione video, ti piacerebbe visualizzare una semplice pagina.

È possibile creare regole CSS in base alla disponibilità della funzionalità e queste regole si applicherebbero automaticamente alla pagina Web se il browser non supporta una nuova funzionalità.

Puoi scaricare l'ultima versione di questa utility da Modernizr Download .

Sintassi

Prima di iniziare a utilizzare Modernizr, dovresti includere la sua libreria javascript nell'intestazione della tua pagina HTML come segue:

<script src="modernizr.min.js" type="text/javascript"></script>

Come accennato in precedenza, puoi creare regole CSS in base alla disponibilità delle funzionalità e queste regole si applicherebbero automaticamente alla pagina web se il browser non supporta una nuova funzionalità.

Di seguito è riportata la semplice sintassi per gestire le funzionalità supportate e non supportate:

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't show Audio options */
}
.audio #music button {
   /* Style the Play and Pause buttons nicely */
}

<!-- In your HTML: -->
<div id="music">
   
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

Qui è notevole che è necessario anteporre "no-" a ogni funzione / proprietà che si desidera gestire per il browser che non le supporta.

Di seguito è riportata la sintassi per rilevare una particolare funzionalità tramite Javascript:

if (Modernizr.audio) {
   /* properties for browsers that
   support audio */
}

else{
   /* properties for browsers that
   does not support audio */
}

Funzionalità rilevate da Modernizr

Di seguito è riportato l'elenco delle funzionalità che possono essere rilevate da Modernizr:

Caratteristica	Proprietà CSS	JavaScript Check
@ font-face	.fontface	Modernizr.fontface
Tela	.tela	Modernizr.canvas
Testo tela	.canvastext	Modernizr.canvastext
Audio HTML5	.Audio	Modernizr.audio
Formati audio HTML5	N / A	Modernizr.audio [formato]
Video HTML5	.video	Modernizr.video
Formati video HTML5	N / A	Modernizr.video [formato]
rgba ()	.rgba	Modernizr.rgba
hsla ()	.hsla	Modernizr.hsla
immagine di confine	.borderimage	Modernizr.borderimage
border-radius	.borderradius	Modernizr.borderradius
scatola-ombra	.boxshadow	Modernizr.boxshadow
Sfondi multipli	.multiplebgs	Modernizr.multiplebgs
opacità	.opacità	Modernizr.opacity
Animazioni CSS	.cssanimations	Modernizr.cssanimations
Colonne CSS	.csscolumns	Modernizr.csscolumns
Gradienti CSS	.cssgradients	Modernizr.cssgradients
Riflessioni CSS	.cssreflections	Modernizr.cssreflections
Trasformazioni CSS 2D	.csstransforms	Modernizr.csstransforms
Trasformazioni CSS 3D	.csstransforms3d	Modernizr.csstransforms3d
Transizioni CSS	.csstransitions	Modernizr.csstransitions
API di geolocalizzazione	.geolocalizzazione	Modernizr.geolocation
Tipi di input	N / A	Modernizr.inputtypes [tipo]
Attributi di input	N / A	Modernizr.input [attributo]
memoria locale	.memoria locale	Modernizr.localstorage
sessionStorage	.sessionstorage	Modernizr.sessionstorage
Web Workers	.webworkers	Modernizr.webworkers
applicationCache	.applicationcache	Modernizr.applicationcache
SVG	.svg	Modernizr.svg
Percorsi clip SVG	.svgclippaths	Modernizr.svgclippaths
SORRIDERE	.smil	Modernizr.smil
Database SQL Web	.websqldatabase	Modernizr.websqldatabase
IndexedDB	.indexeddb	Modernizr.indexeddb
Web Socket	.websockets	Modernizr.websockets
Evento Hashchange	.hashchange	Modernizr.hashchange
Gestione della storia	.historymanagement	Modernizr.historymanagement
Trascinare e rilasciare	.trascinare e rilasciare	Modernizr.draganddrop
Messaggistica cross-window	.crosswindowmessaging	Modernizr.crosswindowmessaging
API del plugin addTest ()	N / A	Modernizr.addTest (str, fn)