- From: L. David Baron <dbaron@dbaron.org>
- Date: Tue, 14 Oct 2008 16:08:52 -0400
- To: Eric Shepherd <eshepherd@mozilla.com>
- Cc: www-style@w3.org
On Tuesday 2008-10-14 15:50 -0400, Eric Shepherd wrote:
> Someone might try to deal with this problem in this manner:
>
> <link rel="stylesheet" media="(max-device-aspect-ratio: 1/1)"
> href="portrait.css">
> <link rel="stylesheet" media="(min-device-aspect-ratio: 1/1)"
> href="landscape.css">
>
> But now you have the problem of what to do if the device has a square
> aspect ratio (1/1). I presume the first sheet should be used; however,
> this might not be the intended effect.
In this case, both sheets would be used, which could be a problem.
Authors who want complementary sets of rules might want to
use "not". For example:
<link rel="stylesheet" href="widedims.css"
media="(min-aspect-ratio: 3/2)">
<link rel="stylesheet" href="olddims.css"
media="not all and (min-aspect-ratio: 3/2)">
They could also use multiple queries to handle the less-than, equal,
and greater-than cases separately:
<link rel="stylesheet" href="widedims.css"
media="(min-aspect-ratio: 3/2)">
<link rel="stylesheet" href="olddims.css"
media="(max-aspect-ratio: 3/2), (aspect-ratio: 3/2)">
If these need to be combined with another condition, authors could
nest media restrictions, for example:
<style type="text/css" media="screen">
@import url(screen-widedims.css) (min-aspect-ratio: 3/2);
@import url(screen-normal.css) not all and (min-aspect-ratio: 3/2);
</style>
or, with a little more symmetry:
<style type="text/css" media="screen">
@import url(screen-widedims.css) all and (min-aspect-ratio: 3/2);
@import url(screen-normal.css) not all and (min-aspect-ratio: 3/2);
</style>
-David
--
L. David Baron http://dbaron.org/
Mozilla Corporation http://www.mozilla.com/
Received on Tuesday, 14 October 2008 20:09:36 UTC