@media

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.

Note: In JavaScript, the rules created using @media can be accessed with the CSSMediaRule CSS object model interface.

Syntax

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

For a discussion of media query syntax, please see Using media queries.

Description

Media types

Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type will be implied.

all
Suitable for all devices.
print
Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)
screen
Intended primarily for screens.
speech
Intended for speech synthesizers.
Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn't be used. The aural type has been replaced by speech, which is similar.

Media features

Media features describe specific characteristics of the user agent, output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.

Name Summary Notes
any-hover Does any available input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
aspect-ratio Width-to-height aspect ratio of the viewport
color Number of bits per color component of the output device, or zero if the device isn't color
color-gamut Approximate range of colors that are supported by the user agent and output device Added in Media Queries Level 4.
color-index Number of entries in the output device's color lookup table, or zero if the device does not use such a table
device-aspect-ratio Width-to-height aspect ratio of the output device Deprecated in Media Queries Level 4.
device-height Height of the rendering surface of the output device Deprecated in Media Queries Level 4.
device-width Width of the rendering surface of the output device Deprecated in Media Queries Level 4.
display-mode The display mode of the application, as specified in the web app manifest's display member Defined in the Web App Manifest spec.
forced-colors Detect whether user agent restricts color palette Added in Media Queries Level 5.
grid Does the device use a grid or bitmap screen?
height Height of the viewport
hover Does the primary input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
inverted-colors Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5.
light-level Light level of the environment Added in Media Queries Level 5.
monochrome Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome
orientation Orientation of the viewport
overflow-block How does the output device handle content that overflows the viewport along the block axis? Added in Media Queries Level 4.
overflow-inline Can content that overflows the viewport along the inline axis be scrolled? Added in Media Queries Level 4.
pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
prefers-color-scheme Detect if the user prefers a light or dark color scheme Added in Media Queries Level 5.
prefers-contrast Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors Added in Media Queries Level 5.
prefers-reduced-motion The user prefers less motion on the page Added in Media Queries Level 5.
prefers-reduced-transparency The user prefers reduced transparency Added in Media Queries Level 5.
resolution Pixel density of the output device
scan Scanning process of the output device
scripting Detects whether scripting (i.e. JavaScript) is available Added in Media Queries Level 5.
update How frequently the output device can modify the appearance of content Added in Media Queries Level 4.
width Width of the viewport including width of scrollbar

Accessibility concerns

To best accommodate people who adjust a site's text size, use ems when you need a <length> for your media queries.

Both em and px are valid units, but em works better if the user changes the browser text size.

Also consider using Level 4 media queries to improve the user's experience. For example, prefers-reduced-motion to detect if the user has requested that the system minimize the amount of animation or motion it uses.

Security

Because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.

Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.

Formal syntax

@media <media-query-list> {
  <group-rule-body>
}

where
<media-query-list> = <media-query>#

where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

Examples

Testing for print and screen media types

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples:

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

For more examples, please see Using media queries.

Specifications

Specification Comment Feedback
Media Queries Level 5
The definition of '@media descriptors' in that specification.
Reinstates light-level, inverted-colors and Custom Media Queries, which were removed from Level 4.
Adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.
CSS Working Group drafts GitHub issues
CSS Conditional Rules Module Level 3
The definition of '@media' in that specification.
Defines the basic syntax of the @media rule. CSS Working Group drafts GitHub issues
Media Queries Level 4
The definition of '@media' in that specification.

Adds scripting, pointer, hover, update, overflow-block, and overflow-inline media features.
Deprecates all media types except for screen, print, speech, and all.
Makes the syntax more flexible by adding, among other things, the or keyword.

