Quais tags HTML5 posso usar sem me preocupar com a compatibilidade do navegador?

93

Estou construindo um aplicativo da web para uso em PCs. Quais são as tags HTML5 para evitar problemas de compatibilidade com navegadores como o IE8 e superior?

Observação: a maioria das perguntas tem de 1 a 3 anos sobre esse assunto.

Swagg
fonte
48
Verifique caniuse.com e html5please.com para obter informações atualizadas de compatibilidade do navegador.
rink.attendant.6
@deceze algum link para saber mais sobre shims?
Swagg de
4
HTML5 Boilerplate é um bom recurso
Michael Peterson
47
IMHO você não pode usar nada em desenvolvimento web sem se preocupar com a compatibilidade do navegador ...
Uooo
2
Consulte Os três níveis de uso de HTML5 . O material de nível 1 pode ser usado sem problemas. Os recursos de nível 2 degradam-se normalmente. Os recursos de nível 3 exigem um polyfill se o suporte para navegadores mais antigos for uma preocupação.
Mathias Bynens

Respostas:

100

Você perguntou de quais tags HTML5 se deve evitar.

Bem, algumas das tags do HTML5 do meu conhecimento foram feitas por razões semânticas. como o seguinte, por exemplo.

<article> <section> <aside> <nav> <header> <footer> ..ect

São quase bons de se trabalhar e requerem apenas um pouco de CSS, por exemplo. display: block;para funcionar normalmente na maioria dos navegadores, embora em navegadores mais antigos, por exemplo. Internet Explorer, você deve criar um elemento em Javascript para que seja compatível.

Aqui está um exemplo.

document.createElement('article');

Configuraria o <article>elemento para uso no Internet Explorer mais antigo.

Para tags HTML5 mais avançadas que requerem a funcionalidade Javascript para funcionar, são algumas das seguintes.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

Esses elementos são mais difíceis de suportar / shiv em navegadores mais antigos. Embora eu tenha incluído um link para cross-browser polyfills na parte inferior, embora eu não os tenha investigado pessoalmente.

Portanto, eu diria que qualquer elemento que não requeira a funcionalidade Javascript é perfeitamente adequado para uso com um pequeno código de suporte para vários navegadores.

Se sua segmentação for > IE8 , você não terá problemas se usar uma faca.

O que eu chamo de navegadores mais antigos? <IE9

O suporte do navegador para tags HTML5 hoje é.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Não são suportados pelo Internet Explorer a menos de 8, mas podem ser corrigidos assim.

CSS:

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript:

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

E <audio> <video> <canvas>não são suportados no <IE 9

O <embed>elemento tem suporte parcial em > IE8


Você também deve olhar para esta tag.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

Essa metatag informa ao Internet Explorer para exibir a página no modo mais alto do IE disponível, em vez de entrar no modo de compatibilidade e renderizar a página como o IE7 ou 8 faria. Mais informações sobre isso aqui .


Links de ajuda para HTML5


Para começar, você pode verificar o BoilerPlate HTML5

Para tabelas de suporte de compatibilidade de navegador, você pode verificar - http://caniuse.com/

HTML5 Shiv - https://github.com/afarkas/html5shiv

Lista de Polyfills HTML5 - https: //github.com/Modernizr/Modernizr/wiki / ...

Atualizar

Conforme mencionado em um comentário

Tenha cuidado com a meta tag Compatível com X-UA. Se você usar algo como o padrão html5 que tem comentários condicionais em torno do elemento (isso também acontece com o doctype IIRC do html5), poderá ter problemas com o IE9 forçando-se a entrar no modo padrão do IE7, mesmo com a tag. IE ataca novamente

Você pode querer dar uma olhada nisso, não tenho nada para apoiar isso no momento.

iConnor
fonte
Além disso, se você pode especificar, o que é o IE mais antigo? 6,7,8?
Swagg de
4
Geralmente, o IE mais antigo é <IE9
iConnor
Tenha cuidado com a meta tag Compatível com X-UA. Se você usar algo como o padrão html5 que tem comentários condicionais em torno do <html>elemento (isso também acontece com o doctype IIRC do html5), poderá ter problemas com o IE9 forçando-se a entrar no modo padrão do IE7, mesmo com a tag. O IE ataca novamente.
cheezone de
Obrigado pela informação, qualquer post de blog ou alguma informação que eu possa adicionar na resposta sobre esse assunto seria bom :)
iConnor
12

Geralmente, existem problemas.

Disseram-me que sua pergunta foi formulada para perguntar sobre tags HTML 5 mas também é útil examinar os novos recursos à luz de qualquer Javascript que você possa encontrar ou escrever.

Na prática, o método recomendado é testar a existência do recurso, em vez de um navegador específico. O script Modernizr pode ser útil nesse sentido, mas também há relatórios de recursos indetectáveis ​​no HTML5 .

Alguns recursos, como local storagevoltar ao IE8.

Outros, como FileReader, requerem IE10 / Firefox21 / Chrome27

Para obter informações atualizadas, tente http://caniuse.com

Paulo
fonte
1
Devo observar que localStorage e fileReader não são tags HTML. O OP perguntou quais tags HTML5 têm problemas de compatibilidade.
iConnor de
Oh sim. Existe uma grande lista de tags semânticas que estão sendo inseridas no HTML5 como uma forma de tornar sua página mais legível por máquina e talvez mais amigável com SEO [ou talvez não]. Existem alguns novos elementos de entrada. Suponho que alguns deles podem ter problemas em um ou mais navegadores. Eu acho que caniuse pode ter essa informação ...
Paulo
8

Escreva HTML 5 como faria normalmente e use Shims para garantir a compatibilidade com navegadores mais antigos. Você só precisa ter cuidado com as APIs Javascript, porque dificilmente podem ser corrigidos. Se você está tentando seguir o HTML 4 básico para compatibilidade, não há motivo para usar o HTML 5.

deceze
fonte
7
Eu ficaria feliz em usar <!DOCTYPE html>como linha superior, em vez daquelas malditas coisas feias e compridas impostas a nós nos tempos anteriores.
Paul de
Se essa é a única coisa que muda entre seus documentos HTML 4 e "HTML 5" ... qual é o ponto? :)
deceze
4

Para uma rápida comparação de quais tags estão disponíveis em quais navegadores e em que nível de suporte para cada tag, html5test.com é um ótimo recurso.

Burhan Khalid
fonte
2

Você está procurando uma matriz de compatibilidade HTML5

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

bradgonesurfing
fonte
2
Observe: "A precisão factual deste artigo pode estar comprometida devido a informações desatualizadas. Atualize este artigo para refletir eventos recentes ou informações disponíveis recentemente. (Março de 2013)"
gersande
1
Sim, possivelmente é verdade, mas no google geral html5 compatabilitytenho certeza de que existem muitos recursos.
bradgonesurfing de
2

Além disso, para obter a melhor compatibilidade entre navegadores, sugiro que você use este reset.css criado por Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ Isso faz com que os elementos que diferem de um navegador para outro se comportem da mesma forma em todos os navegadores.

Pacuraru Daniel
fonte