Qual é a diferença entre o atributo oculto (HTML5) e a regra display: none (CSS)?

111

HTML5 tem um novo atributo global hidden, que pode ser usado para ocultar conteúdo.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS tem a display:noneregra, que também pode ser usada para ocultar conteúdo.

article { display:none; }

Visualmente, eles são idênticos. Qual é a diferença semanticamente? Computacionalmente?

Que orientações devo considerar sobre quando usar um ou outro?

TIA.

EDITAR : Com base nas respostas de @newtron (abaixo), fiz mais pesquisas. O hiddenatributo foi muito contestado no ano passado e (aparentemente) mal chegou às especificações do HTML5. Alguns argumentaram que era redundante e não tinha propósito. Pelo que posso dizer, a avaliação final é a seguinte: Se estou visando apenas navegadores da web, não há diferença. (Uma página chegou a afirmar que os navegadores da web costumavam display:noneimplementar o atributo oculto.) Mas se estou considerando a acessibilidade (por exemplo, talvez eu espere que meu conteúdo seja lido por leitores de tela), então há uma diferença. A regra CSS display:nonepode ocultar meu conteúdo de navegadores da web, mas uma regra ária correspondente (por exemplo,aria-hidden="false") pode tentar lê-lo. Assim, agora concordo que a resposta de @newtron está correta, embora talvez (discutivelmente) não tão clara quanto eu gostaria. Obrigado @newtron pela sua ajuda.

css html visibility

— james.garriss
fonte

Eu nem sabia que o hiddenatributo existe, mas certamente uma boa pergunta, pois tê-lo parece violar a separação estrutura / apresentação.

— Waldheinz

Para aqueles que ainda não tiveram a alegria de ler as especificações HTML5 neste atributo: w3.org/TR/html5/editing.html#the-hidden-attribute

— james.garriss

w3.org/html/wg/wiki/ChangeProposals/removehidden

— Yiğit Yener

Já leia isso, @Yigit. Também tem mais de um ano. E oculto ainda está nas especificações. Isso me indicaria que a proposta não conquistou nenhum convertido.

— james.garriss

Obrigado pela edição. Desculpe, não estava claro! A informação que você adicionou acima é ótima. +1

— newtron

A principal diferença parece ser que os hiddenelementos estão sempre ocultos, independentemente da apresentação:

O atributo oculto não deve ser usado para ocultar conteúdo que poderia ser legitimamente mostrado em outra apresentação. Por exemplo, é incorreto usar oculto para ocultar painéis em uma caixa de diálogo com guias, porque a interface com guias é meramente um tipo de apresentação de estouro - pode-se igualmente mostrar todos os controles de formulário em uma grande página com uma barra de rolagem. É igualmente incorreto usar este atributo para ocultar conteúdo apenas de uma apresentação - se algo estiver marcado como oculto, ficará oculto de todas as apresentações, incluindo, por exemplo, leitores de tela.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Como o CSS pode direcionar diferentes tipos de mídia / apresentação, display: noneele dependerá de uma determinada apresentação. Por exemplo, alguns elementos podem ter sido display: noneexibidos em um navegador de desktop, mas não em um navegador móvel. Ou fique oculto visualmente, mas ainda disponível para um leitor de tela.

— Newtron
fonte

Então você está dizendo que os trunfos ocultos são exibidos? Nesse caso, você está dizendo que seu propósito é simplesmente substituir a apresentação. Hmmm.

— james.garriss

meu palpite é que, sim, trunfos ocultos são exibidos. mas, na verdade, não experimentei. pareceria inútil se o css pudesse substituí-lo.

— newtron de

Vitória da semântica. Se não deveria estar lá, remova-o do fluxo de documentos no nível de documentos. Se deveria fazer parte do fluxo de documentos, mas em certos casos você não quer que faça parte da experiência visual, trate-o na camada cosmética. Lembre-se de que alguns agentes tentam analisar CSS e se eles determinam que algo não seria VISTO, eles não geram a saída. Acho que é um comportamento aberrante, mas pode ajudar saber.

Relacionado a alguns dos comentários aqui (@ james-garris, @newtron), de acordo com developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… , a exibição realmente supera os ocultos - veja a figura :-)

— Jurko Gospodnetić

Uma diferença importante que observei na página MDN para o atributo oculto: "Alterar o valor da propriedade display CSS em um elemento com o atributo oculto substitui o comportamento. Por exemplo, os elementos estilizados display: flex serão exibidos apesar da presença do atributo oculto."

— mohsinulhaq