Polyfill

[lukewarlow]

Just a quick note on how much of this could be polyfilled for older browsers.

Can be polyfilled:

• window.matchMedia (by overriding the function),
• <link media="..." rel="stylesheet"> (using the disabled attribute)
• <link href="..." media="..." rel="icon"> (modifying the href attribute)
• <meta name="theme-color" media="..." content="..."> (modifying the name attribute)
• <source media="..." type="..."> (modifying the type attribute)
• <meta name="color-scheme" content="..."> (overriding the content attribute)
• color-scheme CSS property (by overriding the CSS property value)

Cannot be polyfilled:

• @media (...) { ... } (CSS media queries cannot always be polyfilled)
• @import (...) media-query-list (CSS imports cannot be polyfilled)
• User Preference Client Hints (Client Hints are forbidden headers)

Unfortunately @media is one of the main benefits of this API.

[lukewarlow]

Based on https://github.com/GoogleChromeLabs/container-query-polyfill it may be possible to transpile the preference media queries for <style> and same-origin <link> elements