152883 2016-01-08 01:47:43 -0800 User Agent style sheet should include !important directive when defining display:none on [hidden] attribute selector 2023-06-27 11:12:40 -0700 1 1 1 Unclassified WebKit CSS Safari 9 Unspecified Unspecified NEW BrowserCompat, InRadar, WPTImpact P2 Normal --- 1 jcraig jcraig ahmad.saleem792 ap dino eoconnor ian jcraig simon.fraser tabatkins webkit-bug-importer zalan zcorpan oldest_to_newest 1153783 0 jcraig 2016-01-08 01:47:43 -0800 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. 1277745 1 webkit-bug-importer 2017-02-16 10:43:33 -0800 <rdar://problem/30559389> 1745373 2 zcorpan 2021-03-30 15:44:40 -0700 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. 1898029 3 ahmad.saleem792 2022-09-12 15:05:13 -0700 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! 1898285 4 zcorpan 2022-09-13 10:44:14 -0700 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