Re: Proposal: @-rule for containing exclusive @media rules

On Mon, 22 Oct 2012 02:47:25 +0200, Boris Zbarsky <bzbarsky@mit.edu> wrote:

> Using this construct, the use case I describe above would be handled  
> like so:
>    @pickone {
>     @media (max-width: 500px) {
>       A
>     }
>     @media (max-width: 1000px) {
>       B
>     }
>     C
>   }

If we go that way, I'd rather have an explicit @else, to avoid ambiguities:

@pickone {
   @media (max-width: 500px) {
     A
   }
   @media (max-width: 1000px) {
     B
   }
   @else {
     C
   }
}

Otherwise, due to @media's ability to nest, it is not obvious else clause  
is just C, or everything after the first @media rule.

On top of that, it is easier to understand the first time you see it.

As for candidates for the name of that rule, there is plenty of choice,  
depending on which language tradition you want to be part of: switch,  
select, cond, case...

>  Additional notes:
>  2) One issue with the above proposal is that degradation in a browser  
> that does not support @pickone is not great.  I don't see a great way  
> around that, though if @supports could test for support for @-rules at  
> least something could be hacked together.  If people have ideas for  
> making this better, I'm all ears.

I've been toying around with similar ideas for a while, and this is what  
has
blocked me. But maybe we should just bite the bullet. The transition story
isn't significantly worse than when @media or @supports were introduced in
the first place.

One final note: if we go with something like this, we should not restrict  
it
to @media rules, but instead allow any kind of conditional rule
(@media, @supports, @document).

  - Florian

Received on Thursday, 25 October 2012 08:25:57 UTC