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

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.