Agora, o HTML5 é suportado por todos os navegadores, até o IE5! (Se você usar o script html5shiv). Eu recomendo a leitura http://diveintohtml5.org É um dos melhores recursos HTML5 disponíveis.
Quanto ao CSS3, se você o usar, use também o prefixo do fornecedor, além da sintaxe regular. por exemplo
raio da borda
-moz-border-radius
-webkit-border-radius
Eu acredito em aprimoramento progressivo. O suporte a CSS3 do IE9 parece muito promissor.
Eu acho que você pretende colocar o raio da borda no fundo, certo?
101310 Grant Palin
1
Infelizmente, o site Dive Into HTML5 original desapareceu. Existem muitos espelhos disponíveis. Aqui está um: diveintohtml5.info
M. Dudley
12
Provavelmente.
Existem partes do HTML5 que você pode usar agora, hoje. Formulários, por exemplo. Se você possui <input type="email">um navegador que não suporta HTML5 (sim, até o IE6), simplesmente verá a mesma coisa que veria se usasse <input type="text">. No entanto, em um navegador que suporta elementos de formulário HTML5, você obtém as vantagens do emailtipo: o cliente verificará o valor com erro, sem a necessidade de JS extra. Embora sim, você ainda precisará do JS para navegadores não HTML5, terá mais uma camada de validação nos navegadores de suporte.
Outra pergunta neste site fornece uma boa visão geral dos novos recursos disponíveis através do HTML5 e CSS3. Também existem muitos dados bons sobre formulários nessa pergunta.
Como o Internet Explorer (e versões mais antigas do Safari e Firefox, por mais raras que sejam) não oferece suporte a muitos desses recursos, você fica com as bibliotecas JavaScript para preencher o vazio. Isso inclui um impacto no desempenho (mesmo que seja apenas para os navegadores que precisam usá-los), lembre-se dos usuários ao empregá-los.
Para atenuar os problemas com falta de suporte a recursos, se você decidir que esses novos recursos valem a pena, use os seguintes recursos:
html5shiv: uma shiv JavaScript para o IE reconhecer e estilizar os elementos HTML5.
Torta CSS3: um comportamento anexado ao IE (um.htcarquivo) que torna o Internet Explorer 6-8 capaz de renderizar vários dos recursos de decoração CSS3 mais úteis. Quando aplicado a um elemento, ele permite que o IE para reconhecer e exibirborder-radius,box-shadow,border-image, múltiplas imagens de fundo, elinear-gradientcomo imagem de fundo.
Modernizr: uma biblioteca Javascript que usa detecção de recurso para testar o navegador atual em relação aos recursos futuros CSS3 / HTML5, adicionando classes ao elemento <html> para aqueles que são suportados. Também cria um objeto JavaScript global auto-intitulado que contém uma propriedade booleana para cada recurso,truese suportado efalsese não. Adiciona suporte para estilizar e imprimir elementos HTML5 para que você possa usar elementos como<section>,<header>e<nav>.
ie-css3.js: permite ao Internet Explorer identificar seletores de pseudo-classe CSS3 e renderizar quaisquer regras de estilo definidas com eles. Oferece suporte a diferentes seletores CSS3 com base na biblioteca JavaScript usada pelo site.
DD_belatedPNG: uma biblioteca Javascript que adiciona suporte à imagem PNG no IE6. Você pode usar PNGs como osrcde um<img />elemento ou como umabackground-imagepropriedade em CSS. Ao contrárioAlphaImageLoader,background-positionebackground-repeatfunciona como pretendido, e os elementos responderão àa:hoverpseudo-classe.
Correção de PNG do TwinHelix IE: um comportamento anexado ao IE (um.htcarquivo) que adiciona suporte PNG com opacidade alfa ao IE 6. O posicionamento e a repetição completa de segundo plano em CSS são compatíveis (incluindo sprites CSS) com JavaScript adicional (incluído).
Whatever: hover: um comportamento anexado ao IE (um.htcarquivo) que corrige automaticamente: hover,: active e: focus para as peculiaridades do IE6, IE7 e IE8, permitindo que você as use como em qualquer outro navegador. Inclui suporte AJAX, o que significa que qualquer html que fica inserido no documento via javascript vai também desencadear:hover,:activee:focusestilos no IE.
É interessante notar que o DD_belatedPNG resolve os dois problemas abordados pelo Whatever: hover e IE PNG Fix do TwinHelix com JavaScript puro, enquanto o Whatever: hover e o IE PNG Fix do TwinHelix usam uma combinação de comportamentos anexados JavaScript e IE ( .htc files).
Geralmente, as pessoas que usam navegadores que não são do IE atualizam-nos quando solicitadas e, portanto, o IE suporta o impacto de "Mas alguns navegadores não suportam esse recurso!" reclamações. O Modernizr adicionará a capacidade de usar HTML5 / CSS3 a qualquer navegador que você provavelmente verá, e não apenas ao IE. ie-css3.js fará a mesma coisa, basta implementá-lo sem um comentário condicional do IE (o que significa que todos os navegadores acabarão obtendo-o, a menos que você o inclua nas verificações de agente do usuário no servidor - isso reduzirá bastante o desempenho para todos os visitantes, e não apenas para os usuários do IE.)
Desculpe Bryson, mas as coisas que adicionam suporte HTML5 ao Internet Explorer são pesadelos absolutos para fins práticos.
1
Atualizei minha postagem com mais algumas informações e reconheci os resultados de desempenho ao usar essas bibliotecas JS. No entanto, discordo de você que o uso deles é um pesadelo. Eu usei tudo isso pelo menos uma vez, e todos eles servem a um propósito. Eles também não me causaram dores de cabeça adicionais. O que faz você dizer que eles são pesadelos?
Bryson
OK, "pesadelos absolutos" pode ser uma maneira muito forte de frasear as coisas, mas o desempenho costuma sofrer bastante o suficiente para que a página se torne inutilizável, então eu acho que você está exagerando o caso.
5
Use a tecnologia que melhor se adapte às suas necessidades.
Eric Meyer escreveu um bom artigo sobre por que começar a usar prefixos específicos de fornecedor em regras CSS não é tão ruim quanto o uso de filtros de CSS.
Eu acho que o mesmo se aplica ao HTML5. Se você pode verificar o suporte do navegador para obter recursos diferentes, por que não usá-lo. Contanto que o site seja degradado normalmente, viva-o.
Alguns outros links úteis, ao decidir quais recursos do CSS3 você pode usar:
http://caniuse.com/ (fornece uma boa descrição de quais elementos e seletores são utilizáveis em quais plataformas)
http://css3please.com/ (um playground editável na página para mexer com os recursos CSS3, também fornece alguns conselhos sobre quais técnicas e recursos são suportados por quais plataformas de estilos solicitados com mais frequência, como cantos arredondados, fundos gradientes, etc.)
Eu o uso para aprimorar a experiência nos navegadores modernos, para que os usuários com um bom navegador sejam "recompensados" com interfaces de usuário de aparência mais agradável (cantos arredondados, sombras, essas coisas). Eu acho que você não deve usá-lo como um substituto para, digamos, a validação atual do formulário do lado do cliente, a menos que você tenha algum tipo de fallback do JS para ele.
Ele usa o Boilerplate HTML5 no back-end e adiciona algumas opções próprias para fornecer um modelo que você pode implantar em seu próprio site. Inclui as bibliotecas Javascript (como HTML Shiv ou Modernizr), que tornarão seu site compatível com navegadores mais antigos.
Depende do que o público é e dos recursos que você deseja usar. Espero que demore mais alguns anos até que o projeto médio possa deixar de apoiar o ie6 :(
Se o seu site é uma intranet privada e você controla o navegador ou tem um número limitado de navegadores para lidar, sinta-se à vontade para trabalhar na ponta da tecnologia.
Caso contrário, não importa o que você use, você sempre terá que levar em consideração o menor denominador comum. Nesse caso, é provavelmente uma combinação do IE 6 e uma variedade de navegadores móveis. Portanto, se você seguir em frente com o HTML 5, terá o problema adicional de garantir que seu site seja "degradado".
Respostas:
Agora, o HTML5 é suportado por todos os navegadores, até o IE5! (Se você usar o script html5shiv). Eu recomendo a leitura http://diveintohtml5.org É um dos melhores recursos HTML5 disponíveis.
Quanto ao CSS3, se você o usar, use também o prefixo do fornecedor, além da sintaxe regular. por exemplo
raio da borda
-moz-border-radius
-webkit-border-radius
Eu acredito em aprimoramento progressivo. O suporte a CSS3 do IE9 parece muito promissor.
fonte
Provavelmente.
Existem partes do HTML5 que você pode usar agora, hoje. Formulários, por exemplo. Se você possui
<input type="email">um navegador que não suporta HTML5 (sim, até o IE6), simplesmente verá a mesma coisa que veria se usasse<input type="text">. No entanto, em um navegador que suporta elementos de formulário HTML5, você obtém as vantagens doemailtipo: o cliente verificará o valor com erro, sem a necessidade de JS extra. Embora sim, você ainda precisará do JS para navegadores não HTML5, terá mais uma camada de validação nos navegadores de suporte.Outra pergunta neste site fornece uma boa visão geral dos novos recursos disponíveis através do HTML5 e CSS3. Também existem muitos dados bons sobre formulários nessa pergunta.
Como o Internet Explorer (e versões mais antigas do Safari e Firefox, por mais raras que sejam) não oferece suporte a muitos desses recursos, você fica com as bibliotecas JavaScript para preencher o vazio. Isso inclui um impacto no desempenho (mesmo que seja apenas para os navegadores que precisam usá-los), lembre-se dos usuários ao empregá-los.
Para atenuar os problemas com falta de suporte a recursos, se você decidir que esses novos recursos valem a pena, use os seguintes recursos:
.htcarquivo) que torna o Internet Explorer 6-8 capaz de renderizar vários dos recursos de decoração CSS3 mais úteis. Quando aplicado a um elemento, ele permite que o IE para reconhecer e exibirborder-radius,box-shadow,border-image, múltiplas imagens de fundo, elinear-gradientcomo imagem de fundo.truese suportado efalsese não. Adiciona suporte para estilizar e imprimir elementos HTML5 para que você possa usar elementos como<section>,<header>e<nav>.srcde um<img />elemento ou como umabackground-imagepropriedade em CSS. Ao contrárioAlphaImageLoader,background-positionebackground-repeatfunciona como pretendido, e os elementos responderão àa:hoverpseudo-classe..htcarquivo) que adiciona suporte PNG com opacidade alfa ao IE 6. O posicionamento e a repetição completa de segundo plano em CSS são compatíveis (incluindo sprites CSS) com JavaScript adicional (incluído)..htcarquivo) que corrige automaticamente: hover,: active e: focus para as peculiaridades do IE6, IE7 e IE8, permitindo que você as use como em qualquer outro navegador. Inclui suporte AJAX, o que significa que qualquer html que fica inserido no documento via javascript vai também desencadear:hover,:activee:focusestilos no IE.É interessante notar que o DD_belatedPNG resolve os dois problemas abordados pelo Whatever: hover e IE PNG Fix do TwinHelix com JavaScript puro, enquanto o Whatever: hover e o IE PNG Fix do TwinHelix usam uma combinação de comportamentos anexados JavaScript e IE (
.htc files).Geralmente, as pessoas que usam navegadores que não são do IE atualizam-nos quando solicitadas e, portanto, o IE suporta o impacto de "Mas alguns navegadores não suportam esse recurso!" reclamações. O Modernizr adicionará a capacidade de usar HTML5 / CSS3 a qualquer navegador que você provavelmente verá, e não apenas ao IE. ie-css3.js fará a mesma coisa, basta implementá-lo sem um comentário condicional do IE (o que significa que todos os navegadores acabarão obtendo-o, a menos que você o inclua nas verificações de agente do usuário no servidor - isso reduzirá bastante o desempenho para todos os visitantes, e não apenas para os usuários do IE.)
fonte
Use a tecnologia que melhor se adapte às suas necessidades.
Eric Meyer escreveu um bom artigo sobre por que começar a usar prefixos específicos de fornecedor em regras CSS não é tão ruim quanto o uso de filtros de CSS.
Eu acho que o mesmo se aplica ao HTML5. Se você pode verificar o suporte do navegador para obter recursos diferentes, por que não usá-lo. Contanto que o site seja degradado normalmente, viva-o.
fonte
Alguns outros links úteis, ao decidir quais recursos do CSS3 você pode usar: http://caniuse.com/ (fornece uma boa descrição de quais elementos e seletores são utilizáveis em quais plataformas)
http://css3please.com/ (um playground editável na página para mexer com os recursos CSS3, também fornece alguns conselhos sobre quais técnicas e recursos são suportados por quais plataformas de estilos solicitados com mais frequência, como cantos arredondados, fundos gradientes, etc.)
fonte
Eu o uso para aprimorar a experiência nos navegadores modernos, para que os usuários com um bom navegador sejam "recompensados" com interfaces de usuário de aparência mais agradável (cantos arredondados, sombras, essas coisas). Eu acho que você não deve usá-lo como um substituto para, digamos, a validação atual do formulário do lado do cliente, a menos que você tenha algum tipo de fallback do JS para ele.
fonte
Se você estiver iniciando um novo projeto usando HTML5, que também deve ser suportado em navegadores antigos, a melhor opção é usar Initializr -
http://www.initializr.com/
Ele usa o Boilerplate HTML5 no back-end e adiciona algumas opções próprias para fornecer um modelo que você pode implantar em seu próprio site. Inclui as bibliotecas Javascript (como HTML Shiv ou Modernizr), que tornarão seu site compatível com navegadores mais antigos.
fonte
Depende do que o público é e dos recursos que você deseja usar. Espero que demore mais alguns anos até que o projeto médio possa deixar de apoiar o ie6 :(
fonte
Se o seu site é uma intranet privada e você controla o navegador ou tem um número limitado de navegadores para lidar, sinta-se à vontade para trabalhar na ponta da tecnologia.
Caso contrário, não importa o que você use, você sempre terá que levar em consideração o menor denominador comum. Nesse caso, é provavelmente uma combinação do IE 6 e uma variedade de navegadores móveis. Portanto, se você seguir em frente com o HTML 5, terá o problema adicional de garantir que seu site seja "degradado".
fonte