[css3-media-queries] More granular conditional logic

• From: Antony Kennedy <antony@silversquid.com>
• Date: Wed, 2 Feb 2011 23:01:09 +0000
• To: www-style list <www-style@w3.org>
• Message-Id: <95E0B637-7862-43F1-A63F-DAE025F049ED@silversquid.com>

The "not" keyword and "and" syntax within Media Queries seems woefully inadequate. For example, if I would like to target browsers that support -webkit-transform-3d that is easy with the following media query:

@media screen and (-webkit-transform-3d) {
	body {
		font-family: arial;
	}
}

But what if I want to target browsers that still support the screen media type, but do *not* support -webkit-transform-3d?

I can do this:

@media not screen and (-webkit-transform-3d) {
	body {
		font-family: arial;
	}
}

…but this serves to negate the entire query – i.e. this will only match devices that do not support the screen media type and -webkit-transform-3d.

Let's say I want to use a transition on a dev for webkit, but an immediate switch in everything else. What I have to do is set up the immediate switch, and then override everything within a media query for webkit. Does this not seem terribly inefficient? what's wrong with:

@media screen and (not -webkit-transform-3d) {
	body {
		font-family: arial;
	}
}
 
…or even:

@media screen and (!-webkit-transform-3d) {
	body {
		font-family: arial;
	}
}

…?

I appreciate we want to keep the syntax simple, but conditional logic ought to be intelligent enough to handle these kinds of statements.

Received on Wednesday, 2 February 2011 23:09:25 UTC