[whatwg] hidden="" should be "display:none !important" in the UA stylesheet

[Ian Hickson]

On Tue, 13 Nov 2012, Edward O'Connor wrote:
> 
> I don't recall if this was in person or in email, but I think Tab made a 
> compelling argument in favor of changing the implementation of hidden="" 
> to be
> 
>   [hidden] {
>     display: none !important;
>   }
> 
> in the UA stylesheet.

It's a non-starter (assuming !important in the UA style sheet means that 
it cascades after the !important user sheet), because it means that you 
can't change [hidden] from being implemented using 'display' to being 
implemented using 'opacity' or some similar solution, which you typically 
want for transitions to work well.


> Consider a bunch of thingies, represented in the DOM with a pile of
> <div>s. Some of them are hidden.
> 
>   <div id=thing0 class=thing>...</div>
>   <div id=thing1 class=thing>...</div>
>   ...
>   <div id=thing46 class=thing>...</div>
>   <div id=thing47 class=thing hidden>...</div>
>   <div id=thing48 class=thing>...</div>
>   ...
>   <div id=thing84 class=thing>...</div>
>   <div id=thing85 class=thing hidden>...</div>
>   <div id=thing86 class=thing>...</div>
>   ...
>   <div id=thingN class=thing>...</div>
> 
> These thingies are flexboxes:
> 
>   .thing {
>     display: flex;
>   }

You just have to write .thing:not([hidden]), or have an explicit [hidden] 
rule. It's not a big deal.

It's like how if you say 

   * { font: inherit; }

...you break <pre> and <h1>. It's not a big deal, you just set the fonts 
on those too.

The better solution would be for us to cascade the display type separately 
from the rendering tree inclusion/exclusion decision, but that boat sailed 
a long time ago.

(You get similar problems e.g. with:

   strong { text-decoration: blink; }
   .thing { text-decoration: underline; }

   <strong>...</strong>
   <span class="thing">...</span>
   <strong class="thing">...</strong> -- oops

...here the last one cascades unexpectedly because orthogonal decisions 
are being cascaded together.)

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'