Re: [mediaqueries] User-defined Media Queries?

On Fri, May 31, 2013 at 1:02 PM, François REMY
<francois.remy.dev@outlook.com> wrote:
> I kinda like the idea. This is probably a good thing which is way better than the current technique (adding a class on the <html> element and adding ".something" at the beginning of all the selectors) and more optimizable.

Ooh, I didn't even think of the applicability to Modernizr-like
things, or theming.  Excellent idea!

> However, we may want to ask ourselves whether we actually want some CSS features to become a pure compilation target or maintain some actual usability inside CSS. Because if we want JS to define a CSS class for each break point of a continuous data, we force ourself to compile those classes from a HyperCSS file.

If you have more than a couple of breakpoints, something's very wrong
with your site.  This isn't a big deal.

> Let's imagine we want to prollyfill a media query for the zoom level so that higher resolution graphics are being used when the user zooms in. The graphics is changed at zoom-levels 1.4 and 2.0. We could force developers to have a "zoom-level-140" and a "zoom-level-200" media queries. If at some point they want to change the thresholds, they would need to change the JS.
>
> The other option is to make the things right and allow for numerical values as well as the usual comparators. A subset of the JavaScript operators would be okay, I presume.
>
>
> My opinion would be to reuse the [css-variables]'s approach, now that we started it:
>
>    @media(var-js) { ... }
>    @media(var-zoom>= 1.4) { ... }
>
>    <script>
>
>       ... document.css.var.zoom ...
>
>    </script>
>
> But that's because I envision more complex data structures which are difficult to express using strings.

Hmm, MQ currently addresses this by having min-* and max-* queries
when some value is numeric.  That might lean me back toward a
function, like:

@media (media("foo")) { ... } /* true/false queries */
@media (media("foo", "bar")) { ... } /* compare against a value */
@media (min-media("foo", <number>)) { ... } /* compare against a
numeric range */
etc.

~TJ

Received on Friday, 31 May 2013 20:31:22 UTC