Qual è la differenza tra l'attributo nascosto (HTML5) e il display: nessuna regola (CSS)?

111

HTML5 ha un nuovo attributo globale hidden, che può essere utilizzato per nascondere il contenuto.

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

CSS ha la display:noneregola, che può essere utilizzata anche per nascondere i contenuti.

article { display:none; }

Visivamente, sono identici. Qual è la differenza semanticamente? Computazionalmente?

Quali linee guida dovrei considerare su quando utilizzare l'una o l'altra?

TIA.

EDIT : sulla base delle risposte di @ newtron (sotto), ho fatto più ricerche. L' hiddenattributo è stato fortemente contestato lo scorso anno e (apparentemente) a malapena è entrato nelle specifiche HTML5. Alcuni hanno sostenuto che fosse ridondante e non avesse alcuno scopo. Da quello che posso dire, la valutazione finale è questa: se mi rivolgo solo ai browser web, non c'è differenza. (Una pagina affermava addirittura che i browser web usassero display:nonel'attributo nascosto.) Ma se sto considerando l'accessibilità (ad esempio, forse mi aspetto che il mio contenuto venga letto da lettori di schermo), allora c'è una differenza. La regola CSS display:nonepotrebbe nascondere i miei contenuti dai browser web, ma una regola aria corrispondente (ad es.aria-hidden="false") potrebbe provare a leggerlo. Quindi, ora sono d'accordo sul fatto che la risposta di @ newtron sia corretta, anche se forse (probabilmente) non è così chiara come vorrei. Grazie @newtron per il tuo aiuto.

css html visibility

— james.garriss
fonte

Non sapevo nemmeno che l' hiddenattributo esistesse, ma sicuramente una buona domanda in quanto sembra violare la separazione struttura / presentazione.

— Waldheinz

Per coloro che non hanno ancora avuto la gioia di leggere le specifiche HTML5 su questo attributo: w3.org/TR/html5/editing.html#the-hidden-attribute

— james.garriss

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

— Yiğit Yener

Già letto, @Yigit. Ha anche più di un anno. E nascosto è ancora nelle specifiche. Ciò mi indicherebbe che la proposta non ha ottenuto alcun convertito.

— james.garriss

Grazie per la modifica. Scusa non è stato chiaro! Le informazioni che hai aggiunto sopra sono fantastiche. +1

— newtron

La differenza fondamentale sembra essere che gli hiddenelementi sono sempre nascosti indipendentemente dalla presentazione:

L'attributo nascosto non deve essere utilizzato per nascondere contenuti che potrebbero essere legittimamente mostrati in un'altra presentazione. Ad esempio, non è corretto usare nascosto per nascondere i pannelli in una finestra di dialogo a schede, perché l'interfaccia a schede è semplicemente una sorta di presentazione di overflow: si potrebbe altrettanto bene mostrare tutti i controlli del modulo in una grande pagina con una barra di scorrimento. Allo stesso modo non è corretto utilizzare questo attributo per nascondere il contenuto di una sola presentazione: se qualcosa è contrassegnato come nascosto, viene nascosto da tutte le presentazioni, inclusi, ad esempio, gli screen reader.

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

Poiché CSS può indirizzare diversi tipi di media / presentazione, display: nonedipenderà da una data presentazione. Ad esempio, alcuni elementi potrebbero essere display: nonevisualizzati in un browser desktop, ma non in un browser mobile. Oppure essere nascosto visivamente ma ancora disponibile per uno screen reader.

— newtron
fonte

Quindi stai dicendo che vengono visualizzati i trionfi nascosti? Se è così, stai dicendo che lo scopo è semplicemente quello di ignorare la presentazione. Hmmm.

— james.garriss

la mia ipotesi è che, sì, vengono visualizzati i trionfi nascosti. ma in realtà non l'ho sperimentato. sembrerebbe piuttosto inutile se il css potesse sovrascriverlo.

— newtron

La semantica vince. Se non dovrebbe essere lì, rimuoverlo dal flusso di documenti a livello di documento. Se dovrebbe far parte del flusso di documenti ma in alcuni casi non vuoi che faccia parte dell'esperienza visiva, gestiscilo a livello cosmetico. Tieni presente che alcuni agenti tentano di analizzare CSS e se determinano che qualcosa non sarebbe VISTO, non lo generano affatto. Penso che questo sia un comportamento aberrante ma può aiutare a sapere.

In relazione ad alcuni dei commenti qui (@ james-garris, @newtron), secondo developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… , mostra effettivamente trionfi nascosti - vai a capire :-)

— Jurko Gospodnetić

Una differenza importante che ho notato sulla pagina MDN per l'attributo nascosto: "La modifica del valore della proprietà di visualizzazione CSS su un elemento con l'attributo nascosto sovrascrive il comportamento. Ad esempio, gli elementi in stile display: flex verranno visualizzati nonostante la presenza dell'attributo nascosto".

— mohsinulhaq