Modernizr: rilevare le feature CSS3 e HTML5 del browser

Modernizr: rilevare le feature CSS3 e HTML5 del browser

La libreria Javascript Modernizr è stata sviluppata per permettere agli sviluppatori di poter rilevare le caratteristiche CSS3 e HTML5 supportate dal browser dell'utente di una Web Application. Se inseriamo lo script Modernizr nella nostra pagina web, questo individua se il browser corrente supporta le feature di CSS3 come @font-face, border-radius, border-image, box-shadow, rgba() e così via, così come le feature di HTML5 come audio, video, localStorage ed i nuovi tipi e attributi dell'elemento .

HTML5 Geolocation: la geolocalizzazione tramite browser
HTML5 video: inserire video nelle pagine HTML
HTML5 Forms: i nuovi attributi dell’input element

La libreria Javascript Modernizr è stata sviluppata per permettere agli sviluppatori di poter rilevare le caratteristiche CSS3 e HTML5 supportate dal browser dell’utente di una Web Application. Se inseriamo lo script Modernizr nella nostra pagina web, questo individua se il browser corrente supporta le feature di CSS3 come @font-face, border-radius, border-image, box-shadow, rgba() e così via, così come le feature di HTML5 come audio, video, localStorage ed i nuovi tipi e attributi dell’elemento <input>.

Per ottenere questo risultato Modernizer utilizza una tecnica basata su 3 passi:

  1. effettua dei test per verificare se il browser supporta o meno le proprietà CSS3 e HTML5 (per l’elenco completo si rimanda al sito www.modernizr.com);
  2. viene creato un oggetto Javascript che per ogni test effettuato, conserva una proprietà col valore false o true;
  3. aggiunge all’interno del tag html le proprietà CSS supportate dal browser corrente.

Ad esempio per Firefox, Modernizer aggiunge queste classi al tag <html>:

<html class="js flexbox canvas canvastext no-webgl no-touch geolocation postmessage
no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba
hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity
no-cssanimations csscolumns cssgradients no-cssreflections csstransforms
no-csstransforms3d no-csstransitions fontface video audio localstorage
sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths"/>

In questo modo lo sviluppatore può implementare le classi CSS seguendo una particolare convenzione, cioè sviluppa per ogni proprietà che vuole supportare due classi CSS seguendo questa sintassi:

  • .property .class-tag { * Questa property è supportata e viene applicata questa regola*};
  • .no-property .class-tag { * Questa property non è supportata e viene applicata questa regola*}.

Così facendo se una proprietà è supportata viene applicata la regola contenuta in .property .class-tag altrimenti viene utilizzata quella contenuta in .no-property .class-tag.

Per prima cosa, scarichiamo l’ultima release stabile all’indirizzo www.modernizr.com, dove potete anche trovare la lista completa delle feature che è in grado di rilevare. Ottenuta l’ultima versione, la 1.6 nel momento in cui sto scrivendo questo post, inseriamola nella sezione <head> della nostra pagina:

<head>
<title>Esempi con la libreria Modernizr</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="modernizr-1.6.min.js">
</head>

creiamo poi delle regole CSS che abbiano come prefisso la proprietà che vogliamo sfruttare nel nostro file html, ad esempio vogliamo creare dei bordi arrotondati per una determinata classe di div:

/* Modernizr border-radius */
.borderradius .content  {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.no-borderradius .content {
background: url(background.png) no-repeat;
}

Con questo codice CSS abbiamo definito dei bordi arrotondati per tutti gli elementi di classe .content (essendo tutti gli elementi all’interno del tag <html> avranno tutti anche la classe .borderradius). Siccome i browser non implementano tutti con lo stesso codice questa proprietà (Firefox usa -moz-border, mentre Safari e Chrome usano -webkit-border) inseriamo anche queste regole custom.

Se un browser non utilizza questa proprietà (come Internet Explorer almeno fino alla versione 8), utilizziamo una immagine di sfondo che ha dei bordi arrotondati.

Riporto ora un esempio che mostra come definire diversi tipi di proprietà

<html lang="it">
<head>
<title>Esempi con la libreria Modernizr</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="modernizr-1.6.min.js"></script>
<style type="text/css">
body {
background-color: #f3f3ff;
color: black;
margin: 20px;
padding: 30px;
}
div {
width: 200px;
height: 150px;
margin: 40px;
}
div p {
padding: 20px;
}
/* Modernizr border-radius */
.borderradius .content  {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.no-borderradius .content {
background: url(background.png) no-repeat;
}
/* Modernizr boxshadow */
.boxshadow .content {
border: none;
box-shadow: #000 5px 5px 5px;
-moz-box-shadow: #000 5px 5px 5px;
-webkit-box-shadow: #000 5px 5px 5px;
}
.no-borderradius .content {
background: url(background.png) no-repeat;
}
/* Modernizr font-face */
@font-face {
src: url(wds052801.ttf);
font-family: "Disney";
}
.fontface h1 {
font: 42px/50px Disney;
text-shadow: none;
}
.no-fontface h1{
font: 42px/50px  "Book Antiqua", Georgia, serif;
}
/* Modernizr rgba */
.rgba div {
background-color: rgba(100,100,100,.1);
}
.no-rgba div {
background-color: #f3f3ff;
}
.cssgradients div {
background: #ccc -webkit-gradient(linear, left top, right top, color-stop(0, #0000ff), color-stop(1, #ffffff));
background: #ccc -moz-linear-gradient(left, blue, white);
}
</style>
</head>
<body>
<h1>Esempi con la libreria Modernizr</h1>
<div class="content"><p>Questo esempio è ottenuto utilizzando la libreria Modernizr, agendo sulle proprietà borderradius, boxshadow, font-face e rgba.</p></div>
</body>
</html>

Per vedere lo script all’opera basta visualizzare la pagina al link qui sotto:

https://www.appuntisoftware.it/codeexamples/modernizr/modernizertest.html

COMMENTS

WORDPRESS: 0