Re: @else in Media Queries

> On Jun 11, 2016, at 15:34, Daniel Glazman <daniel.glazman@disruptive-innovations.com> wrote:
> 
> On 10/06/2016 22:12, Tab Atkins Jr. wrote:
> 
>> I think you're just summarizing some pros/cons for the proposal as a
>> whole here, and not actually responding to the quoted text directly,
>> right?
> 
> Sure.
> 
>>> pros: - simple to read and understand
>>>      - feature needed by users
>>> 
>>> cons: - new constraints needed on rule insertion
>>>      - new constraints needed on rule deletion
>> 
>> What new constraints are needed?  Are you talking about just in
>> editors?  The OM doesn't need to do anything special; it can handle
>> stray @else just fine.
> 
> Two consecutive rules in a valid sheet's OM: a @media followed by a
> @else. Through OM, @media is removed, stylesheet is now invalid because
> a standalone @else...

I don't know why this is an issue. Valid or not, if the @else does nothing,
this is good. The correct way to delete an @media{}@else{} is to remove both.
The incorrect way, which leaves a dangling else, results in the same behavior.

It does not matter much to me that the resulting stylesheet is deemed invalid, but
if you think that's an issue, we can simply declare a dangling @else to be
a valid construct that does nothing.

I think what's more problematic is if you have
  @media (...) {...}
  @media (...) {...}
  @else {...}
and some code that's unaware of @else just deletes the second @media,
changing the semantics.


>>>      - @else standalone after deletion of @media is meaningless
>> 
>> Why is this a con?  Plenty of things in CSS are meaningless without
>> support of other things.  "flex: 1" does nothing on an element that's
>> not a child of a "display: flex", for example.  This is a direct
>> physical connection between the @else rule and the thing it needs to
>> be meaningful, which is a lot easier to handle than most of CSS's very
>> indirect connections.
> 
> But "flex: 1" on an element that does not have "display: flex" does NOT
> make the sheet invalid ; a standalone @else does.

As I said, if validation is the issue, we can define dangling @else to be
a valid noop.


>>>      - complexifies automated media queries management
>> 
>> What is "automated MQ management"?
> 
> Given an arbitrary document with arbitrary stylesheets, where should
> I insert a new MQ to see the style rules it contains have visual impact,
> ie. be the ones that win the cascade? Even for handwritten CSS, this
> is an enormous issue.
> 
>>>      - can't always express the @else case by a MQ
>> 
>> Why is this a con?
> 
> Turn a standalone @else in a valid @media.

It this the case you're talking about?

You start with
  @media (something) {
     /* foobar 1 */
  }
  @else (somethingelse) {
    /* foobar 2 */
  }

Over time, you change your stylesheet so that the foobar 1 block becomes empty:
  @media (something) { }
  @else (somethingelse) {
    /* foobar 2 */
  }

You would like to replace this by a single media query, but 
  @media (somethingelse) and (not (something)) {
    /* foobar 2 */
  }
has subtly different semantics.

But I am not sure this is a downside of this proposal. The fact that it is strictly more expressive than what we had before sounds like an argument for it, not against it.

 - Florian

Received on Saturday, 11 June 2016 07:05:00 UTC