☰

hidden 属性 (HTML5) と display:none ルール (CSS) の違いは何ですか? 質問する

tag-icon • tag-icon css html visibility
hidden 属性 (HTML5) と display:none ルール (CSS) の違いは何ですか? 質問する

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

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

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

article { display:none; }

見た目上は同一です。意味的にはどう違うのでしょうか? 計算上はどう違うのでしょうか?

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

ティア。

編集: @newtron の回答 (下記) に基づいて、さらに検索しました。このhidden属性は昨年激しく論争され、(どうやら) HTML5 仕様にかろうじて取り入れられました。冗長で目的がないと主張する人もいました。私が知る限り、最終的な評価は次のとおりです。Web ブラウザーのみを対象としている場合は、違いはありません。(あるページでは、Web ブラウザーはかつてdisplay:nonehidden 属性を実装していたと主張していました。) ただし、アクセシビリティを考慮している場合 (たとえば、コンテンツがスクリーン リーダーで読み取られることを期待している場合)、違いがあります。CSS ルールはdisplay:noneWeb ブラウザーからコンテンツを非表示にする可能性がありますが、対応する aria ルール (例、aria-hidden="false") はコンテンツを読み取ろうとする可能性があります。したがって、@newtron の回答が正しいことに同意しますが、(おそらく) 私が望むほど明確ではないかもしれません。@newtron、ご協力ありがとうございます。

ベストアンサー1

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

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

http://dev.w3.org/html5/spec/Overview.html#隠し属性

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

おすすめ記事