Re: [mediaqueries] User-defined Media Queries?

Le 01/06/2013 03:07, Tab Atkins Jr. a écrit :
> 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)
>>["inventedConditional"] = true;
>>      }
>>    </script>
>>    <style>
>>      @media (property("inventedConditional")) {
>>        .facet_sidebar {
>>          display: none;
>>        }
>>      }
>>    </style>
>> </html>


I like the idea of custom MQs, but the downside of this approach is that 
it is not declarative. The example above is very misleading: unlike 
existing MQs, this one is not updated when the size of the viewport 
changes. The JS code would need to be inside some event handler.

So this approach has the same kind of performance issues than JS 
animations vs. CSS Animations. When this is just a shorter and DRY way 
to write a condition that can be expressed with existing MQs, the perf 
cost could be greater than the maintenance cost of repetition.

I think it is worthwhile to have both custom MQs like this (that 
probably can’t be made declarative without loosing expressive power) and 
parse-time declarative "macros" for MQs to avoid repeating complex 

Simon Sapin

Received on Sunday, 2 June 2013 05:25:11 UTC