visibility: hidden と display: none の違いは2つ
この2つのCSSの違いについてはよく、「visibility: hiddenは空白を残す」ということだけ説明されている。しかし、詳しく説明するとそれ以外の違いもある。
レイアウトへの影響
visibility: hidden
はレイアウトへの影響を残す。
具体的には次の3つ。
- 要素の表示領域を残す
「要素が生成するボックスのみ残り、要素自体は無くなる」と考えると分かりやすい- 要素の表示域が空白になる。
- クリックなどのマウスイベントを受け付けなくなる。
- 子孫要素を表示可
visibility: visible
を指定することで、指定の子孫要素以下を可視化できる。
- 他の要素への影響を残す
- marginやfloatなども有効なままで、単に空白を残すだけではない
- これを利用して、疑似要素と合わせたclearfixがよく使われていた
display: none
はその要素の表示と、影響を完全に無くす。
子孫要素を表示する方法も無い。
transitionの可否
visibility: hidden
は可能。
display: none
は不可能。
「visibility + transition」の動作は、n秒後にvisibilityの値が変わる、というもの。他のアニメーションと違い段々とは変化しない。
デモ
この文字が表示されましたね?ソースは開発者ツールから見てください。