Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
構文・カスケード Widely available

visibility

visibility: hidden は要素を視覚的に非表示にしますが、display: none とは異なりレイアウト上のスペースは維持されます。アニメーション可能なプロパティであるため、フェードイン・フェードアウトとの組み合わせに適しています。テーブルの行・列の非表示にも collapse 値で対応できます。

表示制御レイアウト維持

概要

visibility: hidden は要素を視覚的に非表示にしますが、display: none とは異なりレイアウト上のスペースは維持されます。アニメーション可能なプロパティであるため、フェードイン・フェードアウトとの組み合わせに適しています。テーブルの行・列の非表示にも collapse 値で対応できます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1.3+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
.hidden {
  visibility: hidden;
}
.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

実務での使いどころ

  • レイアウトを維持した非表示

    要素を非表示にしつつレイアウトのジャンプを防ぎ、トランジションで滑らかに表示を切り替えます。

注意点

  • visibility: hidden の要素はクリックイベントを受け取りませんが、レイアウトスペースは占有し続けるため、意図しない空白が生じることがあります。

アクセシビリティ

  • visibility: hidden はスクリーンリーダーからもコンテンツを隠します。視覚的にのみ隠したい場合は sr-only パターンを使用してください。

参考リンク