{
    "display-mode": [
        {
            "engines": [
                "blink",
                "gecko",
                "webkit"
            ],
            "filename": "css/at-rules/media.json",
            "name": "display-mode",
            "slug": "CSS/@media/display-mode",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode",
            "summary": "The display-mode CSS media feature can be used to test the display mode of an application. You can use it to provide a consistent user experience between launching a site from a URL and launching it from a desktop icon.",
            "support": {
                "chrome": {
                    "version_added": "42"
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": "47",
                    "notes": "Firefox 47 and later support <code>display-mode</code> values <code>fullscreen</code> and <code>browser</code>. Firefox 57 added support for <code>minimal-ui</code> and <code>standalone</code> values."
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": "mirror",
                "opera_android": "mirror",
                "safari": {
                    "version_added": "13"
                },
                "safari_ios": {
                    "version_added": "12.2"
                },
                "samsunginternet_android": "mirror",
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": "79"
                }
            },
            "title": "display-mode"
        }
    ],
    "dynamic-range": [
        {
            "engines": [
                "blink",
                "gecko",
                "webkit"
            ],
            "filename": "css/at-rules/media.json",
            "name": "dynamic-range",
            "slug": "CSS/@media/dynamic-range",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/dynamic-range",
            "summary": "The dynamic-range CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device.",
            "support": {
                "chrome": {
                    "version_added": "98"
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": "100"
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": "mirror",
                "opera_android": "mirror",
                "safari": {
                    "version_added": "13.1"
                },
                "safari_ios": "mirror",
                "samsunginternet_android": "mirror",
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": "98"
                }
            },
            "title": "dynamic-range"
        }
    ],
    "forced-colors": [
        {
            "engines": [
                "blink",
                "gecko"
            ],
            "filename": "css/at-rules/media.json",
            "name": "forced-colors",
            "slug": "CSS/@media/forced-colors",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors",
            "summary": "The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.",
            "support": {
                "chrome": {
                    "version_added": "89"
                },
                "chrome_android": {
                    "version_added": false,
                    "notes": "See <a href='https://crbug.com/970285'>bug 970285</a>."
                },
                "edge": {
                    "version_added": false
                },
                "firefox": {
                    "version_added": "89"
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": {
                    "version_added": false
                },
                "opera_android": {
                    "version_added": false
                },
                "safari": {
                    "version_added": false
                },
                "safari_ios": "mirror",
                "samsunginternet_android": "mirror",
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": "89"
                }
            },
            "title": "forced-colors"
        }
    ],
    "inverted": [
        {
            "engines": [
                "webkit"
            ],
            "filename": "css/at-rules/media.json",
            "name": "inverted-colors",
            "slug": "CSS/@media/inverted-colors",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors",
            "summary": "The inverted-colors CSS media feature can be used to test whether the user agent or underlying OS is inverting colors.",
            "support": {
                "chrome": {
                    "version_added": false
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": false
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": "mirror",
                "opera_android": "mirror",
                "safari": {
                    "version_added": "9.1"
                },
                "safari_ios": {
                    "version_added": "10"
                },
                "samsunginternet_android": "mirror",
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": false
                }
            },
            "title": "inverted-colors"
        }
    ],
    "prefers-color-scheme": [
        {
            "engines": [
                "blink",
                "gecko",
                "webkit"
            ],
            "filename": "css/at-rules/media.json",
            "name": "prefers-color-scheme",
            "slug": "CSS/@media/prefers-color-scheme",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",
            "summary": "The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.",
            "support": {
                "chrome": {
                    "version_added": "76"
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": "67"
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": {
                    "version_added": "62"
                },
                "opera_android": "mirror",
                "safari": {
                    "version_added": "12.1"
                },
                "safari_ios": {
                    "version_added": "13"
                },
                "samsunginternet_android": {
                    "version_added": "14.2"
                },
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": "79"
                }
            },
            "caniuse": {
                "feature": "prefers-color-scheme",
                "title": "prefers-color-scheme media query"
            },
            "title": "prefers-color-scheme"
        }
    ],
    "prefers-contrast": [
        {
            "engines": [
                "blink",
                "gecko",
                "webkit"
            ],
            "filename": "css/at-rules/media.json",
            "name": "prefers-contrast",
            "slug": "CSS/@media/prefers-contrast",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast",
            "summary": "The prefers-contrast CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.",
            "support": {
                "chrome": {
                    "version_added": "96"
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": "101"
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": "mirror",
                "opera_android": {
                    "version_added": false
                },
                "safari": {
                    "version_added": "14.1"
                },
                "safari_ios": "mirror",
                "samsunginternet_android": "mirror",
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": "96"
                }
            },
            "title": "prefers-contrast"
        }
    ],
    "prefers-reduced-data": [
        {
            "engines": [
                "blink"
            ],
            "needsflag": [
                "blink"
            ],
            "filename": "css/at-rules/media.json",
            "name": "prefers-reduced-data",
            "slug": "CSS/@media/prefers-reduced-data",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data",
            "summary": "The prefers-reduced-data CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic.",
            "support": {
                "chrome": {
                    "version_added": "85",
                    "notes": "See <a href='https://crbug.com/1051189'>bug 1051189</a>.",
                    "flags": [
                        {
                            "type": "preference",
                            "name": "#enable-experimental-web-platform-features",
                            "value_to_set": "Enabled"
                        }
                    ]
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": false
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": "mirror",
                "opera_android": "mirror",
                "safari": {
                    "version_added": false
                },
                "safari_ios": "mirror",
                "samsunginternet_android": "mirror",
                "webview_android": {
                    "version_added": false,
                    "notes": "See <a href='https://crbug.com/1051189'>bug 1051189</a>."
                },
                "edge_blink": {
                    "version_added": "85",
                    "notes": "See <a href='https://crbug.com/1051189'>bug 1051189</a>.",
                    "flags": [
                        {
                            "type": "preference",
                            "name": "#enable-experimental-web-platform-features",
                            "value_to_set": "Enabled"
                        }
                    ]
                }
            },
            "title": "prefers-reduced-data"
        }
    ],
    "prefers-reduced-motion": [
        {
            "engines": [
                "blink",
                "gecko",
                "webkit"
            ],
            "filename": "css/at-rules/media.json",
            "name": "prefers-reduced-motion",
            "slug": "CSS/@media/prefers-reduced-motion",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion",
            "summary": "The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.",
            "support": {
                "chrome": {
                    "version_added": "74"
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": "63"
                },
                "firefox_android": {
                    "version_added": "64"
                },
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": "mirror",
                "opera_android": "mirror",
                "safari": {
                    "version_added": "10.1"
                },
                "safari_ios": "mirror",
                "samsunginternet_android": "mirror",
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": "79"
                }
            },
            "caniuse": {
                "feature": "prefers-reduced-motion",
                "title": "prefers-reduced-motion media query"
            },
            "title": "prefers-reduced-motion"
        }
    ],
    "scripting": [
        {
            "engines": [],
            "filename": "css/at-rules/media.json",
            "name": "scripting",
            "slug": "CSS/@media/scripting",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting",
            "summary": "The scripting CSS media feature can be used to test whether scripting (such as JavaScript) is available.",
            "support": {
                "chrome": {
                    "version_added": false,
                    "notes": "See <a href='https://crbug.com/489957'>bug 489957</a>."
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": false,
                    "notes": "See <a href='https://bugzil.la/1166581'>bug 1166581</a>."
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": {
                    "version_added": false
                },
                "opera_android": {
                    "version_added": false
                },
                "safari": {
                    "version_added": false
                },
                "safari_ios": "mirror",
                "samsunginternet_android": "mirror",
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": false,
                    "notes": "See <a href='https://crbug.com/489957'>bug 489957</a>."
                }
            },
            "title": "scripting"
        }
    ],
    "video-dynamic-range": [
        {
            "engines": [
                "blink",
                "gecko",
                "webkit"
            ],
            "filename": "css/at-rules/media.json",
            "name": "video-dynamic-range",
            "slug": "CSS/@media/video-dynamic-range",
            "mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/video-dynamic-range",
            "summary": "The video-dynamic-range CSS media feature can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the video plane of the user agent and the output device.",
            "support": {
                "chrome": {
                    "version_added": "98"
                },
                "chrome_android": "mirror",
                "edge": "mirror",
                "firefox": {
                    "version_added": "100"
                },
                "firefox_android": "mirror",
                "ie": {
                    "version_added": false
                },
                "oculus": "mirror",
                "opera": "mirror",
                "opera_android": "mirror",
                "safari": {
                    "version_added": "13.1"
                },
                "safari_ios": "mirror",
                "samsunginternet_android": "mirror",
                "webview_android": "mirror",
                "edge_blink": {
                    "version_added": "98"
                }
            },
            "title": "video-dynamic-range"
        }
    ]
}
