hidden グローバル属性は、要素はまだ、あるいはもはや関連性がないことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。ブラウザはこのような要素を表示しません。
この属性は、表示することが正当であるはずのコンテンツを隠すために使用してはいけません。例えば、タブインターフェイスでタブパネルを隠すために使用するものではありません。これはスタイルを決めているのであり、パネルを表示する別のスタイルが、完全に正しいページという結果につながるためです。
隠された要素は、隠されていない要素からリンクしないようにしてください。また、隠された要素の子孫要素は依然アクティブです。これは script 要素が実行可能、またフォーム要素が送信可能であるということです。
注記: hidden 属性を持つ要素の display CSS プロパティの値を変更すると、動作をオーバーライドします。例えば display: flex を設定した要素は、hidden 属性が与えられているかにかかわらずスクリーンに表示されます。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard The definition of 'hidden' in that specification. |
Living Standard | 最新のスナップショットである HTML5.1 から変更なし。 |
| WHATWG HTML Living Standard The definition of 'Hidden elements' in that specification. |
Living Standard | CSS による hidden 属性のデフォルトレンダリング方法を提案 |
| HTML5.1 The definition of 'hidden' in that specification. |
草案 | WHATWG HTML Living Standard のスナップショットであり、この属性を初めて定義しました。 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | (有) | 4.0 (2) | 11 | (有) | (有) |
| 機能 | Android | Android 版 Chrome | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | 4 | (有) | 4.0 (2) | 11 | (有) | (有) |
関連情報
- すべてのグローバル属性。