953416 - Pseudo-class for wrapped flex-items

Status: RESOLVED INVALID

(Core :: Layout, enhancement)

Description

[sjw]

There is no way to style a flexbox element if the items are wrapped. I propose an experimental pseudo-class like :(-moz-)wrapped which represents any multiline flex-container with wrapped items in it.

Why do we need this?
A specific scenario would be if you have a horizontal navigation with position: sticky and flex-wrap.
If the user scrolls down, the navigation sticks on the top of the viewport. But on small screens the navigation would cover the whole viewport, because the elements are wrapped. So you need to overwrite the position: sticky there.

Comment 1

[sjw]

You've implemented the flexbox layout. Do you see a necessity in this request?

Comment 2

[Boris Zbarsky [:bzbarsky]]

Doesn't the wrapping depend on the styles?  If so, you can't select on it, since that would introduce a circular dependency in the style system, no?

Comment 3

[Daniel Holbert [:dholbert]]

Yeah -- flexbox wrapping depends on many factors, but largely the contents of the children that may or may not end up needing to be wrapped.

e.g. consider:
data:text/html,<div style="display: flex; flex-wrap: wrap; background: lime; width: 50px"><div>aaaaa</div><div>bbbbb</div>

Depending on how long the string of a's and b's are there (i.e. whether they total to more than 50px), there will either be wrapping or no wrapping, which creates a circular dependency. e.g. suppose we had that content, with this styling:
 div:-moz-wrapped { font-size: 1px }

If the a's and b's are long enough to wrap (as they are on my system), then your pseudo-class would then apply...
...which would then style them to have font-size:1px
...which would then make them *not* need to wrap
...which would then make the pseudo-class not apply
etc.

You could come up with many similar scenarios (e.g. flex items with large "width" values, which makes them wrap, and then a child-selector under :-moz-wrapped that styles the flex items to have small width values, which makes them not need to wrap).

So I don't see how this pseudo-class would be workable in practice. Resolving as INVALID.

Comment 4

[sjw]

Thanks for your answer. I see the point, so I have to find another solution for this problem. But this problem affects some other pseudo-classes too, isn't it? Like :hover.

Comment 5

[Boris Zbarsky [:bzbarsky]]

For :hover (and :active and :focus) the spec explicitly allows a UA to not do relayout if it wants to.  See http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes :

  User agents are not required to reflow a currently displayed document due to
  pseudo-class transitions. For instance, a style sheet may specify that the 'font-size'
  of an :active link should be larger than that of an inactive link, but since this may
  cause letters to change position when the reader selects the link, a UA may ignore the
  corresponding style rule.

Of course that's not actually web-compatible if done in general, so what you get instead are either UAs that ignore :hover changes on relayout period or UAs that suppress :hover changes in response to a relayout due to a :hover change.  Both are allowed by that spec wording, of course.  But the upshot is that :hover doesn't necessarily accurately reflect hover state in UAs.