Re: [whatwg] hidden= should be display:none !important in the UA stylesheet
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
divs. 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. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] hidden= should be display:none !important in the UA stylesheet
On Tue, Nov 13, 2012 at 1:49 PM, Edward O'Connor eocon...@apple.com wrote:
Hi,
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.
As a further bit of info, the UA-important level is defined in the
Cascade module at http://dev.w3.org/csswg/css3-cascade/#cascade.
It's higher than everything except Transitions (and maybe Animations,
depending on the browser right now, but that'll settle down soonish).
This means that it's impossible for author-level code to override the
property, but I think that's what the correct and desirable behavior
is for this.
~TJ
Re: [whatwg] hidden= should be display:none !important in the UA stylesheet
On Tue, Nov 13, 2012 at 4:38 PM, Ian Hickson i...@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 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. -- Glenn Maynard
Re: [whatwg] hidden= should be display:none !important in the UA stylesheet
On Tue, 13 Nov 2012, Glenn Maynard wrote: k On Tue, Nov 13, 2012 at 4:38 PM, Ian Hickson i...@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. To be honest, in practice I almost always have a rule for [hidden] because I rarely want it to use 'display: none' anyway. So I don't really agree that it's hackish or cumbersome, at least not in my case. 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. That's like saying you shouldn't have to care whether a form control is disabled when you set its color, or whether a link is visited when you set its color, or whether a details or dialog element is open when you set its dimensions, or what the rel= value on a link is when you set its cursor, or various other similar cases. 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. I meant the ship had sailed for making 'display' a shorthand, but I guess in theory we could still do this. In fact, people periodically say display-inner/display-outer should be introduced. This kind of thing, if done right, would certainly avoid this particular issue in the future for hidden=. Not a quick fix, though. -- Ian Hickson U+1047E)\._.,--,'``.fL http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] hidden= should be display:none !important in the UA stylesheet
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 i...@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
divs. 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/
