W3C home > Mailing lists > Public > www-style@w3.org > April 2013

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

From: Stephen Cronin <cronin4392@gmail.com>
Date: Fri, 22 Mar 2013 22:06:11 +0000
Message-ID: <CAKOsz1hMtPpdZJ2KV0UuygvgLy612ocptyUTNpqcXjDwsuJQAA@mail.gmail.com>
To: www-style@w3.org
I have had a similar idea for a while and recently tried to put it into
practice with JS. Which I included at the bottom

The syntax I would propose for Media-queries on DOM elements is like so:

#selector .list { display-outside: viewport; display-inside: grid;  }
#selector .list @media only screen and (max-width: 480px) { background:
white; color: black;  }
#selector .list @media only screen and (max-width: 480px) > .item {  }

It's weird, I admit, but it still uses MQ's as we currently have them. Your
syntax, while not bad, I feel like is adding more clutter than needed; the
syntax is in no way connected to current MQ syntax.

Now, the prototype I built in JS:
Here (http://www.scoobasteve.org/projects/ObjectMQ/) you can find a
prototype I built to test how efficient I could make these kind of MQ's
with JS. At the time I was not aware of the layout based events you
mentioned.
Basically that page contains many "products" (.product).
..product has a class .mq-element-js and a data-attr of data-mq-triggers
which has a value of a comma-seperated string with breakpoints. In JS I
detect each objects width and add .gt-* .lt-* classes for each breakpoint.
Then just target in CSS like so:
#selector .list.lt-480 ...
#selector .list.lt-480 > .item ...

The source code can be found here (https://github.com/cronin4392/ObjectMQ)
and the code for the plugin itself (
https://github.com/cronin4392/ObjectMQ/blob/master/js/objectMQ.js)

Would love your feedback on my thoughts. Very glad that this idea is moving
through the web-dev community ;D
Thanks, scooba.
Received on Thursday, 4 April 2013 10:00:25 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:10 UTC