Make children CSS attributes depend on parent element size (like media queries depend on browser width)
css
Solution
Thanks to the second link in @torazaburo's comment under question post, I found the perfect solution:
https://github.com/marcj/css-element-queries
Yet it's very young project it still has some vulnerabilities (29 july 2013) but also has a potential. It isn't based on `@element` queries but on `attributes`. Example:
.fooDiv[min-width="1000px"] .form { /* code for 1. */ }
.fooDiv[min-width="900px"] .form { /* code for 2. */ }
.fooDiv[min-width="800px"] .form { /* code for 3. */ }
Those attributes are set by listeners, so they work on each change of size of `.fooDiv`.
Another project (incompatible with SASS/SCSS),
https://github.com/Mr0grog/element-query
will work as follow:
.test-element:media(max-available-width: 400px) {
background: purple;
}
In the above CSS, `.test-element` will have a purple background if it is inside an element that is `400px` wide or smaller.
Yet another,
https://github.com/tysonmatanich/elementQuery I use it in everyday projects.
Even more about this:
http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
Problem
I have a form structure dependent on browser window width: to simplify question, assume it has three levels (begin from widest case): - Field label on the left, input field in the centre and field description on the right - Field label on the left, input field in the centre and field description below input field - Field label on the top, input field in the middle and field description on the bottom It's done by something like this: ``` @media (max-width:1000px) { /* code for 1. */ } @media (max-width:900px) { /* code for 2. */ } @media (max-width:800px) { /* code for 3. */ } ``` What I'm asking for is to get the same functionality for all elements, so when I put a `form` into `div` which have `1000px` width, CSS will apply to that particular `form` same properties which are used to style 1st layout (`max-width:1000px`). When this `div` will shrink to `800px` the `form` should automatically restyle to the 3rd layout even when browse window still has width set to `1000px`. Is it possible?