W3C home > Mailing lists > Public > www-style@w3.org > April 2015

Re: [mediaqueries] @media not (unsupported-media-feature) v.s. @media not (unsupported + syntax)

From: Simon Pieters <simonp@opera.com>
Date: Thu, 23 Apr 2015 08:05:51 +0200
To: "Florian Rivoal" <florian@rivoal.net>, "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "Simon Sapin" <simon.sapin@exyr.org>, "www-style list" <www-style@w3.org>
Message-ID: <op.xxi671cgidj3kv@simons-mbp>
On Thu, 23 Apr 2015 00:50:13 +0200, Tab Atkins Jr. <jackalmage@gmail.com>  
wrote:

> On Wed, Apr 22, 2015 at 2:00 PM, Florian Rivoal <florian@rivoal.net>  
> wrote:
>> I am not sure how often you'll run into media queries where the  
>> difference between
>> Simon's table and Kleene's 3-value logic will matter, but sure,  
>> Kleene's logic is cleaner.
>>
>> I particular, it preserves (not( A and B)) == ((not A) or (not B)),  
>> which Simon's approach doesn't.
>>
>> If we're going with 3 way logic though, then it makes sense to use it  
>> not only for <general-enclosed>, but also for unknown <mf-name> or  
>> <mf-value>.
>>
>> The problem then is is that going with Kleene's logic break backwards  
>> compat, while Simon's logic doesn't. Look at these
>> examples:
>>
>> "not ((min-width: 30000px) and (shoes: none))"
>> "not handheld and foo(bar)"
>> "not yoyo and (light-level: stroboscope)"
>>
>> MQ3 behavior: false
>> Simon: false
>> Kleene: true
>>
>> The first two might be ok. They use syntax that wasn't valid at level 3  
>> (not without a media type, general enclosed), so the fact that they  
>> evaluate differently is probably fine.
>>
>> The third one is more problematic. Had we used Kleene's logic in the  
>> first place, we would have been better off, but we didn't.
>
> Well, the first wasn't valid at all in MQ3. ^_^  And removing the
> outermost parens is invalid in MQ3; you need `not all and (min-width:
> 30000px) and (shoes: none)`.
>
> I've pinged zcorpan to run a query over the website data he has, and
> see what kind of "not" MQs are used.  This will give us a better idea
> of whether we'll run into these kinds of bad queries or not.

SELECT REGEXP_EXTRACT(LOWER(body),  
r'(\smedia\s*=\s*"\s*not\s[^"]+"|\smedia\s*=\s*\'\s*not\s[^\']+\'|@media\s+not[^\{]+\{)')  
as frag, COUNT(*) as num
 FROM [httparchive:runs.2014_08_15_requests_body]
GROUP BY frag
ORDER BY num DESC;


frag	num
null	5860862
@media not all and (-webkit-min-device-pixel-ratio:0) {	151
@media not screen and (1) {	51
@media not all {	39
@media not all and (-webkit-min-device-pixel-ratio:0){	26
@media not screen and (1){	18
@media not all and (-webkit-min-device-pixel-ratio) {	13
@media not all{	9
@media not print{	8
@media not all and (max-width:1024px){	7
@media not screen and (min-device-width: 768px) and (max-device-width:  
1024px){	6
@media not all, not all {	6
  media="not print"	5
@media not all, (min-resolution: 192dpi) {	5
@media not tty {	4
@media not all and (-webkit-min-device-pixel-ratio){	4
  media="not all"	4
@media not print {	4
@media not all, only screen and (min-resolution: 144dpi) {	3
@media not all, not all, not all, not all {	2
@media not all and (-webkit-min-device-pixel-ratio: 0){	2
@media not all, not all, only screen and (min--moz-device-pixel-ratio:  
1.5), not all {	2
@media not screen{	2
@media not all and (-webkit-transform-3d) {	1
@media not (min-width:768px),not (orientation:landscape) and  
(max-width:1024px){	1
@media not screen and (min-width: 1290px) and (max-width: 1366px) and  
(-o-min-device-pixel-ratio:2/1) {	1
@media not all, only screen and (min-resolution: 2dppx) {	1
@media not all, only screen and (min--moz-device-pixel-ratio: 1.5), not  
all {	1
@media not all , not all {	1
  media="not all and (max-width: 1024px)"	1
@media not screen and (max-width:767px){	1
@media not screen and (max-width:1024px){	1
@media not -webkit-device-pixel-ratio {	1
@media not all and (-webkit-min-device-pixel-ratio:1.5),not all and  
(min--moz-device-pixel-ratio:1.5),not all and  
(-o-min-device-pixel-ratio:3/2),not all and  
(min-device-pixel-ratio:1.5),not all and (min-resolution:192dpi){	1
@media not all and (max-width:1024px) {	1
@media not screen and (min-device-width : 320px) and (max-device-width :  
568px) and (orientation : portrait) {	1
@media not all, not all, only screen and (min--moz-device-pixel-ratio:  
1.5), not all{	1
@media not all and (max-width:700px){	1
@media not screen and (max-width:45em){	1
@media not screen and (max-device-width: 480px) and (min-device-width:  
320px) {	1
@media not all and (min-width:38.75em){	1
@media not screen and (max-device-width: 480px) {	1
  media="not print, braille, embossed, speech, tty"	1
@media not all, only screen and (min--moz-device-pixel-ratio: 1) and  
(max-width: 700px), not all, not all, only screen and (min-resolution:  
72dpi) and (max-width: 700px), only screen and (min-resolution: 1dppx) and  
(max-width: 700px), not all, only screen and (min--moz-device-pixel-ratio:  
2) and (max-width: 700px), not all, not all, only screen and  
(min-resolution: 192dpi) and (max-width: 700px), only screen and  
(min-resolution: 2dppx) and (max-width: 700px) {	1
@media not all and -webkit-min-device-pixel-ratio0 {	1
@media not all and (min-device-pixel-ratio){	1
@media not handheld{	1
@media not all and (max-aspect-ratio:1/1){	1
@media not screen and (-webkit-min-device-pixel-ratio: 0) {	1
@media not tty{	1


-- 
Simon Pieters
Opera Software
Received on Thursday, 23 April 2015 06:06:24 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC