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.
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 email
tipo: 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:
.htc
arquivo) 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-gradient
como imagem de fundo.true
se suportado efalse
se não. Adiciona suporte para estilizar e imprimir elementos HTML5 para que você possa usar elementos como<section>
,<header>
e<nav>
.src
de um<img />
elemento ou como umabackground-image
propriedade em CSS. Ao contrárioAlphaImageLoader
,background-position
ebackground-repeat
funciona como pretendido, e os elementos responderão àa:hover
pseudo-classe..htc
arquivo) 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)..htc
arquivo) 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
,:active
e:focus
estilos 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.)
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.
Se você estiver iniciando um novo projeto usando HTML5, que também deve ser suportado em navegadores antigos, a melhor opção é usar Initializr -
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".