Re: Media feature based on parent width instead of viewport/device width

I found this thread while looking to see if an idea I wanted to
propose was already in the works. This proposal is very close, so I'm
tacking my suggestions onto it, as I think it addresses the problem of
loops in the layout (infinite or otherwise).

What I would like to propose are E:min-width() and E:max-width()
psuedo-class selectors that are based on the width of the element
itself (sort of, see below) instead of the width of the parent.
Personally, I find basing things on the width of a parent to be rather
confusing, because of borders, padding, box-sizing and friends. If an
element has a width of 400px, 20px of padding, and box-sizing: border
box, then what value is used for min-parent-width? 400px makes the
most sense, but really the child element only has 360px of space to
work with. This is why I want to suggest something based on the
possible width of the element that's actually being styled. Here's how
I've been visualizing it working:

  - The parent element is added to the page
  - an imaginary element with the same properties as an unstyled div
is added to the parent
  - the width of the imaginary element is stored
  - the imaginary element is replaced with the child element
  - the stored width is used for the :min-width()/:max-width() selectors
  - a new imaginary element is used for the next child element

I'm not to sure on the terminology, but I think that this can be
summarized as ":min-width()/:max-width() apply properties based on the
width of the parent element's content-box immediately before the child
element is added."  I'm fairly certain this avoids the risk of any
kind of loop, while still allowing the person writing the CSS to style
elements based on how much space is available to them. So with Tab
Atkin's example from before (changed to use the selectors):

<div id=parent>
  <div id=child></div>
</div>

#parent {
  float: left; //or anything else that makes it size based on its children
}
#child { width: 500px; }
#child:min-width(400px) { width: 300px; }

The child would unambiguously be 500px wide. But with another little tweak:

<div id=parent>
  <div class=child></div>
  <div class=child></div>
</div>

#parent {
  float: left; //or anything else that makes it size based on its children
}
..child { width: 500px; }
..child:min-width(400px) { width: 300px; }

The first child would be 500px wide, which would make the parent wider
than 400px, which would make the 2nd child 300px wide. I'll admit I
could see this part maybe being a bit confusing to someone using the
selectors for the first time, but I don't think it's too bad.

Received on Sunday, 13 January 2013 15:49:43 UTC