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

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

> On Thu, Mar 21, 2013 at 12:08 PM, Elliott Sprehn <esprehn@gmail.com>
> wrote:
> > On Wed, Mar 20, 2013 at 5:41 PM, François REMY
> > <francois.remy.dev@outlook.com> wrote:
> >> I'm thinking about adding this proposal in my Local Viewport proposal
> >> draft in the near future, but I would love to get further feedback on
> the
> >> feasibility and the timeframe in which we can hope to get the feature
> >> implemented. I'm pretty sure that, depending on that, the importance of
> >> optimizing the 'on layout updated' event loop will prove more or less
> >> important.
> >
> > This doesn't seem very easy to implement because it breaks the sequential
> > processing model:
> >
> > 1. resolve style on elements such that you have a flattened set of
> > properties.
> > 2. layout the elements if things are different then the last time we did
> > step 1.
> >
> > The "viewport" is a magical thing outside the <html> element so when you
> > resize it we can just execute step 1 to pick new selectors based on
> queries.
> >
> > Having pseudo classes that match conditionally based on the layout of
> some
> > ancestor breaks this model since now you need to keep executing step 1
> while
> > doing step 2.
> >
> > This would be a big undertaking in Webkit so I don't think it falls
> anywhere
> > in the near future.
>
> 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 { .. }
}

- E

Received on Thursday, 21 March 2013 20:08:48 UTC