Re: [css3-mediaqueries] Concern about bounds on min- and max- prefixes

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/