「隠された」属性は目に見えて弱いです

hidden属性：セマンティックミラージュ？この記事では、要素を隠すためのHTMLのhidden属性の有効性を調査し、その驚くべき弱点を明らかにし、より良い代替案を示唆しています。

hidden属性は、一見単純に見えますが、意図した目的に及ばない。この例を考えてみましょう。

<div>私は見える</div>
<div hidden="">私は隠されています</div>

その直感的な名前と幅広いブラウザのサポートにもかかわらず、その効果は疑わしいです。

Adam Lakiはセマンティックな明快さを高く評価していますが、Monica Dinculescuは重要な欠陥を指摘しています。Hidden hidden 、他のCSSルールによって簡単にオーバーライドされたユーザーエージェントスタイルです。 simple div { display: block; } 「隠された」要素が見えると思われる：

 div {display：block; }
<div hidden="">
  笑はもう隠されていないと思います
  ヒント：それはこのことです
</div>

これは、2つの重要な問題を強調しています。

1. 脆弱性： hidden属性は、ほとんどnoneのCSS displayプロパティによって簡単に無効にされ、その信頼性は疑わしいものになります。属性は要素を非表示にすることを明示的に意図しているため、これは特にイライラします。

2. オーバーロードされたdisplayプロパティ： displayプロパティの二重の役割（可視性と要素タイプの制御）は非効率的です。可視性のための専用のCSSプロパティが望ましいでしょうが、後方互換性はこれを防ぎます。

信頼できる隠れを確保しながら、 hiddenセマンティックの利点を活用するために、モニカはこのCSSルールを提案します。

 [hidden] {展示：なし！重要; }

これは、CSSリセットまたはベーススタイルシートに含めることができます。

または、CSSクラスを使用すると、より堅牢で柔軟なアプローチが提供されます。一般的なユーティリティクラスは次のようになるかもしれません：

 .hide、.hidden {
  表示：なし;
}

ただし、コンテキストが重要です。視覚効果による動的視認性の変化のために、よりカスタマイズされたアプローチがしばしば必要です。

 .menu {
   不透明：0;
   可視性：隠された;
   遷移：0.2秒;
   変換：transtex（20px）;
   ＆[data-open] {
     不透明：1;
     可視性：表示されます。
     変換：transtex（0）;
   }
}

結論として、 hidden属性はセマンティックな魅力を提供しますが、その固有の弱点は慎重に検討する必要があります。信頼できる要素の隠れ、CSSクラスまたはターゲットを絞ったCSSルールオーバーライドhiddenは、より信頼できるソリューションを提供します。最良のアプローチは、特定のコンテキストと望ましいレベルの制御に依存します。

以上が「隠された」属性は目に見えて弱いですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。