Documentazione

Piccolo plugin javascript, dipendente da Modernizr, che categorizza i browser in "zone" basate sul supporto o meno di alcune proprietà css.

Vedi su github

Introduzione

Lo scopo principale è individuare i browser con problemi di visualizzazione tali da poter rendere incomprensibile il contenuto.
Gli utenti verranno invitati - o in casi estremi costretti - a visualizzare una versione "accessibile" del sito.

Questi browser appartengono alla zona "rossa". Mi affiggono perché:

non supportano box-sizing:border-box neanche con vendor-prefix, e in alcuni casi il polyfill/fallback è inefficiente
non supportano le mediaqueries, e in alcuni casi il polyfill/fallback è inefficiente
a volte non si trova un fallback decente per display:inline-block

I browser della zona "gialla" riescono a visualizzare il contenuto alla menopeggio ("almeno si capisce").
Oltre ad IE8, questa zona individua le versioni medio-scarse di Firefox, Opera e Safari ancora in circolazione.

La zona "verde" è per i browser decenti.

Il plugin verifica anche la necessità di "vendor-prefixare" box-shadow e border-radius, in particolare per caricare prefixfree condizionalmente con Modernizr.load

Infine, il plugin aggiunge a Modernizr una serie di test di uso comune: mediaqueries (e matchMedia), box-sizing, standalone.

Implementazione

Richiede Modernizr:

Versione minima
Versione consigliata (yepnope + html5shiv + varie), compatibile con forms-ext di webshim

E queste poche righe di codice (anche concatenate subito sotto Modernizr):

css-zone.js (minificato)

Il plugin aggiunge:

Una di queste classi: zonarossa, zonagialla o zonaverde
La proprietà "zona" a Modernizr, con valore zonarossa, zonagialla o zonaverde
Il test "deprefix" a Modernizr, e quindi la classe deprefix / no-deprefix
Nei browser "non deprefixati", viene aggiunta la classe no-deprefix-VENDOR- (moz o webkit)
I seguenti test a Modernizr:
mediaqueries, boxsizing, matchmedia, standalone, presi dalle specifiche ufficiali

Essendo basato su features di 3 o più anni fa, il plugin è affidabile - pur coi limiti elencati nella sezione "approfondimenti".

Come usarlo

Inserendo un messaggio personalizzato per i browser della "zona rossa", ad esempio:

<div class="avviso-zonarossa">
<p>Problemi nella visualizzazione? Visita la <a href="...">versione accessibile</a> del sito.</p>
</div>

Che apparirà solo agli utenti interessati grazie a queste regole CSS:

.avviso-zonarossa { display:none; }
.zonarossa .avviso-zonarossa { display:block; }

Le versioni di IE inferiori alla 8 possono essere "prese di mira" anche con javascript disattivato, grazie ai commenti condizionali (occhio):

<!--[if lt IE 8]> <html class="ielt8"> <![endif]-->
<!--[if !IE]>--> <html> <!--<![endif]-->

Basta cambiare il css di sopra in:

.avviso-zonarossa { display:none; }
.ielt8 .avviso-zonarossa, .zonarossa .avviso-zonarossa { display:block; }

Caricando prefixfree solo per i browser "non deprefixati":
```
Modernizr.load([
{test:Modernizr.deprefix,nope:'/path/del/file/prefixfree.js'}
]);
```
Per garantire la compatibilità di box-shadow e border-radius senza vendor-prefix (e risparmiare metri di css)
Caricando altri plugin condizionali per la "zona gialla" (polyfill, fallback ecc):
```
Modernizr.load([
{test:Modernizr.zona=="gialla",yep:'/path/plugin.js'}
]);
```
Usando le classi .no-deprefix-moz e .no-deprefix-webkit per correggere i fastidiosi errori sulle vecchie versioni di Firefox e Safari, ad esempio:
```
.no-deprefix-moz .div-qualunque { padding-top:0; }
```

Altri plugin

Richiesti: Modernizr
Consigliati: prefixfree, webshim per i form html5, respond o css3-mediaqueries per..le mediaqueries, simple box-sizing (fa quel che può), IE9.js per IE<9

Il plugin si basa sul presupposto che quando un browser decide di supportare una proprietà css (ad es. box-shadow) senza vendor-prefix, lo farà anche in tutte le sue future versioni.
Se l'assioma è vero, si possono "prendere di mira" con una certa precisione non solo browser facili da riconoscere come IE6-7, 8 e 9, ma anche altri più "problematici" come le vecchie versioni di Firefox e Safari.

Le versioni precedenti alla 4 di Firefox non si auto-aggiornano, quindi capita ancora qualche 3.6 o 4.
Gli utenti Safari a volte non possono effettuare l'upgrade per limitazioni hardware, comunque è raro incontrare versioni inferiori alla 5.1
Chrome e Opera invece...costringono gli utenti ad aggiornare. Ho provato in tutti i modi a non tenerli aggiornati su un vecchio pc, ma non c'è stato verso.
Infatti le versioni di Chrome inferiori alla 10 sono praticamente estinte. Si vede ancora qualche Opera 9.8 (molto pochi), ma la maggior parte sono 11.1+

Comparando il supporto di alcune proprietà di Modernizr, posso dividere i browser in 3 zone:

Zona rossa

Browser che non supportano né le mediaqueries né la proprietà box-sizing senza vendor-prefix.

In questo modo escludo dalla zona rossa IE8+, perché supporta box-sizing pur non supportando le mediaquery.
Rientrano in questa zona IE7<, Safari 3.2<, Opera: 9< e Firefox 3< (cioè tutti questi tranne IE8). Tutte le versioni di Chrome, iOs Safari e Android browser sono escluse.

Tutti questi browser sono effettivamente problematici, e i polyfill spesso non bastano a rendere il contenuto perlomeno leggibile. Si può "consigliare" a questi utenti di visualizzare una versione accessibile del sito.

Zona gialla

Browser che supportano o le mediaquery o la proprietà box-shadow senza vendor-prefix, o nessuna delle due, ma non entrambe.

Rientrano in questa zona IE8, Safari 4 e 5, Opera 9.5>10.1, Firefox 3.5 e 3.6, Android 3<, iOs Safari 3.2>4.3, Blackberry browser 7, Opera Mobile 10 e tutte le versioni di Opera Mini.
C'è un "effetto collaterale": rientrano nella zona gialla anche le prime 9 versioni di Chrome. Ma chissené delle prime 9 versioni di Chrome.

Questa divisione non è perfetta, perché qualche browser che dovrebbe farne parte non viene riconosciuto: Opera 10.5>11 e Firefox 4>7.
Ma le percentuali di utilizzo dei browser "scartati" sono talmente basse da non importare, e nel peggiore dei casi...non vedranno qualche ombra o gradiente. Sopravviveranno.
Invece non dovrebbero farne parte le versioni 4>4.3 di iOs Safari e Blackberry 7.
Se per Chrome non importa, per i browser mobile sono necessari dei test più specifici prima di affidarsi alla "zona gialla" per interventi importanti nel design (tramite javascript o css).

L'unica utilità di questa zona al momento è individuare i browser "quasi-decenti", magari per un fallback specifico per i gradient radiali o chenesò.

Zona verde

Browser che supportano sia le mediaquery che la proprietà box-shadow senza vendor-prefix.

Rientrano in questa zona IE9+, Safari 5.1+, Opera 10.5+, Chrome 10+, Firefox 4+, iOs Safari 5+, Android 4+, Blackberry 10+, Opera Mobile 11+.

Sono incluse "senza merito" le versioni 10.5 e 10.6 di Opera, e StackOverflow limita il supporto a Firefox dalla versione 7 in su, ma anche in questo caso le percentuali sono insignificanti.
Invece servono, o serviranno presto, dei test più approfonditi sulle versioni mobile.

Oltre le zone

"no-deprefix"

Browser che supportano le proprietà border-radius e box-shadow, ma una delle due o entrambe solo con il vendor-prefix.

