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

PlataformaMACWIN
BrowserFIREFOXSAFARIFIREFOXSAFARICHROMEIEOPERA
Versão3.543.5233.64267810
CanvasYYYYYYYYNNNY
Canvas TextYYYNNYYYNNNN
AudioYYYNNYYNNNNN
VideoYYYNNYYNNNNN

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
GeoLocationYNYNNYNNNNNN
Local StorageYYYNNYYNNNYN
Session StroageYYYYYYYNNNYN
Post MessageYYYNYYYYNNNY
Offline ApplicationsYYYNYYYNNNNN
WorkersYYYNNYYYNNNN
Query SelectorYYYNNYYYNNNY
Web DatabaseYYNNYYYNNNNN

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
RGBAYYYNYYYYNNNY
HSLAYYYNYYYYNNNY
Backgrounds múltiplosNYNNNYYYNNNN
Imagem de BordaYYYNNYYYNNNN
Border RadiusYYYYYYYYNNNN
Box ShadowYYYNNYYYNNNN
OpacityYYYYYYYYNNNY
Animações CSSNYNNNNYYNNNN
Colunas CSSYYYYYYYYNNNN
Gradientes CSSNYNNNYYYNNNN
Reflexos CSSNYNNNNYYNNNN
CSS TransformsYYYNNYYYNNNN
CSS Transforms 3DNYNNNNYYNNNN
Transições CSSNYNNNNYYNNNN
CSS FontFaceYYYNNYYNYYYY

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: SearchNYNNNNYYNNNN
Form: PhoneNYNNNNYNNNNN
Form: URLNYNNNNYNNNNY
Form: EmailNYNNNNYNNNNY
Form: DateTimeNNNNNNNNNNNY
Form: DateNNNNNNNNNNNY
Form: MonthNNNNNNNNNNNY
Form: WeekNNNNNNNNNNNY
Form: TimeNNNNNNNNNNNY
Form: LocalTimeNNNNNNNNNNNY
Form: NumberNYNNNNYNNNNY
Form: RangeNYNNNNYYNNNY
Form: ColourNNNNNNNNNNNN

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 withYYYYYYYYNYYY
CSS3: Ends withYYYYYYYYNYYY
CSS3: MatchesYYYYYYYYNYYY
CSS3: RootYYYYYYYYNNNY
CSS3: nth-childYYYNNYYYNNNY
CSS3: nth-last-childYYYNNYYYNNNY
CSS3: nth-of-typeYYYNNYYYNNNY
CSS3: nth-last-of-typeYYYNNYYYNNNY
CSS3: last-childYYYYYYYYNNNY
CSS3: first-of-typeYYYNNYYYNNNY
CSS3: last-of-typeYYYNNYYYNNNY
CSS3: only-childYYYYYYYYNNNY
CSS3: only-of-typeYYYNNYYYNNNY
CSS3: emptyYYYYYYYYNNNY
CSS3: targetYYYYYYYYNNNY
CSS3: enabledYYYYYYYYNNNY
CSS3: disabledYYYYYYYYNNNY
CSS3: checkedYYYYYYYYNNNN
CSS3: notYYYYYYYYNNNY
CSS3: General SiblingYYYYYYYYNYYY

Deixar uma resposta


Performance Optimization WordPress Plugins by W3 EDGE