@media CSS @규칙은 중괄호로 구분된 CSS 블록 내 중첩문 집합을 미디어 쿼리에 정의된 조건과 연결합니다.

참고: JavaScript에서는 @mediaCSSMediaRule CSS 객체 모델 인터페이스로 접근할 수 있습니다.

구문

@media @규칙은 최상위 코드나, 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있습니다.

/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

미디어 쿼리 구문에 관한 내용은 미디어 쿼리 사용하기 문서를 참고하세요.

형식 구문

@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>

미디어 특성

미디어 특성은 사용자 에이전트, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸져야 합니다.

이름 요약 참고
width 뷰포트 너비.  
height 뷰포트 높이.  
aspect-ratio 뷰포트 가로세로비.  
orientation 뷰포트 방향.  
resolution 출력 장치의 해상도.  
scan 출력 장치의 스캔 방법.  
grid 격자와 비트맵 중 출력 장치가 사용하는 화면.  
update 출력 장치가 화면을 업데이트하는 주기. Media Queries Level 4에서 추가
overflow-block 블록 축의 내용이 넘쳤을 때 출력 장치가 처리하는 방법. Media Queries Level 4에서 추가
overflow-inline 인라인 축의 내용이 넘쳤을 때 스크롤의 가능 여부. Media Queries Level 4에서 추가
color 출력 장치의 색상 채널별 비트 수, 흑백일 땐 0.  
color-gamut 사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위. Media Queries Level 4에서 추가
color-index 출력 장치의 색상 룩업 테이블(LUT) 항목 수, 존재하지 않을 땐 0.  
display-mode 웹 앱 매니페스트의 display 항목이 정의한 애플리케이션의 표시 모드. Web App Manifest 명세에서 정의
monochrome 출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0.  
inverted-colors 사용자 에이전트나 운영체제가 색을 반전 중인지 여부. Media Queries Level 5에서 추가
pointer 포인팅 장치가 주요 입력 수단인지 여부와, 그렇다면 그 정확도. Media Queries Level 4에서 추가
hover 주요 입력 수단으로 요소 위에 호버할 수 있는지 여부. Media Queries Level 4에서 추가
any-pointer 입력 수단 중 포인팅 장치의 존재 여부와, 존재한다면 그 정확도. Media Queries Level 4에서 추가
any-hover 어떤 입력 수단으로 요소 위에 호버할 수 있는지 여부. Media Queries Level 4에서 추가
light-level 환경의 광도. Media Queries Level 5에서 추가
prefers-reduced-motion 사용자가 줄어든 움직임을 선호함. Media Queries Level 5에서 추가
prefers-reduced-transparency 사용자가 줄어든 투명도를 선호함. Media Queries Level 5에서 추가
prefers-contrast 사용자가 시스템에 고대비/저대비를 요청했는지 여부. Media Queries Level 5에서 추가
prefers-color-scheme 사용자가 밝은 테마나 어두운 테마를 선호하는지 여부. Media Queries Level 5에서 추가
scripting 스크립트(JavaScript 등)를 사용할 수 있는지 여부. Media Queries Level 5에서 추가
device-width 출력 장치의 렌더링 표면 너비. Media Queries Level 4에서 제거
device-height 출력 장치의 렌더링 표면 높이. Media Queries Level 4에서 제거
device-aspect-ratio 출력 장치의 가로세로비. Media Queries Level 4에서 제거

예제

@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; }
}

Media Queries Level 4부터는 새로운 구문인 범위 표현을 사용해, 다음 코드처럼 더 간결한 미디어 쿼리를 작성할 수 있습니다.

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

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

더 많은 예제는 미디어 쿼리 사용하기를 참고하세요.

접근성 고려사항

글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 <length> 자리에는 em을 사용하는게 좋습니다.

empx 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 em이 더 자연스럽게 동작합니다.

Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대 prefers-reduced-motion 쿼리를 사용하면 사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다.

명세

Specification Comment Feedback
Media Queries Level 5
The definition of '@media' 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.  

브라우저 호환성

Update compatibility data on GitHub
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 3.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 9.2Samsung 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 9.2Samsung Internet Android ?
aspect-ratio media featureChrome Full support 3Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support YesSafari Full support 4.1WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 4.2Samsung Internet Android Full support 1.0
calc() expressionsChrome Full support 66Edge No support NoFirefox 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 Yes
color media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
color-gamut media featureChrome Full support 58Edge No support NoFirefox 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 feature
Non-standard
Chrome Full support 29Edge No support NoFirefox No support NoIE No support NoOpera Full support 16Safari Full support 8WebView Android Full support YesChrome 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 YesSafari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari 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 YesSafari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari 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 YesSafari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
display-mode media featureChrome Full support 45Edge No support NoFirefox 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
grid media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 10Opera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari 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 YesSafari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari 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 9.2Samsung Internet Android ?
inverted-colors media feature
ExperimentalNon-standard
Chrome 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 feature
ExperimentalNon-standard
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 ?
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 ?
Media query value supportChrome Full support 66Edge No support NoFirefox Full support 59IE No support NoOpera Full support 53Safari No support NoWebView Android No support NoChrome Android Full support 66Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android No support No
monochrome media featureChrome Full support 1Edge No support NoFirefox Full support 2IE No support NoOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
orientation media featureChrome Full support 3Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 4.1WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 4.2Samsung Internet Android Full support 1.0
overflow-block media feature
Experimental
Chrome 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 feature
Experimental
Chrome 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 9.2Samsung Internet Android ?
prefers-color-scheme media feature
Experimental
Chrome Full support 76Edge No support NoFirefox Full support 67IE No support NoOpera No support NoSafari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Firefox Android Full support 67Opera Android No support NoSafari iOS Full support 13Samsung Internet Android ?
prefers-reduced-motion media feature
Experimental
Chrome Full support 74Edge No support NoFirefox Full support 63IE No support NoOpera No support NoSafari Full support 10.1WebView Android Full support 74Chrome Android Full support 74Firefox Android Full support 64Opera Android No support NoSafari iOS Full support 10.3Samsung Internet Android ?
resolution media featureChrome Full support 27Edge 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 YesSafari Full support 6.1WebView Android Full support YesChrome Android Full support 27Firefox Android Full support 8
Full support 8
Partial support 4
Notes
Notes Supports <integer> values only.
Opera Android Full support YesSafari iOS Full support 7Samsung Internet Android Full support 1.5
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 ? Safari iOS ? Samsung Internet Android ?
scripting media feature
ExperimentalNon-standard
Chrome No support No
Notes
No support No
Notes
Notes See bug 489957.
Edge No support NoFirefox 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 ?
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 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 ? Safari iOS ? Samsung Internet Android ?
width media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari 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 ? — 23Safari Full support 4WebView Android No support ? — 37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support ? — 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 YesSafari Full support 3WebView Android Full support YesChrome 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 YesSafari 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 YesSafari Full support 3WebView Android Full support YesChrome 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 YesSafari 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 YesSafari Full support 3WebView Android Full support YesChrome 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 YesSafari 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 ? — 23Safari Full support 4WebView Android No support ? — 37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support ? — 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 Full support 12Firefox 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 ? — 23Safari Full support 4WebView Android No support ? — 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 ? — 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 ? — 23Safari Full support 4WebView Android No support ? — 37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support ? — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, Netaras
최종 변경자: alattalatta,