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

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