I browser no-deprefix sono: Safari 5<, Firefox 2>3.6, iOs Safari 4.3<, Android 3<, Blackberry 7.

Firefox 2>3.6 sono gli unici browser che avranno la classe no-deprefix-moz, così è facilissimo prenderli di mira per piccoli ritocchi al design.

Tutti gli altri elencati avranno la classe no-deprefix-webkit perché Opera e IE sono passati direttamente alla versione senza vendor-prefix.
Prima di usare no-deprefix-webkit per intervenire su Safari sono richiesti...altri test sulle versioni mobile.

Lato javascript, Modernizr.deprefix è utile per caricare condizionalmente prefixfree, che se la cava benissimo con box-shadow e border-radius, ma può creare problemi con le nuove sintassi css3 o sui vecchi IE.

Sottozone

Potrei dividere i browser della zona verde in più "sottozone", per esempio in base al supporto di proprietà css3 "base" come gradient, transform e animation - per la prima cernita, solo in versione de-prefixata per la seconda.
In futuro l'introduzione di nuove features nei browser potrebbe richiedere una nuova sottozona, e così via.

	Rossa	Gialla	Verde
Descrizione	Visualizzazione: potenzialmente compromessa Contenuto: potenzialmente incomprensibile Supporto parziale o mancante di: box-sizing mediaqueries	Visualizzazione: decente Contenuto: solitamente comprensibile Requisiti: box-sizing mediaqueries (anche con polyfill/fallback) Supporto parziale o mancante di: proprietà comuni di css3 (senza vendor prefix)	Visualizzazione: buona Contenuto: comprensibile Requisiti: proprietà comuni di css3 (senza vendor prefix)
Browsers (ideali)	IE: 7< Safari: 3.2< Opera: 9< Chrome: - FF: 3<	IE: 8 Safari: 4>5 Opera: 9.5>11 Chrome: - FF: 3.5>6	IE: 9+ Safari: 5.1+ Opera: 11.1+ Chrome: 1+ FF: 7+
Browsers (RILEVATI DAL plugin)	IE: 7< Safari: 3.2< Opera: 9< Chrome: - FF: 3<	IE: 8 Safari: 4>5 Opera: 9.5>10.1 Chrome: 9< FF: 3.5>3.6	IE: 9+ Safari: 5.1+ Opera: 10.5+ Chrome: 10+ FF: 4+

	box-sizing	mediaqueries	border-radius	box-shadow
Internet Explorer	NO 0>7 SI 8+	NO 0>8 SI 9+	NO 0>8 SI 9+	NO 0>8 SI 9+
Safari	SI 0>5 -webkit- SI 5.1+	NO 0>3.2 SI 4+	SI 0>4 -webkit- SI 5+	SI 0>4 -webkit- (buggy) SI 5 -webkit- SI 5.1+
Opera	NO 0>9 SI 9.5+	NO 0>9 SI 9.5+	NO 0>10.1 SI 10.5+	NO 0>10.1 SI 10.5+
Chrome	SI 0>9 -webkit- SI 10+	SI 0+	SI 0>4 -webkit- SI 5+	SI 0>9 -webkit- SI 10+
Firefox	SI 0+ -moz-	NO 0>3 SI 4+	SI 0>2 -moz- (buggy) SI 3>3.6 -moz- SI 4+	NO 0>3 SI 3.5>3.6 -moz- SI 4+
iOs Safari	SI 0>4.3 -webkit- SI 5+	SI 0+	SI 0>3.2 -webkit- SI 4+	SI 0>3.2 -webkit- (buggy) SI 4>4.3 -webkit- SI 5+
Android	SI 0>3 -webkit- SI 4+	SI 0+	SI 0>2.1 -webkit- SI 2.2+	SI 0>3 -webkit- SI 4+

	Bianca	Argento	Oro	?
