{
"display-mode": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"partial": [
"gecko"
],
"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 display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values."
},
"firefox_android": {
"version_added": "47",
"partial_implementation": true,
"notes": "Only supports the browser value, which always reports true."
},
"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 bug 970285."
},
"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": [
"gecko",
"webkit"
],
"needsflag": [
"gecko"
],
"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 is used to test if the user agent or the underlying operating system has inverted all colors.",
"support": {
"chrome": {
"version_added": false
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "114",
"flags": [
{
"type": "preference",
"name": "layout.css.inverted-colors.enabled",
"value_to_set": "true"
}
]
},
"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 bug 1051189.",
"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 bug 1051189."
},
"edge_blink": {
"version_added": "85",
"notes": "See bug 1051189.",
"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 a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.",
"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"
}
],
"prefers-reduced-transparency": [
{
"engines": [
"blink",
"gecko"
],
"needsflag": [
"blink",
"gecko"
],
"filename": "css/at-rules/media.json",
"name": "prefers-reduced-transparency",
"slug": "CSS/@media/prefers-reduced-transparency",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency",
"summary": "The prefers-reduced-transparency CSS media feature is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device. Switching on such a setting can help improve contrast and readability for some users.",
"support": {
"chrome": {
"version_added": "preview",
"flags": [
{
"type": "preference",
"name": "#enable-experimental-web-platform-features",
"value_to_set": "Enabled"
}
],
"impl_url": "https://crbug.com/1424879"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "113",
"flags": [
{
"type": "preference",
"name": "layout.css.prefers-reduced-transparency.enabled",
"value_to_set": "true"
}
],
"impl_url": "https://bugzil.la/1736914"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": false,
"impl_url": "https://webkit.org/b/175497"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "preview",
"flags": [
{
"type": "preference",
"name": "#enable-experimental-web-platform-features",
"value_to_set": "Enabled"
}
],
"impl_url": "https://crbug.com/1424879"
}
},
"title": "prefers-reduced-transparency"
}
],
"scripting": [
{
"engines": [
"gecko",
"webkit"
],
"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 bug 489957."
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "113"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": {
"version_added": false
},
"opera_android": {
"version_added": false
},
"safari": {
"version_added": "17"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": false,
"notes": "See bug 489957."
}
},
"title": "scripting"
}
],
"video-dynamic-range": [
{
"engines": [
"blink",
"gecko"
],
"needsflag": [
"blink"
],
"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",
"flags": [
{
"type": "preference",
"name": "#enable-experimental-web-platform-features",
"value_to_set": "Enabled"
}
]
},
"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": false
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "98",
"flags": [
{
"type": "preference",
"name": "#enable-experimental-web-platform-features",
"value_to_set": "Enabled"
}
]
}
},
"title": "video-dynamic-range"
}
]
}