The `hidden` Attribute is Visibly Weak

The hidden attribute: a semantic mirage? This article explores the effectiveness of HTML's hidden attribute for concealing elements, revealing its surprising weakness and suggesting better alternatives.

The hidden attribute, while seemingly straightforward, falls short of its intended purpose. Consider this example:

<div>I'm visible</div>
<div hidden="">I'm hidden</div>

Despite its intuitive name and broad browser support, its effectiveness is questionable.

While Adam Laki appreciates its semantic clarity, Monica Dinculescu points out a critical flaw: hidden is a user agent style, easily overridden by other CSS rules. A simple div { display: block; } will render the supposedly "hidden" element visible:

div { display: block; }
<div hidden="">
  lol guess who's not hidden anymore
  hint: it's this thing
</div>

This highlights two key problems:

1. Fragility: The hidden attribute is easily overridden by almost any CSS display property other than none, making its reliability questionable. This is particularly frustrating because the attribute is explicitly intended to hide elements.

2. Overloaded display Property: The display property's dual role (controlling visibility and element type) is inefficient. A dedicated CSS property for visibility would be preferable, but backward compatibility prevents this.

To leverage the semantic benefits of hidden while ensuring reliable hiding, Monica suggests this CSS rule:

[hidden] { display: none !important; }

This can be included in a CSS reset or base stylesheet.

Alternatively, using CSS classes provides a more robust and flexible approach. A common utility class might look like this:

.hide, .hidden {
  display: none;
}

However, context matters. For dynamic visibility changes with visual effects, a more tailored approach is often necessary:

.menu {
   opacity: 0;
   visibility: hidden;
   transition: 0.2s;
   transform: translateX(20px);
   &[data-open] {
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
   }
}

In conclusion, while the hidden attribute offers semantic appeal, its inherent weakness necessitates careful consideration. For reliable element hiding, CSS classes or a targeted CSS rule overriding hidden provide more dependable solutions. The best approach depends on the specific context and desired level of control.

The above is the detailed content of The `hidden` Attribute is Visibly Weak. For more information, please follow other related articles on the PHP Chinese website!