表示の切り替えをする時、大抵の場合 JavaScript を使わないとできないとなるのだが、CSSのみで対応可能な場合もあるので、検討する時に使えるテクニックを集める。
切り替えを行う
ID アンカーを使うと URL内の ＃以降の文字列でターゲットの指定ができる。
<divid="modal"class="overlay">Dummy Modal</div>.overlay{visibility:hidden;}.overlay:target{visibility:visible;}https://test.dev/link
https://test.dev/link#modal
と言うそれぞれにアクセスすることで表示非表示が切り替えられる。
modal が css上の target にあたるかどうかで切り替えられる。
アコーディオンやその他いろいろな箇所で応用できる。
中の要素があるかないか
中身があるかないかでの切り替えも可能。要素を差し込んだりする場合に有効になってくる。
要素がない場合、余計なスペースを残してしまうとデザインが崩れることがあるのでそれを補正したい。
<divclass="footer"><button>Cancel</button><button>OK</button></div>.footer{margin:20px;padding:20px;}.footer:empty{margin:0;padding:0;}