'隱藏”屬性顯然很弱

hidden屬性：語義幻影？本文探討了HTML hidden屬性隱藏元素的有效性，揭示了其令人驚訝的弱點並提出了更好的選擇。

hidden屬性雖然似乎很簡單，但其目的卻沒有目的。考慮此示例：

<div>我很明顯</div>
<div hidden="">我隱藏了</div>

儘管其直觀的名稱和廣泛的瀏覽器支持，但其有效性還是值得懷疑的。

儘管亞當·拉基（Adam Laki）欣賞其語義清晰度，但莫妮卡·丁克斯庫（Monica Dinculescu）指出了一個關鍵缺陷： hidden是一種用戶代理樣式，很容易被其他CSS規則覆蓋。簡單的div { display: block; }將使所謂的“隱藏”元素可見：

 div {display：block; }
<div hidden="">
  大聲笑猜誰不再隱藏了
  提示：這是這個東西
</div>

這突出了兩個關鍵問題：

1. 脆弱性： hidden屬性很容易被none CSS display屬性所覆蓋，這使其可靠性值得懷疑。這尤其令人沮喪，因為該屬性明確打算隱藏元素。

2. 超載display屬性： display屬性的雙重角色（控制可見性和元素類型）效率低下。專用的CSS屬性以可見性是可取的，但是向後兼容性可以阻止這種情況。

為了利用hidden的語義益處，同時確保可靠隱藏，莫妮卡建議此CSS規則：

 [hidden] {顯示：無！重要； }

這可以包含在CSS重置或基本樣式表中。

另外，使用CSS類提供了一種更強大，更靈活的方法。一個普通的公用事業類可能是這樣的：

 。
  顯示：無；
}

但是，上下文很重要。對於視覺效果的動態可見性變化，通常需要採用更量身定制的方法：

 。菜單 {
   不透明度：0;
   可見性：隱藏；
   過渡：0.2s;
   變換：Translatex（20px）;
   ＆[data-open] {
     不透明度：1;
     可見性：可見；
     變換：Translatex（0）;
   }
}

總之，儘管hidden屬性提供了語義吸引力，但其固有的弱點需要仔細考慮。對於可靠的元素隱藏，CSS類或目標的CSS規則覆蓋hidden提供了更可靠的解決方案。最佳方法取決於特定的上下文和所需的控制水平。

以上是'隱藏”屬性顯然很弱的詳細內容。更多資訊請關注PHP中文網其他相關文章！