Descrizione	Visualizzazione: buona Contenuto: comprensibile Requisiti: @font-face multiplebgs transform 2d rgba Supporto parziale o mancante di: gradients transition animation	Visualizzazione: ottima Contenuto: comprensibile Requisiti: gradients transition animation Supporto parziale o mancante di: gradients (senza vendor prefix) transition (senza vendor prefix) animation (senza vendor prefix)	Visualizzazione: sempre ottima Contenuto: sempre comprensibile Requisiti: gradients (senza vendor prefix) transition (senza vendor prefix) animation (senza vendor prefix) Supporto parziale o mancante di: ? ?	?
Browsers (ideali)	IE: 9 Safari: 5.1 Opera: 11.1>12 Chrome: 9< FF: 4>7	IE: - Safari: 6+ Opera: 12.1+ Chrome: 10+ FF: 7>15	IE: 10+ Safari: ? Opera: ? Chrome: ? FF: 16+	IE: ? Safari: ? Opera: ? Chrome: ? FF: ?

	gradients	transitions	animation	???
Internet Explorer	NO 0>9 SI 10+	NO 0>9 SI 10+	NO 0>9 SI 10+
Safari	NO 0>3.2 SI 4>6 -webkit-	SI 0>6 -webkit-	NO 0>3.2 SI 4>6 -webkit-
Opera	NO 0>11 SI 11.1>12 -o- SI 12.1+	NO 0>10.1 SI 10.5>12 -o- SI 12.1+	NO 0>11.6 SI 12 -o- SI 12.1+
Chrome	SI 0>9 -webkit- (buggy) SI 10>25 -webkit- SI 26+	SI 0>25 -webkit- SI 26+	SI 0>28 -webkit-
Firefox	NO 0>3.5 SI 3.6>15 -moz- SI 16+	NO 0>3.6 SI 4>15 -moz- SI 16+	NO 0>4 SI 5>15 -moz- SI 16+
iOs Safari	SI 0>4.3 -webkit- (buggy) SI 5>6 -webkit-	SI 0>6 -webkit-	SI 0>6 -webkit-
Android	SI 0>3 -webkit- (buggy) SI 4>4.2 -webkit-	SI 0>4.2 -webkit-	SI 0>3 -webkit- (buggy) SI 4>4.2 -webkit-

	@font-face	transform 2d	transform 3d	html5 form valid.
Internet Explorer	SI 0>8 (buggy) SI 9+	NO 0>8 SI 9 -ms- SI 10+	NO 0>9 SI 10+ (buggy)	NO 0>9 SI 10+
Safari	NO 0>3.2 SI 4>6 -webkit-	SI 0>6 -webkit-	NO 0>3.2 SI 4>6 -webkit-	NO 0>4 SI 5>6 (buggy)
Opera	NO 0>11 SI 11.1>12 -o- SI 12.1+	NO 0>10.1 SI 10.5>12 -o- SI 12.1+	NO 0+	NO 0>9.6 SI 10+
Chrome	SI 0>9 -webkit- (buggy) SI 10>25 -webkit- SI 26+	SI 0>28 -webkit-	NO 0>11 SI 0>28 -webkit-	NO 0>9 SI 10+
Firefox	NO 0>3.5 SI 3.6>15 -moz- SI 16+	NO 0>3 SI 3.5>15 -moz- SI 16+	NO 0>9 SI 10>15 -moz- SI 16+	NO 0>3.6 SI 4+
iOs Safari	SI 0>4.3 -webkit- (buggy) SI 5>6 -webkit-	SI 0>6 -webkit-	SI 0>6 -webkit-	NO 0>6
Android	SI 0>3 -webkit- (buggy) SI 4>4.2 -webkit-	SI 0>4.2 -webkit-	NO 0>2.3 SI 3>4.2 -webkit-	NO 0>4.2

Plugin: "Zone CSS"

Documentazione

Introduzione

Implementazione

Come usarlo

Altri plugin

Zone

Features e compatibilità

Test

Approfondimento

Zona rossa

Zona gialla

Zona verde

Oltre le zone

"no-deprefix"

Sottozone

Risorse

Todo

Sottozone (bozza)

Features sottozone (bozza)