'隐藏”属性显然很弱

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中文网其他相关文章！