Css tips and tricks
8.786 visualizzazioni
Browser, CSS3 e HTML5
21/06/2011I browser e le compatibilità, un rapido aggiornamento dello stato dell'arte rispetto ai CSS3 e all'HTML5.
Poche parole e una bella tabellona ...
CSS3 Properties
| Piattaforma | WIN | MAC | % Supporto | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | IE | CHROME | OPERA | FIREFOX | SAFARI | OPERA | ||||||
| Versione | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 10 | 11.1 | 4 | 5 | 11.1 | |
| RGBA | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| HSLA | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| Background Size | N | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 83% (eccellente) |
| Multiple Backgrounds | N | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 83% (eccellente) |
| Border Image | Y | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 83% (eccellente) |
| Border Radius | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| Box Shadow | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| Text Shadow | Y | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 53% (buono) |
| Opacity | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| CSS Animations | N | N | Y | N | N | N | N | N | Y | N | N | Y | N | 39% (limitato) |
| CSS Columns | Y | Y | Y | N | N | N | N | Y | Y | Y | Y | Y | Y | 81% (eccellente) |
| CSS Gradients | N | Y | Y | N | N | N | N | Y | Y | Y | Y | Y | Y | 78% (eccellente) |
| CSS Reflections | N | N | Y | N | N | N | N | N | Y | N | N | Y | N | 39% (limitato) |
| CSS Transforms | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 84% (eccellente) |
| CSS Transforms 3D | N | N | N | N | N | N | N | N | N | N | N | N | N | 12% (povero) |
| CSS Transitions | N | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 47% (limitato) |
| CSS FontFace | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | 97% (eccellente) |
| FlexBox | Y | Y | Y | N | N | N | N | Y | Y | N | Y | Y | N | 51% (buono) |
CSS3 Selectors
| Piattaforma | WIN | MAC | % Supporto | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | IE | CHROME | OPERA | FIREFOX | SAFARI | OPERA | ||||||
| Versione | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 10 | 11.1 | 4 | 5 | 11.1 | |
| Begins with | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | 98% (eccellente) |
| Ends with | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | 98% (eccellente) |
| Matches | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | 98% (eccellente) |
| Root | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| nth-child | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| nth-last-child | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| nth-of-type | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| nth-last-of-type | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| last-child | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| first-of-type | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| last-of-type | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| only-child | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| only-of-type | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| empty | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| target | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 85% (eccellente) |
| enabled | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| disabled | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| checked | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| not | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| General Sibling | Y | Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | 98% (eccellente) |
HTML5 Web Applications
| Piattaforma | WIN | MAC | % Supporto | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | IE | CHROME | OPERA | FIREFOX | SAFARI | OPERA | ||||||
| Versione | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 10 | 11.1 | 4 | 5 | 11.1 | |
| Local Storage | Y | Y | Y | N | N | Y | Y | Y | Y | Y | Y | Y | Y | 94% (eccellente) |
| Session Storage | Y | Y | Y | N | N | Y | Y | Y | Y | Y | Y | Y | Y | 95% (eccellente) |
| Post Message | Y | Y | Y | N | N | Y | Y | Y | Y | Y | Y | Y | Y | 95% (eccellente) |
| Offline Applications | Y | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 82% (eccellente) |
| Workers | Y | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 80% (eccellente) |
| Query Selector | Y | Y | Y | N | N | Y | Y | Y | Y | Y | Y | Y | Y | 90% (eccellente) |
| WebSQL Database | N | N | Y | N | N | N | N | N | Y | Y | N | Y | Y | 41% (limitato) |
| IndexDB Database | N | N | N | N | N | N | N | N | N | N | N | N | N | |
| Drag and Drop | Y | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | N | 94% (eccellente) |
| Hash Change (Event) | N | Y | Y | N | N | Y | Y | Y | Y | Y | Y | N | Y | 88% (eccellente) |
| History Management | N | Y | Y | N | N | N | N | N | Y | N | Y | N | N | 42% (limitato) |
| WebSockets | N | N | Y | N | N | N | N | N | Y | N | N | N | N | 37% (limitato) |
| GeoLocation | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | N | Y | 84% (eccellente) |
| Touch | N | N | N | N | N | N | N | N | N | N | N | N | N | 2% (povero) |
HTML5 Graphics & Embedded Content
| Piattaforma | WIN | MAC | % Supporto | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | IE | CHROME | OPERA | FIREFOX | SAFARI | OPERA | ||||||
| Versione | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 10 | 11.1 | 4 | 5 | 11.1 | |
| Canvas | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 87% (eccellente) |
| Canvas Text | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 85% (eccellente) |
| SVG | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| SVG Clipping Paths | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 86% (eccellente) |
| SVG Inline | N | Y | N | N | N | N | Y | Y | Y | N | Y | N | N | 23% (povero) |
| SMIL | N | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 49% (limitato) |
| WebGL | N | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 32% (limitato) |
| Audio | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 85% (eccellente) |
| Video | Y | Y | Y | N | N | N | Y | Y | Y | Y | Y | Y | Y | 85% (eccellente) |
HTML5 Audio Codecs
| Piattaforma | WIN | MAC | % Supporto | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | IE | CHROME | OPERA | FIREFOX | SAFARI | OPERA | ||||||
| Versione | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 10 | 11.1 | 4 | 5 | 11.1 | |
| Audio: ogg/vorbis | Y | Y | N | N | N | N | N | N | Y | Y | Y | N | Y | 71% (buono) |
| Audio: mp3 | N | N | Y | N | N | N | Y | Y | Y | N | N | Y | N | 38% (limitato) |
| Audio: wav | Y | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 69% (buono) |
| Audio: AAC | N | N | Y | N | N | N | Y | Y | Y | N | N | Y | N | 38% (limitato) |
HTML5 Video Codecs
| Piattaforma | WIN | MAC | % Supporto | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | IE | CHROME | OPERA | FIREFOX | SAFARI | OPERA | ||||||
| Versione | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 10 | 11.1 | 4 | 5 | 11.1 | |
| Video: ogg/theora | Y | Y | N | N | N | N | N | N | Y | Y | Y | N | Y | 70% (buono) |
| Video: H.264 | N | N | Y | N | N | N | Y | Y | Y | N | N | Y | N | 38% (limitato) |
| Video: WebM | N | Y | N | N | N | N | N | N | Y | Y | Y | N | Y | 31% (limitato) |
HTML5 Forms Inputs
| Piattaforma | WIN | MAC | % Supporto | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | IE | CHROME | OPERA | FIREFOX | SAFARI | OPERA | ||||||
| Versione | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 10 | 11.1 | 4 | 5 | 11.1 | |
| Form: Search | N | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 45% (limitato) |
| Form: Phone | N | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 44% (limitato) |
| Form: URL | N | Y | Y | N | N | N | N | N | Y | Y | Y | N | Y | 44% (limitato) |
| Form: Email | N | Y | Y | N | N | N | N | N | Y | Y | Y | N | Y | 44% (limitato) |
| Form: DateTime | N | N | N | N | N | N | N | N | N | Y | N | N | Y | 3% (povero) |
| Form: Date | N | N | N | N | N | N | N | N | N | Y | N | N | Y | 3% (povero) |
| Form: Month | N | N | N | N | N | N | N | N | N | Y | N | N | Y | 3% (povero) |
| Form: Week | N | N | N | N | N | N | N | N | N | Y | N | N | Y | 3% (povero) |
| Form: Time | N | N | N | N | N | N | N | N | N | Y | N | N | Y | 3% (povero) |
| Form: LocalTime | N | N | N | N | N | N | N | N | N | Y | N | N | Y | 3% (povero) |
| Form: Number | N | N | N | N | N | N | N | N | Y | Y | N | N | Y | 19% (povero) |
| Form: Range | N | N | Y | N | N | N | N | N | Y | Y | N | Y | Y | 38% (limitato) |
| Form: Colour | N | N | N | N | N | N | N | N | N | Y | N | N | Y | |
HTML5 Forms Attributes
| Piattaforma | WIN | MAC | % Supporto | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | IE | CHROME | OPERA | FIREFOX | SAFARI | OPERA | ||||||
| Versione | 3.6 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 10 | 11.1 | 4 | 5 | 11.1 | |
| Form: Autocomplete | N | Y | N | N | N | N | N | N | N | Y | Y | N | Y | 8% (povero) |
| Form: Autofocus | N | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 47% (limitato) |
| Form: List | N | Y | Y | N | N | N | N | N | N | Y | Y | N | Y | 16% (povero) |
| Form: Placeholder | N | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 44% (limitato) |
| Form: Min | N | N | Y | N | N | N | N | N | Y | Y | N | N | Y | 40% (limitato) |
| Form: Max | N | N | Y | N | N | N | N | N | Y | Y | N | N | Y | 40% (limitato) |
| Form: Multiple | N | Y | Y | N | N | N | N | N | Y | Y | Y | Y | Y | 77% (eccellente) |
| Form: Pattern | N | Y | Y | N | N | N | N | N | Y | Y | Y | N | Y | 45% (limitato) |
| Form: Required | N | Y | Y | N | N | N | N | N | Y | Y | Y | N | Y | 45% (limitato) |
| Form: Step | N | N | Y | N | N | N | N | N | Y | Y | N | N | Y | 40% (limitato) |
