desenv-web-rp.com

Devo usar HTML5 e / ou CSS3 para criar meu site?

O novo material HTML5/CSS3 (Web8!) Parece legal! Devo começar a usá-lo agora ou ficar com css/xhtml wait até que mais navegadores possam usá-lo?

16
Jason

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.

13
Jin

Provavelmente.

Existem partes do HTML5 que você pode usar agora, hoje. Formulários, por exemplo. Se você tiver <input type="email"> em um navegador que não suporta HTML5 (sim, até o IE6), verá simplesmente 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 tipo email: o cliente irá verificar o valor com erro, sem a necessidade de JS extra. Embora sim, você ainda precisará do JS para navegadores não HTML5, mas terá mais uma camada de validação nos navegadores de suporte.

Outro 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: um shiv JavaScript para IE reconhecer e estilizar os elementos HTML5.
  • CSS3 Pie: um IE comportamento anexado (um arquivo .htc) que torna a Internet O Explorer 6-8 é capaz de renderizar vários dos recursos de decoração CSS3 mais úteis. Quando aplicado a um elemento, ele permite que IE reconheça e exiba border-radius, box-shadow, border-image, várias imagens de fundo e linear-gradient como imagem de fundo .
  • Modernizr: uma biblioteca Javascript que usa detecção de recurso para testar o navegador atual em relação aos próximos recursos 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, true, se suportado, e false, se 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 que o Internet Explorer identifique seletores de pseudo-classe CSS3 e processe 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 o src de um elemento <img /> ou como uma propriedade background-image em CSS. Diferentemente de AlphaImageLoader, background-position e background-repeat funcionam como pretendido, e os elementos responderão à pseudo-classe a:hover.
  • TwinHelix IE Correção PNG: um IE comportamento anexado (um .htc arquivo) que adiciona suporte PNG com opacidade alfa a 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).
  • Seja o que for: passe o mouse: um comportamento anexado IE (um arquivo .htc) que automaticamente patches: hover,: active e: focus para as peculiaridades do IE6, IE7 e IE8, permitindo que você os use como faria em qualquer outro navegador. Inclui o suporte AJAX, o que significa que qualquer html inserido no documento via javascript também acionará os estilos :hover, :active e :focus no IE.

É interessante notar que o DD_belatedPNG resolve os dois problemas abordados pelo Whatever: hover e do TwinHelix IE PNG Fix com JavaScript puro, enquanto o Whatever: hover e do TwinHelix IE PNG Fix usa uma combinação de JavaScript e IE comportamentos anexados (.htc files).

Geralmente, as pessoas que usam navegadores que não são do IE os atualizam quando solicitadas e, portanto, [IE] carrega o peso 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 IE (o que significa todos os navegadores acabarão recebendo a menos que você o inclua nas verificações de agente do usuário do servidor - isso reduzirá bastante o desempenho de todos os seus visitantes, em vez de apenas dos seus usuários [IE).

12
Bryson

Use a tecnologia que melhor se adapte às suas necessidades.

Eric Meyer escreveu m artigo de Nice sobre por que começar a usar prefixos específicos do fornecedor nas regras CSS não é tão ruim quanto o uso de hacks de filtro 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. Enquanto o site se degradar normalmente, viva-o.

5
jessegavin

Alguns outros links úteis, ao decidir quais recursos do CSS3 você pode querer 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, isso também fornece alguns conselhos sobre quais técnicas e recursos são suportados por quais plataformas para estilos solicitados com frequência, como cantos arredondados, planos de fundo gradientes etc.)

2
Jason M. Batchelor

Eu o uso para aprimorar a experiência em navegadores modernos, para que os usuários com um bom navegador sejam "recompensados" com interfaces de usuário mais agradáveis ​​(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.

1
D4V360

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.

1
Mozan Sykol

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 :(

0
theotherreceive

Se o seu site é uma intranet privada e você controla o navegador ou tem um número limitado de navegadores para lidar, fique à vontade para trabalhar na borda 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 de 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 "degrade".

0
Gary.Ray