visibility:hiddenとdisplay:none

動点P

ビジビリティ・ヒドゥンとディスプレイ・ナンって新しいジブリ映画でありそうじゃない？

動点Qちゃん

なんですか、その要素達の中の透明化された悲しい物語っぽい話・・・

変数ｘ

意味わからなすぎるだろ。要素を非表示にするCSSプロパティのことを勉強していく回だときちんと説明しろ。

要素を非表示にするCSSプロパティは各種あるのですが、chromeでは効いたのにIEで動かなかったというトラブルがあったので健忘録がてら記録して、もう一度プロパティについて復習しようと思いました。

IE：要素を非表示にしたのにhoverが効かない

今回はポップアップを作っているときに、ポップアップで画像が出現した範囲だけ、閉じても:hoverが効かなくなるという事態が発生しました。（chromeでは問題なく動いていました）

上記のようなlight box風のポップアップを作っておりました。

ポップアップする画像、下の黒いマスク部分を別に作っておき、クリックでクラスを着け外しして表示・非表示を制御する仕組みです。

ポップアップした画像を閉じたあと、なぜかhoverが効く部分と効かない部分が出まして、なんだろうこの現象はと思ってたんですが、どうも画像が出ていた部分でhoverが効かなくなっているらしいんですね。多分何か要素が上に乗っているような状態になってポインターで下の画像にhoverできなくなっているっぽい。

.lightbox {
    opacity: 0;
    pointer-events: none;
}

そのとき出現する画像につけていたプロパティは透明度とポインターイベントの有り無しみたいなものだけでした。結論から言うと透明にしてポインターイベント無しの状態にしても、IEだと要素は残っているような状態になってしまっていたっぽいです。

なのできちんとdisplay:noneなどをつけてあげると、IEでもうまくhoverが効くようになりました。

    opacity: 0;
    pointer-events: none;
    display: none;

しかし、display:noneをつけると、transitionでふわっと表示する、みたいな効果がつけられなくなるんです。なのでdisplay:noneを付けずになんとかしたいわけです。

要素を非表示にするCSSプロパティ

ここで一回ちゃんと要素の非表示方法について復習しておきます。

そもそもpointer-eventsはクリックイベントを無効化するだけで要素自体のあるなしには変化させないものなので最初から使わない方が良かったです。

ここで残るはvisibility:hiddenを使う方法です。opacity:0と同様にただ透明化するだけではなく、アクセシビリティも無くなるので、タブフォーカスもなくなり、スクリーンリーダーに読み上げられることもなく、アクセシビリティツリーから削除されるようです。

ただ空の要素としてレンダリングはされているのでtransitionなどのアニメには効くという優れた機能を持っています。もっと詳細に考えるとDOMツリーですとか勉強不足な分野に突っ込んでしまいそうなので現時点ではここまでしかわからないです。

ほかにも非表示にするには場所を飛ばしたりサイズを調整するなどいろいろあるようですが、簡単なのはvisibility:hiddenを指定してあげることだと思います。