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

Hello all,

I'm new to this list, so please forgive me if I'm opening a fresh wound
with this suggestion. I have searched through the archives, but haven't
found much conversation about this.

I feel like there could be some significant benefits in providing the
ability for us to query the width of a parent element in the media feature
portion of a media query. Initially I thought it could look something like
this:

@media (min-parent-width: 30em) {
   p.style-me { /* styles for when the width of the parent of this "p" is
greater than or equal to 30em */ }
}

Or nested like this:

p.style-me {
   @media (min-parent-width: 30em) {
      /* styles */
   }
}

However, these don't really address the issue because they're dependent on
the relationship between the parent and child. What I really want is the
ability to style something based on any other elements properties. Maybe I
want the font-size of a list item to be smaller when a specific "aside"
element is less than 30em.

Andy Hume and Jeremy Keith came up with syntax like this:

div.some-div @selector (min-width: 30em) {
   p.style-me
      /* styles */
   }
}

This is pretty darn flexible.

Then, of course, there's the issue with the fact that the styled element's
changes could impact the width of the element with the "selector query."
That could cause some nastiness...

Anyway, here's Andy's article<http://blog.andyhume.net/responsive-containers/>.
Others have created JS
workarounds<https://github.com/stilliard/jquery-responsive-containers>as
well. There are so many times when I wish we had this ability. I think
it could allow us to create some incredibly modular styles.

Thanks for your patience with this noob.

Cheers,
Ben

-- 
*
Ben Callahan
*
*
Sparkbox, President
*
*
*

411 East Fifth Street

Dayton, OH 45402

office  937 401 0915

fax  877 253 6954
www.seesparkbox.com