Re: [whatwg] hidden attribute useless with display: flex?
On Thu, 1 May 2014, David Bruant wrote:
Le 30/04/2014 23:32, Ian Hickson a écrit :
What I'm trying to do is just that an element have display:flex
and to hide it with the hidden attribute when I don't need the
element to be shown. I guess my only option is changing
style.display?
Just add [hidden] { display: none } to your style sheet.
Hmm... interesting. And that works because my stylesheet is the author
stylesheet which takes precedence over the UA stylesheet.
Is there a scenario where CSS specificity leads to this rule being
ignored?
Yeah, as usual specificity can rock the boat. :-)
div.ui { display: flex; }
...would override it (since 0,0,1,1 0,0,1,0). But if that's an issue,
you can move this to the !important level:
[hidden] { display: none ! important; }
If the answer is no, I'm sold. It's not any worse than *{box-sizing:
border-box} which I do all the time.
Yeah, it's exactly like that. Or * { font: inherit; }, which I do all the
time, but which you then have to fix for headings and strong and so on.
--
Ian Hickson U+1047E)\._.,--,'``.fL
http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] hidden attribute useless with display: flex?
Ok, sorry, I was pissed off... The web platform triggers this sort of
reactions sometimes :-)
Constructive proposal:
* a special value for the hidden attribute that forces the element to be
hidden regardless of what the CSS or style attribute says for the
display value.
Maybe `hidden=force`?
This might break existing website which would use the force value, but
since it had no special meaning currently and there is no good reason to
use this value, I'd say the odds are very low.
Any implementor interested?
David
Le 29/04/2014 23:32, David Bruant a écrit :
Hi,
// CSS:
div{
display: flex;
}
// HTML:
div hidden/div
Per spec, the div should be shown right? I imagine there is no way
back on that?
Does it mean hidden only works when the default (UA stylesheet)
display value is kept? Does it mean hidden is completely useless when
trying to combine it with display:flex?
What I'm trying to do is just that an element have display:flex and to
hide it with the hidden attribute when I don't need the element to be
shown. I guess my only option is changing style.display?
Thanks,
David
Re: [whatwg] hidden attribute useless with display: flex?
Le 29/04/2014 23:32, David Bruant a écrit :
Hi,
// CSS:
div{
display: flex;
}
// HTML:
div hidden/div
Per spec, the div should be shown right? I imagine there is no way back on
that?
We could change the specification to use display-box instead. That might work.
--
http://annevankesteren.nl/
Re: [whatwg] hidden attribute useless with display: flex?
Le 30/04/2014 13:01, Anne van Kesteren a écrit :
Le 29/04/2014 23:32, David Bruant a écrit :
Hi,
// CSS:
div{
display: flex;
}
// HTML:
div hidden/div
Per spec, the div should be shown right? I imagine there is no way back on
that?
We could change the specification to use display-box instead. That might work.
Just read about display-box [1]. (Sorry, I'm lagging behind on CSS
innovations)
Just to be sure I understand, are you suggesting to change the default
UA stylesheet from
*[hidden]{ display: none; }
to
*[hidden]{ display-box: none; }
Also, what's the intention/implementation status of display-box across
various browsers?
Thanks,
David
[1] http://dev.w3.org/csswg/css-display-3/#the-display-box
Re: [whatwg] hidden attribute useless with display: flex?
Previous discussion:
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-November/037905.html
On Wed, Apr 30, 2014 at 6:01 AM, Anne van Kesteren ann...@annevk.nl wrote:
div hidden/div
Per spec, the div should be shown right? I imagine there is no way back
on
that?
We could change the specification to use display-box instead. That might
work.
It's too bad that display-box also has multiple uses--it doesn't only
display or hide the content, it has a third contents mode. That means
the same problem would happen as soon as you set display-box: contents on
something--it would override [hidden]. What we really need is a CSS
property that only sets whether the element is visible or not and nothing
else, like visible: false. That way, the only way [hidden] gets
overridden is if you're actually setting the visibility style.
I assume it's too late to change the style [hidden] uses, though. Lots of
pages do things like d = elem.style.display; elem.style.display = block;
width = elem.style.offsetWidth; elem.style.display = d; to work around
offset* being 0 while hidden, and if [hidden] changes to some other style
(or to !important) that code will break.
I always just put [hidden] { display: none !important; } in my stylesheets
to work around this. That sucks, since it makes [hidden] in pages and
scripts I write incompatible with everyone else, who may be writing scripts
that don't understand this (such as the above pattern), or may work around
it in some other way.
--
Glenn Maynard
Re: [whatwg] hidden attribute useless with display: flex?
On Wed, Apr 30, 2014 at 7:32 AM, Glenn Maynard gl...@zewt.org wrote: It's too bad that display-box also has multiple uses--it doesn't only display or hide the content, it has a third contents mode. That means the same problem would happen as soon as you set display-box: contents on something--it would override [hidden]. What we really need is a CSS property that only sets whether the element is visible or not and nothing else, like visible: false. That way, the only way [hidden] gets overridden is if you're actually setting the visibility style. Mind bringing this up in www-style? My thinking in that design is that display-box controls whether an element generates boxes at all, which seems consistent with including the 'contents' value. But if it seems useful to have a property dedicated to literally just hiding the element, we can see about rejiggering things. ~TJ
Re: [whatwg] hidden attribute useless with display: flex?
On Wed, 30 Apr 2014, David Bruant wrote:
Le 29/04/2014 23:32, David Bruant a écrit :
// CSS:
div {
display: flex;
}
// HTML:
div hidden/div
Per spec, the div should be shown right? I imagine there is no way
back on that?
Right. You want:
div[hidden] { display: block }
...in your style sheet. It's the equivalent of:
strong { font: 1em sans-serif; }
...removing the bold, or:
td.foo { display: none; }
...making all the cells after td class=foo end up in the wrong column.
Does it mean hidden only works when the default (UA stylesheet)
display value is kept? Does it mean hidden is completely useless when
trying to combine it with display:flex?
No, it just means you have to be careful with your CSS.
Personally I often use this rule:
[hidden] { display: block; opacity: 0; }
...combined with CSS transitions to animate elements that are being hidden
or shown. This is one example of why it's important that author CSS be
able to override the default CSS.
What I'm trying to do is just that an element have display:flex and to
hide it with the hidden attribute when I don't need the element to be
shown. I guess my only option is changing style.display?
Just add [hidden] { display: none } to your style sheet.
Constructive proposal:
* a special value for the hidden attribute that forces the element to be
hidden regardless of what the CSS or style attribute says for the display
value.
Maybe `hidden=force`?
Hidden how? 'visibility'? 'display'? 'opacity'? Why? What if you later
want to style it differently?
On Wed, 30 Apr 2014, Anne van Kesteren wrote:
We could change the specification to use display-box instead. That might
work.
Would that break sites that are intentionally replacing the styling for
hidden= from 'display:none' to 'opacity:0' ?
On Wed, 30 Apr 2014, Glenn Maynard wrote:
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-November/037905.html
http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Nov/0143.html
--
Ian Hickson U+1047E)\._.,--,'``.fL
http://ln.hixie.ch/ U+263A/, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Re: [whatwg] hidden attribute useless with display: flex?
On Wed, Apr 30, 2014 at 2:32 PM, Ian Hickson i...@hixie.ch wrote: On Wed, 30 Apr 2014, Anne van Kesteren wrote: We could change the specification to use display-box instead. That might work. Would that break sites that are intentionally replacing the styling for hidden= from 'display:none' to 'opacity:0' ? Yes. ~TJ
Re: [whatwg] hidden attribute useless with display: flex?
On Apr 30, 2014, at 17:44, Tab Atkins Jr. jackalm...@gmail.com wrote: On Wed, Apr 30, 2014 at 2:32 PM, Ian Hickson i...@hixie.ch wrote: On Wed, 30 Apr 2014, Anne van Kesteren wrote: We could change the specification to use display-box instead. That might work. Would that break sites that are intentionally replacing the styling for hidden= from 'display:none' to 'opacity:0' ? Yes. I have done this (overwritten hidden to be opacity zero) on multiple client sites. Please don't break them :)
Re: [whatwg] hidden attribute useless with display: flex?
On Wed, Apr 30, 2014 at 4:12 PM, Tab Atkins Jr. jackalm...@gmail.comwrote:
On Wed, Apr 30, 2014 at 7:32 AM, Glenn Maynard gl...@zewt.org wrote:
It's too bad that display-box also has multiple uses--it doesn't only
display or hide the content, it has a third contents mode. That means
the same problem would happen as soon as you set display-box: contents
on
something--it would override [hidden]. What we really need is a CSS
property that only sets whether the element is visible or not and nothing
else, like visible: false. That way, the only way [hidden] gets
overridden is if you're actually setting the visibility style.
Mind bringing this up in www-style? My thinking in that design is
(It's confusing to move conversations to lists some people aren't
subscribed to, since they'll inevitably miss part of the discussion. It'd
help a lot if the lists wouldn't bounce mails if you're subscribed to *any*
w3 mailing list, so cross-posting would work better. But, I think that
starting a new thread on another list without copying it to this one is
even more confusing, so I've CC'd both.)
that display-box controls whether an element generates boxes at all,
which seems consistent with including the 'contents' value. But if it
seems useful to have a property dedicated to literally just hiding the
element, we can see about rejiggering things.
If an element is @hidden, I don't want style rules for other behaviors to
override that. Just as today I don't want a display: block; style to break
hidden (I just wanted this inline element to be block when it's not
hidden, not override hidden entirely!), I don't want display-box:
contents; to break hidden either (I just wanted to cause the element
itself to not be rendered when it's not hidden, not override hidden
entirely!)..
That said, we may be past the point where it will really help. It's too
late to actually use this with the default [hidden] rule, which means
authors will have to put a [hidden] { rendered: false; } (or something)
rule in their stylesheet. If authors all need to add a boilerplate rule to
fix @hidden anyway, [hidden] { display: none !important; } works.
--
Glenn Maynard
