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

[Kang-Hao (Kenny) Lu]

There's relevant discussion in Bugzilla too [1].

(12/11/14 5:49), 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.

Would it be possible to treat this as !important presentation hint so
that it overrides all author-level non-important declarations but not
important ones? So that for Hixie's use cases, you can still do

  [hidden] {
    display: block !important;
    opacity: 0;
  }

. This is assuming that Hixie's use cases are not strong and that this
is implementable. All other presentation hints are not !important so
this might indeed not be implementable.

(12/11/14 8:59), Glenn Maynard wrote:
> On Tue, Nov 13, 2012 at 4:38 PM, Ian Hickson <ian at hixie.ch> wrote:
>
>>  You just have to write .thing:not([hidden]), or have an explicit
>> [hidden] rule. It's not a big deal.
>
> This is a cumbersome, hackish workaround.  I shouldn't have to care
> about whether an element might have its @hidden property set when I
> set an element to inline-block, and I shouldn't need to hack up my
> CSS when I hide an element.

The less hackish way is probably to remember to add

[hidden] {
  display: none !important;
}

at the beginning of your stylesheet and remember not to use !important
'display' later. This is pretty much equivalent to the suggestion above.

(12/11/14 8:59), Glenn Maynard wrote:
>> 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.
> 
> Surely nothing prevents adding a CSS property, eg. "shown: no", which takes
> precedence over display when set to "no" and does nothing when set to
> "yes".  It's probably too late to change @hidden to use it, though maybe
> not; it would probably break a roughly equal number of sites as the change
> proposed here would.

So there's 'display-box: none'[2] in css-display-3, but yes, by the time
browsers ship this property, if browsers ever do, it's probably too late
to change the UA style for [style]. And also, I don't see how this
solves Tab's problem because 'display' expands to 'display-box' too.

(12/11/14 5:49), Edward O'Connor wrote:
> Consider a bunch of thingies, represented in the DOM with a pile of
> <div>s. Some of them are hidden.
> 
> [...]
> 
> These thingies are flexboxes:
> 
>   .thing {
>     display: flex;
>   }

You can do 'display-outside: flex' in the future, but it seems a bit
long and if you actually remember this problem, you should just place

[hidden] {
  display: none !important;
}

at the beginning.



[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=19277
[2] http://dev.w3.org/csswg/css-display-3/#the-display-box


Cheers,
Kenny
-- 
Web Specialist, Oupeng Browser, Beijing
Try Oupeng: http://www.oupeng.com/