Bug 152883 – User Agent style sheet should include !important directive when defining display:none on [hidden] attribute selector

• Component: CSS
• Status: NEW

[James Craig]

User Agent style sheet should include !important directive when defining display:none on [hidden] attribute selector...

WebKit uses the WHATWG spec recommendation for display:none on html:*[hidden]

> [hidden], area, base, basefont, datalist, head, link, menu[type=context i], meta,
> noembed, noframes, param, rp, script, source, style, template, track, title {
>   display: none;
> }

https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS

...but as specified, the behavior of @hidden is too easy to accidentally override.

<div hidden> example </div>

Even a simple element selector negates the usefulness of the @hidden API and causes the element to be displayed.
div { display: block; }

And the API no longer works on any element matching an author defined display rule.
el.hidden = true; // Does nothing.

I believe the solution is to change the user agent CSS (and the ultimately the HTML specs) to include this rule block:

[hidden] {
  display: none !important;
}

This way the @hidden API leverages a higher specificity than all common CSS selectors.

[Radar WebKit Bug Importer]

<rdar://problem/30559389>

[Simon Pieters (:zcorpan)]

Not using !important for [hidden] is intentional, as it allows for more author control of how to hide it. Also there are other rules (embed, table elements) with [hidden] in the UA stylesheet (in the spec) that could complicate things if you add !important.

https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
https://html.spec.whatwg.org/multipage/rendering.html#tables-2

> ...but as specified, the behavior of @hidden is too easy to accidentally override.

How often do web developers run into this? Are there other solutions that address the issue without taking away control, e.g. mapping [hidden] to  content-visibility: hidden; instead?

It would be good to discuss this in a whatwg/html issue.

[Ahmad Saleem]

Is it something clarified with WHATWG/html now or is it something need to be fixed in html.css file for all [hidden] attributes? Appreciate if someone can clarify. Thanks!

[Simon Pieters (:zcorpan)]

The spec now has:


[hidden]:not([hidden=until-found i]) {
  display: none;
}

[hidden=until-found i]:not(embed) {
  content-visibility: hidden;
}

embed[hidden] { display: inline; height: 0; width: 0; } 

colgroup, colgroup[hidden] { display: table-column-group; }
col, col[hidden] { display: table-column; }
thead, thead[hidden] { display: table-header-group; }
tbody, tbody[hidden] { display: table-row-group; }
tfoot, tfoot[hidden] { display: table-footer-group; }
tr, tr[hidden] { display: table-row; }
td, th { display: table-cell; }

colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
tfoot[hidden], tr[hidden] {
  visibility: collapse;
}


"until-found" is https://bugs.webkit.org/show_bug.cgi?id=238266