- From: François REMY <francois.remy.dev@outlook.com>
- Date: Thu, 4 Apr 2013 12:36:20 +0200
- To: Stephen Cronin <cronin4392@gmail.com>, "www-style@w3.org" <www-style@w3.org>
> The syntax I would propose for Media-queries on DOM elements is like so:
>
> #selector .list { … }
> #selector .list @media only screen and (max-width: 480px) { … }
> #selector .list @media only screen and (max-width: 480px) > .item { … }
The issue with this syntax is two-folds: firstly it's ambigous (how do you know the "and" in "@media only screen and" is an operator for @media and not matching some <and> tag (like in "#selector .list and { … }"); secondly it requires updating the CSS core syntax (which is fine but should only be done if really required, which isn't the case here).
> Would love your feedback on my thoughts.
It's cool you made a prollyfill ;-) I'm also planning to craft a prollyfill based on HitchJS as soon as I've some time based on the :min-width/:max-width syntax.
The only issue I see is that you listen only to window.onresize which is fine if your user interface is static, but doesn't do the trick if you use resizable panes. The advantage is that it's quite clean (ie: do not required stub elements that trigger reflow events in all browsers (except IE that supports onresize on all elements)) and if you have code that dynamicly change the layout of your page, you could manually trigger the update by sending a false 'window.onresize' event (even if I'm not a big fan of those 'warn when you change something' code constraints because it's easy to forget).
Received on Thursday, 4 April 2013 10:36:48 UTC