Re: [mediaqueries] User-defined Media Queries?

Yehuda Katz
(ph) 718.877.1325


On Fri, May 31, 2013 at 7:07 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> 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.
>
>
What about just:

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


> Thoughts?
>
> ~TJ
>
>

Received on Friday, 31 May 2013 18:18:46 UTC