CSS Working Group drafts GitHub issues
Media Queries
The definition of '@media' in that specification.
CSS Level 2 (Revision 1)
The definition of '@media' in that specification.
Initial definition.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@mediaChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
any-hover media featureChrome Full support 41Edge Full support 16Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
any-pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 4.0
aspect-ratio media featureChrome Full support 3Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 10Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 4.2Samsung Internet Android Full support 1.0
calc() expressionsChrome Full support 66Edge Full support 79Firefox Full support 59IE No support NoOpera Full support 53Safari Full support 12WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 59Opera Android Full support 47Safari iOS Full support 12Samsung Internet Android Full support 9.0
color media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
color-gamut media featureChrome Full support 58Edge Full support 79Firefox No support NoIE No support NoOpera Full support 45Safari Full support 10WebView Android Full support 58Chrome Android Full support 58Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 10Samsung Internet Android Full support 7.0
color-index media featureChrome Full support 29Edge Full support 79Firefox No support NoIE No support NoOpera Full support 16Safari Full support 8WebView Android Full support ≤37Chrome Android Full support 29Firefox Android No support NoOpera Android Full support 16Safari iOS Full support 8Samsung Internet Android Full support 2.0
device-aspect-ratio media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
device-height media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
device-width media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
display-mode media featureChrome Full support 45Edge Full support 79Firefox Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE No support NoOpera Full support 32Safari Full support 13WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android Full support 32Safari iOS Full support 13Samsung Internet Android Full support 5.0
forced-colors media feature
Experimental
Chrome No support No
Notes
No support No
Notes
Notes See bug 970285.
Edge No support No
Notes
No support No
Notes
Notes See bug 970285.
Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 970285.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 970285.
Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
grid media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 10Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
height media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
hover media featureChrome Full support 38
Notes
Full support 38
Notes
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 Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 38
Notes
Full support 38
Notes
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 Full support 50Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
inverted-colors media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 10Samsung Internet Android No support No
light-level media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Media feature expressionsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
Media query value supportChrome Full support 66Edge Full support 79Firefox Full support 59IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 59Opera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
monochrome media featureChrome Full support 1Edge Full support 79Firefox Full support 2IE No support NoOpera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Nested media queriesChrome Full support 26Edge Full support 12Firefox Full support 11IE No support NoOpera Full support 12.1Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 14Opera Android Full support 12.1Safari iOS Full support 7Samsung Internet Android Full support 1.5
orientation media featureChrome Full support 3Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10.6Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 4.2Samsung Internet Android Full support 1.0
overflow-block media featureChrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
overflow-inline media featureChrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 50Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
prefers-color-scheme media featureChrome Full support 76Edge Full support 79Firefox Full support 67IE No support NoOpera Full support 62Safari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS Full support 13Samsung Internet Android No support No
prefers-contrast media feature
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
prefers-reduced-data media feature
Experimental
Chrome Full support 85
Notes Disabled
Full support 85
Notes Disabled
Notes See bug 1051189.
Disabled From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge Full support 85
Notes Disabled
Full support 85
Notes Disabled
Notes See bug 1051189.
Disabled From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled).
Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 1051189.
Chrome Android Full support 85
Notes Disabled
Full support 85
Notes Disabled
Notes See bug 1051189.
Disabled From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
prefers-reduced-motion media featureChrome Full support 74Edge Full support 79Firefox Full support 63IE No support NoOpera Full support 62Safari Full support 10.1WebView Android Full support 74Chrome Android Full support 74Firefox Android Full support 64Opera Android Full support 53Safari iOS Full support 10.3Samsung Internet Android No support No
prefers-reduced-transparency media feature
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
resolution media featureChrome Full support 29Edge Full support 12Firefox Full support 8
Full support 8
Partial support 3.5
Notes
Notes Supports <integer> values only.
IE Full support 9Opera Full support 16
Full support 16
No support 10 — 15
Safari No support No
Notes
No support No
Notes
Notes See bug 78087.
WebView Android Full support ≤37Chrome Android Full support 29Firefox Android Full support 8
Full support 8
Partial support 4
Notes
Notes Supports <integer> values only.
Opera Android Full support 16
Full support 16
No support 10.1 — 14
Safari iOS No support No
Notes
No support No
Notes
Notes See bug 78087.
Samsung Internet Android Full support 2.0
scan media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
scripting media featureChrome No support No
Notes
No support No
Notes
Notes See bug 489957.
Edge No support No
Notes
No support No
Notes
Notes See bug 489957.
Firefox No support No
Notes
No support No
Notes
Notes See bug 1166581.
IE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1166581.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes See bug 489957.
speech media typeChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support 9.2Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android Full support 10.1Safari iOS No support NoSamsung Internet Android No support No
update media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
width media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 4IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
-webkit-animation media feature
DeprecatedNon-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support 15 — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support 14 — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-max-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-min-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-transform-2d media feature
Non-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support 15 — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support 14 — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-transform-3d media feature
Non-standard
Chrome No support 2 — 36Edge No support 12 — 79Firefox Full support 49
Full support 49
Full support 46
Disabled
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support 15 — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android Full support 49
Full support 49
Full support 46
Disabled
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support 14 — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-transition media feature
DeprecatedNon-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support 15 — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support 14 — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0

Legend

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also