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.
<rdar://problem/30559389>
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.
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!
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