167031 2017-01-13 16:11:32 -0800 Media Query should allow negation for media feature when media type is not specified 2023-02-21 07:20:56 -0800 1 1 1 Unclassified WebKit CSS Safari 10 Unspecified Unspecified RESOLVED DUPLICATE 180234 InRadar P2 Normal --- 1 aaron_chu webkit-unassigned ahmad.saleem792 dino florian karlcow koivisto simon.fraser webkit-bug-importer zalan oldest_to_newest 1266646 0 298806 aaron_chu 2017-01-13 16:11:32 -0800 Created attachment 298806 reduced test case Currently, media query can be negated only when the the "not" token precedes the <media-type>. In cases where <media-type> is not specified, <media-feature> is not negated. According to "2.5 Combining Media Features", a <media-feature> should be negated when it is preceded by the "not" token. specs: Syntax, BNF https://www.w3.org/TR/mediaqueries-4/#mq-syntax Combining Media Features https://www.w3.org/TR/mediaqueries-4/#media-conditions 1266647 1 webkit-bug-importer 2017-01-13 16:14:34 -0800 <rdar://problem/30022550> 1267546 2 dino 2017-01-17 16:20:37 -0800 Here's how I'm reading the spec.... Suppose we have: div { width: 100px; height: 100px; background-color: red; } @media not (min-width: 600px) { div { background-color: blue; } } Then the @media rule follows [[[ 2.2.1. Negating a Media Query: the not keyword An individual media query can have its result negated by prefixing it with the keyword not. If the media query would normally evaluate to true, prefixing it with not makes it evaluate to false, and vice versa. ]]] And it gives an example. However, I don't this this rule applies in this case. Check out Section 3. Syntax. <media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]? In our example, it matches <media-condition>, rather than "not <media-type>". <media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens> Cool. It looks like we are a <media-not>. <media-not> = not <media-in-parens> <media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed> So this is a media-not, that has a media-in-parens that is a media-feature. None of the browsers follow this behaviour though. 1267547 3 299080 dino 2017-01-17 16:21:15 -0800 Created attachment 299080 Simple test 1267559 4 dino 2017-01-17 16:36:05 -0800 https://github.com/w3c/csswg-drafts/issues/952 1267724 5 florian 2017-01-18 05:55:25 -0800 (spec co-editor here). This boils down to the fact that you only have support for the Media queries level 3 syntax, which unlike the level 4 syntax does not allow for arbitrary not/and/or nesting. I agree the level 4 syntax is much better (that's why we specified it), and hope you'll implement it. Also, note that there's a mistake in https://bugs.webkit.org/attachment.cgi?id=298806 : @media not(max-width: 700px) You need a space between not and the opening parenthesis, otherwise it gets parsed as a function token instead of the not keyword. 1935307 6 ahmad.saleem792 2023-02-20 15:44:51 -0800 If I am not wrong, this is fixed by MQ4 landing and I can see "Simple Test" works fine in STP163 as well "Red and Blue" depending on window size. Can we close this now? Thanks! 1935498 7 koivisto 2023-02-21 07:20:56 -0800 Ok, thanks! *** This bug has been marked as a duplicate of bug 180234 *** 298806 2017-01-13 16:11:32 -0800 2017-01-13 16:11:32 -0800 reduced test case negate-mq.html text/html 407 aaron_chu PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTx0aXRsZT48L3RpdGxlPgoJPHN0eWxlPgoJ CWRpdiB7ZGlzcGxheTogbm9uZTt9CgkJQG1lZGlhIChtYXgtd2lkdGg6IDcwMHB4KSB7Lmx0e2Rp c3BsYXk6IGJsb2NrO319CgkJIEBtZWRpYSBub3QgYWxsIGFuZCAobWF4LXdpZHRoOiA3MDBweCkg ey5ndHtkaXNwbGF5OiBibG9jazt9fQoJCSAvKmRvZXMgbm90LCBidXQgc2hvdWxkLCB3b3JrKi8K CQkgLypAbWVkaWEgbm90KG1heC13aWR0aDogNzAwcHgpIHsuZ3R7ZGlzcGxheTogYmxvY2s7fX0q LwoJPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KCjxkaXYgY2xhc3M9Imx0Ij5MZXNzIHRoYW4gNzAw cHg7PC9kaXY+CjxkaXYgY2xhc3M9Imd0Ij5Nb3JlIHRoYW4gNzAwcHg7PC9kaXY+Cgo8L2JvZHk+ CjwvaHRtbD4= 299080 2017-01-17 16:21:15 -0800 2017-01-17 16:21:15 -0800 Simple test mq.html text/html 275 dino PHN0eWxlPgpkaXYgewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91 bmQtY29sb3I6IHJlZDsKfQoKQG1lZGlhIG5vdCAobWluLXdpZHRoOiA2MDBweCkgewogIGRpdiB7 CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlOwogIH0KfQo8L3N0eWxlPgoKPHA+Qm94IHNob3Vs ZCBiZSByZWQgd2hlbiB0aGUgd2luZG93IGlzIG1vcmUgdGhhbiA2MDBweCB3aWRlLiBCbHVlIHdo ZW4gaXQgaXMgbGVzcyB0aGFuIDYwMHB4IHdpZGUuPC9wPgo8ZGl2PjwvZGl2Pgo=