HTML 5, CSS 3 e os Browsers, mas quais?
Há sempre uma grande dúvida sobre quais browsers já estão atendendo aos novos padrões do HTML5 e do CSS3. Ambos trazem ótimas novidades, mas mesmo ótimos browsers ainda não suportam tudo que tem por aí.
Como é de costume, é claro que o Internet Explorer é o “mongol” da galera. Há promessas da Microsoft de lançar a versão 9.0 do seu navegador já com suporte ao html 5. Sinceramente o melhor é esperar que ela não tente mais uma vez suas inovações ao navegador. Esses foram sempre uma grande parte dos problemas que temos até hoje pela web.
Mesmo que possamos desconsiderar o IE, não só o mongol-mor (versão 6), temos que prestar atenção pois a Mozilla ainda não completou em seu navegador open-source o html5. Ainda falta bastante coisa, inclusive na versão 3.6. Nessa versão existe uma forma bem escondida de liberar a renderização das novidades nesse novo padrão, mas é bem complexa para um usuário comum e não vale a pena para quem não está ajudando a Mozilla a encontrar e corrigir bugs.
Para testar CSS3 e HTML5 sempre figuram em primeiro na lista (até o momento): Safari (Windows ou Mac) e o Chrome (Windows, Mac e Linux).
Quem quiser um exemplo bem famoso, visite a página do youtube: http://www.youtube.com/html5.
Como o artigo é lotado de gráficos eu aproveitei para abusar do jQuery UI que estou inaugurando em meu blog. As funcionalidades estão bacanas e é bem possível que ao longo do tempo eu possa mudar o tema utilizado (referente ao jquery ui).
Vamos aos quadros (informações coletadas em http://www.findmebyip.com/get-started/):
Safari – Windows
- @fontface
- Canvas
- Canvas Text
- HTML 5 Audio
- HTML 5 Video
- rgba()
- hsla()
- border-image
- border-radius
- box-shadow
- Múltiplos backgrounds
- opacity
- Animações em CSS
- Colunas em CSS
- Gradientes em CSS
- Reflexos em CSS
- ’2D Transforms’ em CSS
- ’3D Transforms’ em CSS
- Transições em CSS
- Geolocation API
Firefox 3.5 – Windows
- @fontface
- Canvas
- Canvas Text
- HTML 5 Audio
- HTML 5 Video
- rgba()
- hsla()
- border-image
- border-radius
- box-shadow
- Múltiplos backgrounds
- opacity
- Animações em CSS
- Colunas em CSS
- Gradientes em CSS
- Reflexos em CSS
- ’2D Transforms’ em CSS
- ’3D Transforms’ em CSS
- Transições em CSS
- Geolocation API
Chrome – Windows
- @fontface
- Canvas
- Canvas Text
- HTML 5 Audio
- HTML 5 Video
- rgba()
- hsla()
- border-image
- border-radius
- box-shadow
- Múltiplos backgrounds
- opacity
- Animações em CSS
- Colunas em CSS
- Gradientes em CSS
- Reflexos em CSS
- ’2D Transforms’ em CSS
- ’3D Transforms’ em CSS
- Transições em CSS
- Geolocation API
Opera 10 – Windows
- @fontface
- Canvas
- Canvas Text
- HTML 5 Audio
- HTML 5 Video
- rgba()
- hsla()
- border-image
- border-radius
- box-shadow
- Múltiplos backgrounds
- opacity
- Animações em CSS
- Colunas em CSS
- Gradientes em CSS
- Reflexos em CSS
- ’2D Transforms’ em CSS
- ’3D Transforms’ em CSS
- Transições em CSS
- Geolocation API
Internet Explorer 6, 7 e 8
- @fontface
- Canvas
- Canvas Text
- HTML 5 Audio
- HTML 5 Video
- rgba()
- hsla()
- border-image
- border-radius
- box-shadow
- Múltiplos backgrounds
- opacity
- Animações em CSS
- Colunas em CSS
- Gradientes em CSS
- Reflexos em CSS
- ’2D Transforms’ em CSS
- ’3D Transforms’ em CSS
- Transições em CSS
- Geolocation API
HTML5 Embedded Content
| Plataforma | MAC | WIN | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | FIREFOX | SAFARI | CHROME | IE | OPERA | |||||
| Versão | 3.5 | 4 | 3.5 | 2 | 3 | 3.6 | 4 | 2 | 6 | 7 | 8 | 10 |
| Canvas | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| Canvas Text | Y | Y | Y | N | N | Y | Y | Y | N | N | N | N |
| Audio | Y | Y | Y | N | N | Y | Y | N | N | N | N | N |
| Video | Y | Y | Y | N | N | Y | Y | N | N | N | N | N |
HTML5 Web Applications
| Plataforma | MAC | WIN | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | FIREFOX | SAFARI | CHROME | IE | OPERA | |||||
| Versão | 3.5 | 4 | 3.5 | 2 | 3 | 3.6 | 4 | 2 | 6 | 7 | 8 | 10 |
| GeoLocation | Y | N | Y | N | N | Y | N | N | N | N | N | N |
| Local Storage | Y | Y | Y | N | N | Y | Y | N | N | N | Y | N |
| Session Stroage | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y | N |
| Post Message | Y | Y | Y | N | Y | Y | Y | Y | N | N | N | Y |
| Offline Applications | Y | Y | Y | N | Y | Y | Y | N | N | N | N | N |
| Workers | Y | Y | Y | N | N | Y | Y | Y | N | N | N | N |
| Query Selector | Y | Y | Y | N | N | Y | Y | Y | N | N | N | Y |
| Web Database | Y | Y | N | N | Y | Y | Y | N | N | N | N | N |
Propriedades CSS3
| Plataforma | MAC | WIN | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | FIREFOX | SAFARI | CHROME | IE | OPERA | |||||
| Versão | 3.5 | 4 | 3.5 | 2 | 3 | 3.6 | 4 | 2 | 6 | 7 | 8 | 10 |
| RGBA | Y | Y | Y | N | Y | Y | Y | Y | N | N | N | Y |
| HSLA | Y | Y | Y | N | Y | Y | Y | Y | N | N | N | Y |
| Backgrounds múltiplos | N | Y | N | N | N | Y | Y | Y | N | N | N | N |
| Imagem de Borda | Y | Y | Y | N | N | Y | Y | Y | N | N | N | N |
| Border Radius | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | N |
| Box Shadow | Y | Y | Y | N | N | Y | Y | Y | N | N | N | N |
| Opacity | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| Animações CSS | N | Y | N | N | N | N | Y | Y | N | N | N | N |
| Colunas CSS | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | N |
| Gradientes CSS | N | Y | N | N | N | Y | Y | Y | N | N | N | N |
| Reflexos CSS | N | Y | N | N | N | N | Y | Y | N | N | N | N |
| CSS Transforms | Y | Y | Y | N | N | Y | Y | Y | N | N | N | N |
| CSS Transforms 3D | N | Y | N | N | N | N | Y | Y | N | N | N | N |
| Transições CSS | N | Y | N | N | N | N | Y | Y | N | N | N | N |
| CSS FontFace | Y | Y | Y | N | N | Y | Y | N | Y | Y | Y | Y |
HTML5 Forms 2.0
| Plataforma | MAC | WIN | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | FIREFOX | SAFARI | CHROME | IE | OPERA | |||||
| Versão | 3.5 | 4 | 3.5 | 2 | 3 | 3.6 | 4 | 2 | 6 | 7 | 8 | 10 |
| Form: Search | N | Y | N | N | N | N | Y | Y | N | N | N | N |
| Form: Phone | N | Y | N | N | N | N | Y | N | N | N | N | N |
| Form: URL | N | Y | N | N | N | N | Y | N | N | N | N | Y |
| Form: Email | N | Y | N | N | N | N | Y | N | N | N | N | Y |
| Form: DateTime | N | N | N | N | N | N | N | N | N | N | N | Y |
| Form: Date | N | N | N | N | N | N | N | N | N | N | N | Y |
| Form: Month | N | N | N | N | N | N | N | N | N | N | N | Y |
| Form: Week | N | N | N | N | N | N | N | N | N | N | N | Y |
| Form: Time | N | N | N | N | N | N | N | N | N | N | N | Y |
| Form: LocalTime | N | N | N | N | N | N | N | N | N | N | N | Y |
| Form: Number | N | Y | N | N | N | N | Y | N | N | N | N | Y |
| Form: Range | N | Y | N | N | N | N | Y | Y | N | N | N | Y |
| Form: Colour | N | N | N | N | N | N | N | N | N | N | N | N |
Seletores CSS3
| Platform | MAC | WIN | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Browser | FIREFOX | SAFARI | FIREFOX | SAFARI | CHROME | IE | OPERA | |||||
| Versão | 3.5 | 4 | 3.5 | 2 | 3 | 3.6 | 4 | 2 | 6 | 7 | 8 | 10 |
| CSS3: Begins with | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
| CSS3: Ends with | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
| CSS3: Matches | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
| CSS3: Root | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| CSS3: nth-child | Y | Y | Y | N | N | Y | Y | Y | N | N | N | Y |
| CSS3: nth-last-child | Y | Y | Y | N | N | Y | Y | Y | N | N | N | Y |
| CSS3: nth-of-type | Y | Y | Y | N | N | Y | Y | Y | N | N | N | Y |
| CSS3: nth-last-of-type | Y | Y | Y | N | N | Y | Y | Y | N | N | N | Y |
| CSS3: last-child | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| CSS3: first-of-type | Y | Y | Y | N | N | Y | Y | Y | N | N | N | Y |
| CSS3: last-of-type | Y | Y | Y | N | N | Y | Y | Y | N | N | N | Y |
| CSS3: only-child | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| CSS3: only-of-type | Y | Y | Y | N | N | Y | Y | Y | N | N | N | Y |
| CSS3: empty | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| CSS3: target | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| CSS3: enabled | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| CSS3: disabled | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| CSS3: checked | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | N |
| CSS3: not | Y | Y | Y | Y | Y | Y | Y | Y | N | N | N | Y |
| CSS3: General Sibling | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
Deixar uma resposta