12

I have a form structure dependent on browser window width: to simplify question, assume it has three levels (begin from widest case):

  1. Field label on the left, input field in the centre and field description on the right
  2. Field label on the left, input field in the centre and field description below input field
  3. 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?

TheFrost
  • 1,265
  • 2
  • 15
  • 29
  • 2
    No, it's not possible in the way you envision. Media queries apply to the device, not HTML elements. But see http://stackoverflow.com/questions/15047605/using-iframe-to-apply-css-media-queries-to-block-elements, or http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen. –  Jul 29 '13 at 06:04
  • 1
    Thank to you I found `css-element-queries` project. It does exactly what I want, except instead of using `@element` (what I expected), it uses `attributes`. – TheFrost Jul 29 '13 at 13:50

2 Answers2

12

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/

TheFrost
  • 1,265
  • 2
  • 15
  • 29
  • I created a CSS container queries (aka element queries) prolyfill too: https://github.com/ausi/cq-prolyfill – ausi Oct 05 '15 at 13:41
0

Not that I know if in terms of straight up css. You can combine jQuery to achieve this. An example of the jQuery:

$(document).ready(function() {
    box_size();

    $(window).resize(function() {
        box_size();
    });

    function box_size() {
        var window_width = $(window).width();

        $('.box').removeClass('break-one').removeClass('break-two').removeClass('break-three');

        if (window_width <= 1000 && window_width > 900) {
            $('.box').addClass('break-one');
        }
        else if (window_width <= 900 && window_width > 800) {
            $('.box').addClass('break-two');
        }
        else if (window_width <= 800) {
            $('.box').addClass('break-three');
        }
    }
});

The function is called twice. Once for when it loads to check the size and again when the browser resizes.

Css:

.box {
    color: black;
}

.box.break-one {
    color: red;
}

.box.break-two {
    color: blue;
}

.box.break-three {
    color: yellow;
}

Of course see it in action in jsfiddle: http://jsfiddle.net/PWbvY/

jerrylow
  • 2,569
  • 1
  • 15
  • 25