1031976 - require whitespace around 'and', 'or' and 'not' functions in media queries

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Per Media Queries level 4, and the working group discussion in http://lists.w3.org/Archives/Public/www-style/2013Jul/0082.html and I think elsewhere, we should require whitespace around the 'and', 'or', and 'not' functions in media queries.  This might be a little bit of compatibility risk on the "before" side of the keywords, but the risk should be very low on the after side of the keywords since either whitespace or a comment has always been needed.

(See bug 1031966 for what led me to file this bug, and see bug 841983 for the same bug for @supports.)

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The WG agreed to revert this change.

Comment 2

[Karl Dubost💡 :karlcow]

David,
Should we change our implementation then? Maybe reopen Bug 1031966

See the code here:
http://codepen.io/webcompat/pen/ObdbXP

We had the issue in the past with Bug 962922

Comment 3

[Karl Dubost💡 :karlcow]

Ooops forgotten to ni David.

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

We never changed in the other direction, as far as I can tell.  I marked the bug WONTFIX 3 days ago.

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Er, actually, there are separate bugs on media queries and @supports, and we probably do need to make a change for @supports.  But that should be a separate bug.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(or maybe not, if the working group didn't mean to change @supports, and intended to leave the two not matching)

Comment 7

[Karl Dubost💡 :karlcow]

What I'm saying is that 

  @media screen and(max-width:500px){
    p {background-color: pink;}
  }

does NOT work currently in Firefox Nightly, aka lack of space in between and(…) 
and you seem to say that spaces are now authorized. 

Shown in http://codepen.io/webcompat/pen/ObdbXP


/me is heading to the decision
https://lists.w3.org/Archives/Public/www-style/2015Aug/0051.html

> Remove requirement for whitespace around and/not
> ------------------------------------------------
> 
>   - RESOLVED: Revert the spec on the whitespace requirement

grmbl. Not explicit. :) 

/me goes to the detailed minutes

> Remove requirement for whitespace around and/not
> ------------------------------------------------
> 
>  <glazou> https://lists.w3.org/Archives/Public/www-style/2015Jul/0332.html
>  TabAtkins: Several F2Fs ago we talked about whitespace in regards
>              to syntax. We decided that there should be whitespace
>              on both sides of 'and', 'or', and 'not'. Turns out this
>              breaks things. There's at least one Microsoft minifier
>              that removes the space before the and. So requiring
>              that space breaks all the code using that minifier. So
>              I suggest we drop that requirement and recommend the
>              whitespace, but not require it as long as you do
>              something to have it parse into keywords.
> 
>   Bert: I'm in favor. For MQ it's quite simple since it's WD. The
>         problem with be with @supports. We have a CR that requires
>         spaces. We'll have to pull that back to WD. I'm in favor of
>         doing it, but it is some work to do.
>   TabAtkins: Yeah, that's process. We can republish as necessary.
>   glazou: Who is in favor, who objects?
>   ChrisL: Sounds good to me.
>   Florian: As long as @supports is in sync
> 
>   RESOLVED: Revert the spec on the whitespace requirement
>


AH! Understood! The RESOLUTION is in fact.

RESOLVED: Revert the spec on the whitespace requirement so that 
    (min-width: 200px)and (max-width:500px) is WORKING
but (min-width: 200px)and(max-width:500px)  is NOT WORKING

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Karl Dubost :karlcow from comment #7)
> What I'm saying is that 
> 
>   @media screen and(max-width:500px){
>     p {background-color: pink;}
>   }

This is because "and(" is a function token.  It could be made to work by writing "and (" or by writing "and/**/(", since either whitespace or a comment would separate the tokens.

There's no longer an explicit requirement for whitespace on both sides of the and, but there's still a requirement that the and be a keyword token and not a function token.

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

For what it's worth, the original decision being reverted was:
https://lists.w3.org/Archives/Public/www-style/2013Jul/0082.html

I guess @supports still requires whitespace.