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

Odpowiedzi:

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