Jaka jest różnica między atrybutem hidden (HTML5) a regułą display: none (CSS)?

111

HTML5 ma nowy atrybut globalny hidden, którego można użyć do ukrycia treści.

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

CSS ma display:noneregułę, której można również użyć do ukrycia treści.

article { display:none; }

Wizualnie są identyczne. Jaka jest różnica semantyczna? Obliczeniowo?

Jakie wytyczne należy wziąć pod uwagę, kiedy używać jednej lub drugiej?

TIA.

EDYCJA : Na podstawie odpowiedzi @ newtron (poniżej) przeprowadziłem więcej wyszukiwania. hiddenAtrybut został gorąco sporna w ubiegłym roku i (podobno) ledwo go do specyfikacji HTML5. Niektórzy twierdzili, że jest to zbędne i bezcelowe. Z tego, co mogę stwierdzić, ostateczna ocena jest następująca: jeśli kieruję reklamy tylko do przeglądarek internetowych, nie ma różnicy. (Jedna strona twierdziła nawet, że przeglądarki internetowe używały display:nonedo implementacji atrybutu ukrytego). Ale jeśli rozważam dostępność (np. Być może oczekuję, że moje treści będą czytane przez czytniki ekranu), to jest różnica. Reguła CSS display:nonemoże ukrywać moje treści przed przeglądarkami internetowymi, ale odpowiadająca jej reguła arii (np.aria-hidden="false") może spróbować go przeczytać. Dlatego zgadzam się teraz, że odpowiedź @ newtron jest poprawna, chociaż być może (prawdopodobnie) nie jest tak jasna, jak bym chciał. Dzięki @newtron za pomoc.

css html visibility

— james.garriss
źródło

Nie wiedziałem nawet, że hiddenatrybut istnieje, ale z pewnością dobre pytanie, ponieważ wydaje się, że narusza podział struktury / prezentacji.

— Waldheinz,

Dla tych, którzy nie mieli jeszcze radości z czytania specyfikacji HTML5 w tym atrybucie: w3.org/TR/html5/editing.html#the-hidden-attribute

— james.garriss

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

— Yiğit Yener.

Przeczytaj to już, @Yigit. Ma też ponad rok. I nadal jest ukryty w specyfikacji. To by mi wskazywało, że propozycja nie zdobyła żadnych konwertytów.

— james.garriss

Dzięki za edycję. Przepraszam, to nie było jasne! Informacje dodane powyżej są świetne. +1

— newtron

Kluczową różnicą wydaje się być to, że hiddenelementy są zawsze ukryte niezależnie od prezentacji:

Atrybutu hidden nie można używać do ukrywania treści, które mogłyby zostać zgodnie z prawem pokazane w innej prezentacji. Na przykład niepoprawne jest używanie ukrytych paneli w oknie dialogowym z zakładkami, ponieważ interfejs z zakładkami jest tylko rodzajem przepełnionej prezentacji - równie dobrze można po prostu pokazać wszystkie kontrolki formularza na jednej dużej stronie z paskiem przewijania. Podobnie niepoprawne jest używanie tego atrybutu do ukrywania treści tylko z jednej prezentacji - jeśli coś jest oznaczone jako ukryte, to jest to ukryte dla wszystkich prezentacji, w tym np. Czytników ekranu.

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

Ponieważ CSS może kierować reklamy na różne typy mediów / prezentacji, display: nonebędzie zależne od danej prezentacji. Na przykład niektóre elementy mogą się display: nonewyświetlać w przeglądarce na komputerze, ale nie w przeglądarce mobilnej. Lub ukryj się wizualnie, ale nadal dostępny dla czytnika ekranu.

— newtron
źródło

Więc mówisz, że ukryte atuty wyświetlają się? Jeśli tak, to mówisz, że jego celem jest po prostu zastąpienie prezentacji. Hmmm.

— james.garriss

przypuszczam, że tak, ukryte atuty wyświetlają się. ale tak naprawdę nie eksperymentowałem z tym. wydawałoby się raczej bezcelowe, gdyby CSS mógł to zastąpić.

— newtron

Semantyka wygrywa. Jeśli go tam nie ma, usuń go z przepływu dokumentów na poziomie dokumentu. Jeśli ma to być część przepływu dokumentacji, ale w niektórych przypadkach nie chcesz, aby była częścią doświadczenia wizualnego, zajmij się tym na warstwie kosmetycznej. Pamiętaj, że niektórzy agenci próbują analizować CSS i jeśli stwierdzą, że coś nie zostanie WIDZIANE, to w ogóle tego nie wyświetlą. Myślę, że jest to nienormalne zachowanie, ale warto wiedzieć.

W związku z niektórymi komentarzami tutaj (@ james-garris, @newtron), zgodnie z developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… , wyświetlacz faktycznie przewyższa ukryty - idź rysunek :-)

— Jurko Gospodnetić

Jedna ważna różnica, którą zauważyłem na stronie MDN dla atrybutu ukrytego: „Zmiana wartości właściwości wyświetlania CSS w elemencie z atrybutem ukrytym zastępuje zachowanie. Na przykład elementy stylizowane na display: flex będą wyświetlane pomimo obecności atrybutu ukrytego”.

— mohsinulhaq