[mediaqueries] User-defined Media Queries?

Recently there was a thread about reducing the duplication in Media
Queries, which wanted to use Variables.  I pointed out that we
couldn't use CSS Variables as written, but I'd like to pursue lexical
variables at some point in the future for this kind of thing.

Alex Russell just suggested another approach to me in a private email
- crack open MQs themselves and let authors plug into that
infrastructure.  Example syntax:

> <html>
>   <script>
>     if (window.outerWidth >= 600)
>       document.css.properties["inventedConditional"] = true;
>     }
>   </script>
>   <style>
>     @media (property("inventedConditional")) {
>       .facet_sidebar {
>         display: none;
>       }
>     }
>   </style>
> </html>

I really like this idea.  It fits into my general goals of making CSS
more user-serviceable, and neatly solves the problem brought up in the
previous thread without having to wait for me to write Variables 2 and
solve the more generic problems.

I don't think I like Alex's suggested names, though - I'd use
"document.css.customMedia" or something, and then use a shorter
function name than "property()".  Perhaps we could settle on a naming
scheme that avoids the need for a function altogether.

Thoughts?

~TJ

Received on Friday, 31 May 2013 18:08:17 UTC