Re: [mediaqueries] User-defined Media Queries?

Le 10/06/2013 12:29, Stu Cox a écrit :
> I love this idea, but is there actually much scope for new *media*
> queries to be defined, given the limited information available to the DOM?
>
> I'd argue not, and that the Modernizr / theming use cases may be more
> common.
>
> I think there's already a problem with confusion between browser
> features and media/device features (e.g. my old favourite: browser
> supporting the Touch Events API vs device having a touchscreen). Values
> set by users in JS are unlikely to accurately represent a feature of the
> media.
>
>
> So how about e.g. `@property` instead?
>
> <script>
> document.css.properties.haswebgl = 'WebGLRenderingContext' in window;
> document.css.properties.theme = 'night';
> document.css.properties.connectedusers = MyApp.getConnectedUsers();
> </script>
>
> <style>
> @property hasaudioapi { ... }
> @property (theme:night) { ... }
> @property (min-connectedusers:10) { ... }
> </style>
>
>
> I'm totally not precious about that name – just that it shouldn't be
> `@media`.
>
> This would also solve the issue of name conflicts with future media queries.

I agree that this is really a request for user-defined conditional 
rules, and they do not have to be Media Queries. We now have conditional 
rules other than MQs with @supports:

http://www.w3.org/TR/css3-conditional/

Although I don’t like the name "property" as used here (as "CSS 
property" means something different), I can easily imagine conditional 
rules based on values set through an API.

What we would also need is a way to write such conditions in @import 
rules and in the "media" attribute of <link> elements, although that 
makes the attribute’s name not so appropriate anymore.

For examples, we could have functions like media(<media-query-list>) and 
supports(<supports-condition>) for allowing different kinds of 
conditions in the same context. This could even be the chance to allow 
arbitrary nesting of different kinds of conditions with logical operators:

    supports(box-shadow: 10px) or media(max-width: 300px)

-- 
Simon Sapin

Received on Monday, 10 June 2013 11:57:50 UTC