HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシート

ページ上の要素、例えばメニューの中身などの表示・非表示を切り替える必要がある時があります。実装方法はいろいろありますが、要素を非表示にする一番簡単な方法はHTMLのhidden属性です。

HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシートを紹介します。

サイトのキャプチャ

The 'hidden' Attribute is Visibly Weak

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

HTMLのhidden属性の使い方と弱点

HTMLには、hidden属性というあなたが期待する通りの機能があります。

hidden属性は、ブラウザのサポートも充実しています。
IE11をはじめ、すべての主要ブラウザでサポートされています。

hidden属性のサポートブラウザ

hidden属性のサポートブラウザ

では、hidden属性は役に立つでしょうか?
うーん、たぶん、ひょっとして、あまり、、、

hidden属性を使用すると、セマンティックが少し改善されます。要素に対してhidden属性を与えると、それが何を意味するか誰でも理解できます。

by Adam Laki, HTML Hidden Attribute

hidden属性のルールはユーザーエージェントスタイルで、あまり具体的ではありません。つまり、displayで定義されたスタイルが優先されます。

by Monica Dinculescu, fyi: [hidden] is a lie

displayで定義されたスタイルが優先されるとは、こういうことです。

hidden属性には、2つの問題があります。

  1. hidden属性はとても弱い存在です。要素に強いセレクタを使用してnone以外の値(block, inline-blockなど)を定義すると、簡単に上書きされます。widthやその他のプロパティと同様に、要素に非表示の属性をアクティブに定義し、実際に非表示にしないと安心できません。
  2. これは、displayプロパティに責任があります。hidden属性が要素の可視を制御するプロパティではなく、ブロックのタイプを制御するプロパティと同じであれば、期待通りの結果が得られたでしょう。残念なことに、Webは下位互換性を禁止しています(Web全体の健全性にとっては良いことです)。

もし、属性のセマンティックを望むなら、Monicaの提案はどうでしょうか。
下記のCSSをリセットCSS、またはベースのCSSに加えておきます。

また、ユーティリティのclassを用意しておく古典的な方法も素晴らしいです。

要素の表示・非表示を切り替える便利なスタイルシート

忘れてはならないのは、何かをする方法は常に無限にあるということです。私は表示・非表示を行う際には、下記のCSSを使用しています。

表示・非表示を切り替える必要があるが、常にアクセシブルにしておく必要があるメニューなどに適しています。

sponsors

top of page

©2019 coliss