In questo articolo vorrei dare un breve ragguaglio sullo stato dell'implementazione CSS3 nei vari browser, ossia delle varie caratteristiche e del supporto che si ha nei programmi utente più diffusi. L'articolo è corredato dalle ultime statistiche d'uso dei browser più diffusi.
Statistiche d'uso
Le statistiche mostrano la predominanza di Internet Explorer, seguito da Firefox e Chrome. Secondo le statistiche più aggiornate, Internet Explorer 6 sarebbe ancora al 10%.
Supporto CSS3
La tabella che segue riassume il supporto CSS3 nei vari browser.
| Internet Explorer | Firefox | Chrome | Safari | Opera | |
|---|---|---|---|---|---|
| Selettori | Solo in IE9+. IE8- supporta solo i selettori d'attributo CSS3. | Si | Si | Si | Si |
| border-radius | Solo in IE9+. | Si | Si | Si | Si |
| opacity | Solo in IE9+. | Si | Si | Si | Si |
| box-shadow | Solo in IE9+. | Si | Si | Si | Si |
| text-shadow | Solo in IE9+. | Si | Si | Si | Si |
| Colori RGBA, HSLA | Solo in IE9+. | Si | Si | Si | Si |
| background multipli | Solo in IE9+. | Si | Si | Si | Si |
| Transizioni | Solo in IE10+ (-ms-transition). |
Si (-moz-transition). |
Si (-webkit-transition). |
Si (-webkit-transition). |
Si (-o-transition). |
| Trasformazioni | Solo in IE10+ (-ms-transform). |
Si (-moz-transform). |
Si (-webkit-transform). |
Si (-webkit-transform). |
Si (-o-transform). |
| Gradienti | Solo in IE10+ (-ms-linear-gradient, -ms-radial-gradient). |
Si (-moz-linear-gradient). |
Si (-webkit-gradient). |
Si (-webkit-gradient). |
Si (-o-linear-gradient). |
| Animazioni | Solo in IE10+ (tutorial). | Si (tutorial). | Si (tutorial). | Si (tutorial). | No. |
| Media Queries | Solo in IE9+. | Si | Si | Si | Si |
| Layout multi-colonna | Solo in IE10+ (vedi blog MSDN). | Si | Si | Si | Si |