Re: The :min-width/:max-width pseudo-classes

Ah, I did miss that. Still, there's the reference combinator or the subject
selector.

!.foo .viewport .list:max-width(...) { display: table; }

This means in the middle of layout we need to tear down your ancestor and
start over. This would let you construct an infinite loop as well.

Or we can just express my earlier example as:

!.foo + .viewport .list:max-width(...) { display: table; }


On Thu, Mar 21, 2013 at 4:24 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Thu, Mar 21, 2013 at 1:07 PM, Elliott Sprehn <esprehn@gmail.com> wrote:
> > On Thu, Mar 21, 2013 at 3:24 PM, Tab Atkins Jr. <jackalmage@gmail.com>
> > wrote:
> >> The nice quality of it, though, is that by the very nature of the
> >> "viewport element", you can defer the layout of the children until
> >> you've gotten all the information necessary to evaluate those pseudos.
> >>  I suspect this might map to something like preventing the children
> >> from generating renderers until the parent is laid out, sorta like if
> >> the children were all display:none and then switch to display:non-none
> >> at the end of the first layout pass.
> >
> >
> > As described, it doesn't work that way:
> >
> > #selector .list:max-width(480px) + div { display: inline; }
> >
> > We need to do layout on the .list before we can figure out the correct
> style
> > for it's siblings. This generalizes to all kinds of madness where you
> can't
> > create the renderers for an element because another selector might match
> > later during layout requiring you to rebuild the render tree.
> >
> > Maybe if this was scoped downwards:
> >
> > @viewport #selector .list (max-width: 480px) {
> >   div { .. }
> > }
>
> It *is* scoped downwards.  You missed the part where the pseudoclass
> refers to the width of the nearest ancestor "viewport element".  It
> doesn't work on arbitrary elements.
>
> (I just realized, though, that this won't help us once we get the
> reference combinator. Hmm.)
>
> ~TJ
>