- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 25 Jun 2013 10:42:14 -0700
- To: Simon Pieters <simonp@opera.com>
- Cc: Glenn Adams <glenn@skynav.com>, "www-style@w3.org" <www-style@w3.org>
On Mon, Jun 24, 2013 at 11:46 PM, Simon Pieters <simonp@opera.com> wrote:
> Tab Atkins said:
>> Another use (possibly what prompted you to look into this?) is in
>> custom MQs, where it could be useful to represent an MQ alias, rather
>> than a purely custom one.
>
> Can you elaborate on this?
Sure. The thread on custom media queries proposed a syntax something like this:
<script>
if(fooIsDetected()) {
document.css.customMedia.set("foo", true);
}
</script>
<style>
@media ("foo") {
...
}
</style>
This works great when the condition for the MQ is static, such that it
can be determined once by script and set accordingly. It's less good
if what you want is just to take an existing complex MQ and give it a
short, descriptive name (like what you can do with complex property
values using Variables); you'd have to set up something to observe
changes in whatever the MQ covers, and update the condition
accordingly.
Instead, we can directly address this by allowing the value of a
custom MQ to be set to a MediaList, with the meaning being that it has
the same truth value as the contained MQs:
<script>
document.css.customMedia.set("foo", new MediaList("(foo:bar) and (baz:qux)"));
</script>
<style>
@media "foo" {
...
}
</style>
~TJ
Received on Tuesday, 25 June 2013 17:43:02 UTC