Modernizr: CSS3 ed HTML5 in maniera semplice


Una delle principali pecche del Web, è che l’innovazione spesso non è implementata a causa della difficoltà che trovano i Web designer quando progettano un sito e lo vogliono rendere cross-browser.logo Modernizr libreria JavaScript per l'uso di CSS3 ed HTML5
Tanto per fare un esempio, ancora oggi, oltre il 7% dei visitatori di questo blog, utilizza Internet Explorer 6. Realizzare un sito Web con in mente i nuovi standard CSS3 ed HTML 5, significa dover tenere conto anche di questi visitatori.

Spesso si tratta di un utenti che per forza di cose non possono aggiornare il proprio browser.
Per venire incontro alle nuove tecnologie Web, Faruk Ates e Paul Irish, il primo olandese, ed il secondo americano, hanno realizzato Modernizr.

Si tratta di una libreria JavaScript che aiuta i designer a realizzare i progetti, per intenderci, Modernizr va a verificare se il browser del nostro visitatore supporta una determinata proprietà CSS3 che vorremmo realizzare, quindi, in caso di esito positivo, applica tale proprietà.

Nel caso in cui tale proprietà non è supportata, allora Modernizr applicherà una classe alternativa che abbiamo definito nelle foglie stile.
Modernizr è una libreria JavaScript che si siamo designer ci aiuta a realizzare i nostri progetti. In base al browser con cui l’utente sta navigando, Modernizr applica una determinata classe o meno.

Modernizr quindi non va ad aggiungere funzionalità al browser, piuttosto, determina quali sono le funzionalità disponibili, ed offre al web designer la possibilità di controllare finemente la resa del sito.
Modernizr  quello utilizzato da una miriade di siti Web, tanto per citarne uno è utilizzato da twitter.

Quali sono le proprietà che supporta Modernizr?

L’ultima versione di Modernizr, la 1.6 al momento, determina le proprietà:

  • @font-face
  • Canvas
  • Canvas Text
  • HTML5 Audio
  • HTML5 Video
  • rgba()
  • hsla()
  • border-image:
  • border-radius:
  • box-shadow:
  • text-shadow:
  • opacity:
  • Multiple backgrounds
  • Flexible Box Model
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS 2D Transforms
  • CSS 3D Transforms
  • CSS Transitions
  • Geolocation API
  • localStorage
  • sessionStorage
  • SVG
  • SMIL
  • SVG Clipping
  • Inline SVG
  • Drag and Drop
  • hashchange
  • X-window Messaging
  • History Management
  • applicationCache
  • Touch events
  • Web Sockets
  • Web Workers
  • Web SQL Database
  • WebGL
  • IndexedDB
  • Input Types†
  • Input Attributes‡

Lascia un Commento!