HTMLタグを非表示にする適切な方法は何ですか？

Question

HTMLを隠すための適切なCSSとは何ですか？例 - <div>タグのようにします。 私はこれを行うために使用します。

div {display:none; visibility:hidden;} 

は、CSSがそのdiv要素を非表示にするには、すべての主要なブラウザをサポートしてい。特にI.E.をサポートしていますか？

Answer 1

display:noneとvisibility:hiddenの両方は、CSS対応のブラウザで広くサポートされているため、一般的なのはCSS caveatです。異なる効果を持つ：display:noneは、ドキュメントがまったく存在しないかのようにレンダリングされますが、visibility:hiddenは、ドキュメントの書式設定時に要素が正しく処理されることを意味します。通常はスペースを占有しますが、完全に透明になった。

どちらを使用するかは、要素を非表示にするという目標に応じて異なります。たとえば、動的に（クライアント側スクリプトを使用して）一部のコンテンツのスイッチをオフまたはオンにした場合、visibility:hiddenは他のコンテンツの再描画を引き起こさないため、より優れている可能性があります。 display:noneが行うとして両方を使用して

は、通常は無意味である無関係なvisibility:hidden（カスケードでは、これらのプロパティの設定内容は、他のスタイルシートで上書きすることができるし、その後display:noneが効果を失う可能性があることが起こるかもしれませんが）。

Answer 2

visibility:hidden;も必要ありません。

div { 
    display:none; 
} 

以上で十分です。それはすべてのブラウザで動作します。要素を完全に隠すので、ページレイアウトに影響を与えなくなります。

Answer 3

display : none; それでも要素は、ページレイアウトでスペースを取るしたい場合は、この

Answer 4

使用visibility: hidden;を行うのに十分な標準的な方法です。たとえば：

Hello 
 
<div style="visibility: hidden; height: 100px;">Hidden</div> 
 
World

あなたはまだ、テキストの2枚の間に100pxに表示されますが、あなたはdiv要素内のコンテンツは表示されません。

使用：divは全くのレイアウトには影響しませんよう

Hello 
 
<div style="display: none; height: 100px;">Hidden</div> 
 
World​​​​​

は、2つのテキスト要素の間にスペースはありません。

どちらも現代のブラウザでサポートされています。

Answer 5

HTML5hiddenという新しいグローバル属性があります。 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hiddenから

：

隠しグローバル属性は、要素がまだないん、または、もはや適切であることを示すブール値の属性です。たとえば、ログイン処理が完了するまで使用できないページの要素を非表示にすることができます。ブラウザーは隠し属性が設定された要素を表示しません。

hiddenがdisplayとvisibilityに比べセマンティックな意味を持っていることに注意してください。そのため、CSS属性ではなくHTML属性です。