@custom-media --mq-a (max-width: 30em), (max-height: 30em); @custom-media --mq-b screen and (max-width: 30em); @custom-media --not-mq-a not all and (--mq-a); @media (max-width: 30em),(max-height: 30em) { body { order: 1; } } @media (--mq-a) { body { order: 1; } } @media screen and (max-width: 30em) { body { order: 2; } } @media (--mq-b) { body { order: 2; } } @media (max-width: 30em),(max-height: 30em),(max-width: 30em),(max-height: 30em) { body { order: 3; } } @media (max-width: 30em),(max-height: 30em), (--mq-a) { body { order: 3; } } @media (--mq-a), (--mq-a) { body { order: 3; } } @media (max-width: 30em),(max-height: 30em) { @media not all and (max-color:2147477350) { body { order: 4; } } } @media not all and (max-width: 30em),not all and (max-height: 30em) { @media not all and (color:2147477350) { body { order: 4; } } } @media not all and (--mq-a) { body { order: 4; } } @media (max-width: 30em),(max-height: 30em) { @media not all and (max-color:2147477350) { body { order: 5; } } } @media not all and (max-width: 30em),not all and (max-height: 30em) { @media not all and (color:2147477350) { body { order: 5; } } } @media not all and (--mq-a) { body { order: 5; } } @media (--not-mq-a) { body { order: 5; } } @media (max-width: 30em),(max-height: 30em) { @media not all and (max-color:2147477350) { @media not all and (max-color:2147477350) { body { order: 6; } } } } @media not all and (max-width: 30em),not all and (max-height: 30em) { @media not all and (color:2147477350) { @media not all and (max-color:2147477350) { body { order: 6; } } } } @media not all and (--mq-a) { @media not all and (max-color:2147477350) { body { order: 6; } } } @media (max-width: 30em),(max-height: 30em) { @media all and (max-color:2147477350) { @media not all and (color:2147477350) { body { order: 6; } } } } @media not all and (max-width: 30em),not all and (max-height: 30em) { @media all and (color:2147477350) { @media not all and (color:2147477350) { body { order: 6; } } } } @media all and (--mq-a) { @media not all and (color:2147477350) { body { order: 6; } } } @media not all and (--not-mq-a) { body { order: 6; } } @custom-media --circular-mq-a (--circular-mq-b); @custom-media --circular-mq-b (--circular-mq-a); @media (--circular-mq-b) { body { order: 7; } } @media (--circular-mq-a) { body { order: 7; } } @media (--circular-mq-b) { body { order: 8; } } @media (--unresolved-mq) { body { order: 9; } } @custom-media --min (min-width: 320px); @custom-media --max (max-width: 640px); @media (min-width: 320px) and (max-width: 640px) { body { order: 10; } } @media (min-width: 320px) and (--max) { body { order: 10; } } @media (--min) and (--max) { body { order: 10; } } @custom-media --concat (min-width: 320px) and (max-width: 640px); @media (min-width: 320px) and (max-width: 640px) { body { order: 11; } } @media (--concat) { body { order: 11; } } @media (min-width: 320px) and (max-width: 640px) { @media (max-color:2147477350) and (min-aspect-ratio: 16/9) { body { order: 12; } } } @media not all and (min-width: 320px) and (max-width: 640px) { @media (color:2147477350) and (min-aspect-ratio: 16/9) { body { order: 12; } } } @media (--concat) and (min-aspect-ratio: 16/9) { body { order: 12; } } @media (max-width: 30em),(max-height: 30em) { body { order: 1000; } } @media ( --mq-a ) { body { order: 1000; } } @media (max-width: 30em),(max-height: 30em) { body { order: 1001; } } @media ( --mq-a ) { body { order: 1001; } } @media (max-width: 30em),(max-height: 30em),(max-width: 30em),(max-height: 30em) { body { order: 1002; } } @media (max-width: 30em),(max-height: 30em), ( --mq-a ) { body { order: 1002; } } @media ( --mq-a ), ( --mq-a ) { body { order: 1002; } } @media (max-width: 30em),(max-height: 30em),(max-width: 30em),(max-height: 30em) { body { order: 1003; } } @media (max-width: 30em),(max-height: 30em), ( --mq-a ) { body { order: 1003; } } @media ( --mq-a ), ( --mq-a ) { body { order: 1003; } } @media (max-width: 30em),(max-height: 30em),(max-width: 30em),(max-height: 30em) { body { order: 1004; } } @media (max-width: 30em),(max-height: 30em), ( --mq-a ) { body { order: 1004; } } @media ( --mq-a ), ( --mq-a ) { body { order: 1004; } } @media (max-width: 30em),(max-height: 30em),(max-width: 30em),(max-height: 30em) { body { order: 1005; } } @media (max-width: 30em),(max-height: 30em), ( --mq-a ) { body { order: 1005; } } @media ( --mq-a ), ( --mq-a ) { body { order: 1005; } } @media (trailer--) { body { order: 1006; } } @custom-media trailer-- (min-width: 320px); @media (max-width: 30em),(max-height: 30em) { body { cloned: 1; to-clone: 1; } } @media (--mq-a) { body { cloned: 1; to-clone: 1; } } @custom-media --foo (--does-not-exist-1); @custom-media --custom-bool-after-regular-bool screen; @media screen { @media (color) and (max-color:2147477350) { .test5 { background: green; } } } @media not screen { @media (color) and (color:2147477350) { .test5 { background: green; } } } @media (color) and (--custom-bool-after-regular-bool) { .test5 { background: green; } }