Description

I was working on an updated fallback for @custom-media and was surprised to find that there are subtle and unexpected differences between browsers when it comes to @media.

There are many failing WPT tests across all browsers but some examples :

• extra parenthese : ((orientation))
• or support : (orientation) or (orientation)

Rationale

It is not trivial for users to figure out which @media features are supported in all browsers.

Are styles not applied because the query doesn't match or because it is not supported?

Aligning supported features across browsers at the same time will aid in adoption of some the new features.

Specification

https://www.w3.org/TR/mediaqueries-4/

Tests

https://wpt.fyi/results/css/mediaqueries?label=master&label=experimental&aligned