web-dev-qa-db-ja.com

非表示属性（HTML5）とdisplay：noneルール（CSS）の違いは何ですか？

HTML5には、コンテンツを非表示にするために使用できる新しいグローバル属性hiddenがあります。

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

CSSにはdisplay:noneルールがあり、これを使用してコンテンツを非表示にすることもできます。

article { display:none; }

視覚的には、それらは同一です。意味的に違いは何ですか？計算上？

どちらを使用するかについて、どのガイドラインを考慮する必要がありますか？

TIA。

[〜＃〜] edit [〜＃〜]：@newtronの応答に基づいて（以下）、さらに検索しました。 hidden属性は昨年激しく争われ、（明らかに）HTML5仕様にはほとんど含まれていませんでした。それは冗長であり、目的がないと主張する人もいました。私が知ることができることから、最終的な評価はこれです：ウェブブラウザのみをターゲットにしている場合、違いはありません。 （あるページは、Webブラウザーがdisplay:noneを使用して隠し属性を実装していると断言しました。）しかし、アクセシビリティを検討している場合（たとえば、コンテンツがスクリーンリーダーで読み取られることを期待している場合）、違いがあります。 CSSルールdisplay:noneはWebブラウザーからコンテンツを隠すかもしれませんが、対応するariaルール（たとえば、aria-hidden="false"）はそれを読み込もうとします。したがって、@ newtronの答えが正しいことに同意しますが、おそらく（ほぼ間違いなく）私が望むほど明確ではありません。ご協力いただき、@ newtronに感謝します。

htmlcsshtml5visibility
102
james.garriss

主な違いは、hidden要素がプレゼンテーションに関係なく常に非表示になることです。

Hidden属性は、別のプレゼンテーションで正当に表示される可能性のあるコンテンツを非表示にするために使用しないでください。たとえば、非表示を使用してタブ付きダイアログのパネルを非表示にするのは正しくありません。タブ付きインターフェイスは単なるオーバーフロープレゼンテーションの一種であるため、スクロールバーを使用して1つの大きなページにすべてのフォームコントロールを表示することもできます。同様に、この属性を使用して1つのプレゼンテーションのみからコンテンツを非表示にすることは正しくありません。何かが非表示としてマークされている場合、スクリーンリーダーなどのすべてのプレゼンテーションから非表示になります。

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

CSSはさまざまなメディア/プレゼンテーションタイプをターゲットにできるため、display: noneは、特定のプレゼンテーションに依存します。例えば。一部の要素にはdisplay: noneデスクトップブラウザで表示した場合、モバイルブラウザでは表示しません。または、視覚的に隠されているが、スクリーンリーダーは引き続き利用できます。

57
newtron