{
"any-input": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "any-hover",
"slug": "CSS/@media/any-hover",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover",
"summary": "The any-hover CSS media feature can be used to test whether any available input mechanism can hover over elements.",
"support": {
"chrome": {
"version_added": "41"
},
"chrome_android": "mirror",
"edge": {
"version_added": "16"
},
"firefox": {
"version_added": "64"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "9"
},
"safari_ios": "mirror",
"samsunginternet_android": {
"version_added": "5.0"
},
"webview_android": "mirror",
"edge_blink": {
"version_added": "79"
}
},
"title": "any-hover"
},
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "any-pointer",
"slug": "CSS/@media/any-pointer",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer",
"summary": "The any-pointer CSS media feature tests whether the user has any pointing device (such as a mouse), and if so, how accurate it is.",
"support": {
"chrome": {
"version_added": "41"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "64"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "9"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "79"
}
},
"title": "any-pointer"
}
],
"aspect-ratio": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "aspect-ratio",
"slug": "CSS/@media/aspect-ratio",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio",
"summary": "The aspect-ratio CSS media feature can be used to test the aspect ratio of the viewport.",
"support": {
"chrome": {
"version_added": "3"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10"
},
"opera_android": {
"version_added": "10.1"
},
"safari": {
"version_added": "5"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "aspect-ratio"
}
],
"color": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "color",
"slug": "CSS/@media/color",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color",
"summary": "The color CSS media feature can be used to test the number of bits per color component (red, green, blue) of the output device.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "2"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10"
},
"opera_android": {
"version_added": "10.1"
},
"safari": {
"version_added": "3"
},
"safari_ios": {
"version_added": "1"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "color"
}
],
"color-gamut": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "color-gamut",
"slug": "CSS/@media/color-gamut",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut",
"summary": "The color-gamut CSS media feature is used to apply CSS styles based on the approximate range of color gamut supported by the user agent and the output device.",
"support": {
"chrome": {
"version_added": "58"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "110"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "10"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "79"
}
},
"title": "color-gamut"
}
],
"color-index": [
{
"engines": [
"blink",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "color-index",
"slug": "CSS/@media/color-index",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-index",
"summary": "The color-index CSS media feature can be used to test the number of entries in the output device's color lookup table.",
"support": {
"chrome": {
"version_added": "29"
},
"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": "8"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "79"
}
},
"title": "color-index"
}
],
"grid": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "grid",
"slug": "CSS/@media/grid",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/grid",
"summary": "The grid CSS media feature can be used to test whether the output device uses a grid-based screen.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "2"
},
"firefox_android": "mirror",
"ie": {
"version_added": "10"
},
"oculus": "mirror",
"opera": {
"version_added": "10"
},
"opera_android": {
"version_added": "10.1"
},
"safari": {
"version_added": "3"
},
"safari_ios": {
"version_added": "1"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "grid"
}
],
"height": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "height",
"slug": "CSS/@media/height",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height",
"summary": "The height CSS media feature can be used to apply styles based on the height of the viewport (or the page box, for paged media).",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "2"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10"
},
"opera_android": {
"version_added": "10.1"
},
"safari": {
"version_added": "3"
},
"safari_ios": {
"version_added": "1"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "height"
}
],
"hover": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "hover",
"slug": "CSS/@media/hover",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover",
"summary": "The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.",
"support": {
"chrome": {
"version_added": "38",
"notes": "Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613."
},
"chrome_android": {
"version_added": "50"
},
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "64"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": {
"version_added": "28"
},
"opera_android": {
"version_added": "28"
},
"safari": {
"version_added": "9"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "38",
"notes": "Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613."
},
"edge_blink": {
"version_added": "79",
"notes": "Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613."
}
},
"title": "hover"
}
],
"monochrome": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "monochrome",
"slug": "CSS/@media/monochrome",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/monochrome",
"summary": "The monochrome CSS media feature can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "2"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": {
"version_added": "10"
},
"opera_android": {
"version_added": "10.1"
},
"safari": {
"version_added": "3"
},
"safari_ios": {
"version_added": "1"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "monochrome"
}
],
"orientation": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "orientation",
"slug": "CSS/@media/orientation",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation",
"summary": "The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).",
"support": {
"chrome": {
"version_added": "3"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "2"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.6"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "5"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "orientation"
}
],
"mf-overflow-block": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "overflow-block",
"slug": "CSS/@media/overflow-block",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/overflow-block",
"summary": "The overflow-block CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.",
"support": {
"chrome": {
"version_added": "113"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "66"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "17"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "113"
}
},
"title": "overflow-block"
}
],
"mf-overflow-inline": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "overflow-inline",
"slug": "CSS/@media/overflow-inline",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/overflow-inline",
"summary": "The overflow-inline CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the inline axis.",
"support": {
"chrome": {
"version_added": "113"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "66"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "17"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "113"
}
},
"title": "overflow-inline"
}
],
"pointer": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "pointer",
"slug": "CSS/@media/pointer",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer",
"summary": "The pointer CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.",
"support": {
"chrome": {
"version_added": "41"
},
"chrome_android": {
"version_added": "50"
},
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "64"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": {
"version_added": "28"
},
"safari": {
"version_added": "9"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "41"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "pointer"
}
],
"resolution": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "resolution",
"slug": "CSS/@media/resolution",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution",
"summary": "The resolution CSS media feature can be used to test the pixel density of the output device.",
"support": {
"chrome": {
"version_added": "29"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": [
{
"version_added": "8"
},
{
"partial_implementation": true,
"version_added": "3.5",
"notes": "Supports <integer> values only."
}
],
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": [
{
"version_added": "16"
},
{
"version_added": "10",
"version_removed": "15"
}
],
"opera_android": [
{
"version_added": "16"
},
{
"version_added": "10.1",
"version_removed": "14"
}
],
"safari": {
"version_added": "16"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "79"
}
},
"caniuse": {
"feature": "css-media-resolution",
"title": "Media Queries: resolution feature"
},
"title": "resolution"
}
],
"update": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "update",
"slug": "CSS/@media/update-frequency",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/update-frequency",
"summary": "The update CSS media feature can be used to test how frequently (if at all) the output device is able to modify the appearance of content once rendered.",
"support": {
"chrome": {
"version_added": "113"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "102"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "17"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "113"
}
},
"title": "update"
}
],
"width": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "width",
"slug": "CSS/@media/width",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width",
"summary": "The width CSS media feature can be used to test the width of the viewport (or the page box, for paged media).",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "2"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10"
},
"opera_android": {
"version_added": "10.1"
},
"safari": {
"version_added": "3"
},
"safari_ios": {
"version_added": "1"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "width"
}
],
"media-descriptor-table": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/at-rules/media.json",
"name": "media",
"slug": "CSS/@media",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media",
"summary": "The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "1"
},
"firefox_android": "mirror",
"ie": {
"version_added": "6"
},
"oculus": "mirror",
"opera": {
"version_added": "9.2"
},
"opera_android": {
"version_added": "10.1"
},
"safari": {
"version_added": "3"
},
"safari_ios": {
"version_added": "1"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "@media"
}
],
"values": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/ratio.json",
"name": "ratio",
"slug": "CSS/ratio",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/ratio",
"summary": "The CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values.",
"support": {
"chrome": {
"version_added": "3"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "9.5"
},
"opera_android": "mirror",
"safari": {
"version_added": "5"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "37"
},
"edge_blink": {
"version_added": "79"
}
},
"title": ""
}
]
}