미디어 쿼리는 미디어 타입과 같이 폭, 높이, 색깔과 같이 디바이스의 특성을 이용해 스타일시트의 적용범위를 제한하는 하나이상의 식으로 구성되어 있습니다. CSS3에서 추가된 미디어쿼리를 사용하면 컨텐츠를 각 디바이스의 출력폭에 맞춰 표시하는것이 가능해, 컨텐츠들을 개별적으로 조정할 필요가 없습니다.

구문

미디어쿼리는 미디어타입으로 구성되어 있지만, CSS3의 명세에는 미디어 특성을 사용한 식 하나 이상을 포함하는것이 가능합니다. 또한 이 식의 평가결과는 진위값으로 되어 있습니다. 미디어 쿼리로 표시된 미디어타입이 표시할 문서의 종류가 일치하면, 미디어쿼리가 포함된 모든 식이 참일 경우 쿼리의 결과도 참이 됩니다.

<!-- link요소에 있어서의 CSS 미디어 쿼리 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 스타일 이벤트 내의 CSS 미디어 쿼리 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

미디어 쿼리가 참일 경우, 대응하는 스타일시트 또는 스타일 룰이 적용되어 스타일은 통상적으로 casecade로 표시됩니다. <link> 태그 내의 미디어쿼리에 대응하는 스타일시트는, 쿼리의 평가결과가 거짓으로 나타나도 다운로드 됩니다. 그럼에도 적용되지는 않습니다.

not 연산자나 only 연산자 어느쪽도 사용되지 않으면 미디어타입은 생략가능하며, 이 경우 미디어타입은 all으로 지정 되어 있다고 해석 가능합니다.

논리연산자

not 이나 andonly 와 같은 논리연산자를 사용해 복잡한 미디어 쿼리를 구성하는것이 가능합니다. and 연산자는 복잡한 미디어 특성을 연결해 하나의 미디어쿼리화 하는것으로 사용되어, 연결된 각 미디어 특성이 모두 참을 반환하면 쿼리 전체에 평가결과가 참이 됩니다. only 연산자는 미디어쿼리 전체가 일치하는 경우 스타일을 적용하는것에 사용되어 지정한 스타일이 낡은 브라우저에 적용하고싶지 않은 경우에 편리합니다. not 연산자나 only 연산자를 사용하려고 하는 경우 미디어타입을 반드시 지정할 필요가 있습니다.

거기에 더해 복잡한 미디어쿼리를 쉼표로 나눠 연결하는것이 가능합니다. 이 경우 미디어쿼리중 하나가 참을 반환하면 쿼리 전체가 참이 됩니다. 결국 or 연산자를 사용하는 경우와 같은 결과가 됩니다.

and

and 연산자는 복잡한 미디어 특성들이 서로 연결되거나 미디어 특성과 미디어타입을 연결시키는데 사용됩니다. 기본적으로 미디어쿼리(미디어 타입이 all 로 지정된 미디어특성)은 다음과 같이 표시하는것이 가능합니다.

@media (min-width: 700px) { ... }

디스플레이가 가로방향으로 되어있을 경우에만 스타일을 적용하고싶은 경우and 연산자를 사용해 미디어특성을 연결하는것이 가능합니다.

@media (min-width: 700px) and (orientation: landscape) { ... }

위 미디어 쿼리는 viewport의 폭이  700px 이상이며 디스플레이가 횡방향일 경우에만 참이 됩니다. 또한 디스플레이의 미디어 타입은 TV같은 조건을 포함하고 싶은 경우 미디어타입은 상기 미디어의 특성에 and 연산자로 연결 가능합니다.

@media tv and (min-width: 700px) and (orientation: landscape) { ...  }

이 미디어 쿼리는 미디어타입이 TV로 각 viewport의 폭이 700px 이상이며 디스플레이가 횡방향일 경우 참이 반환됩니다.

쉼표로 구분된 리스트

미디어 쿼리에 포함된 콤마구분 리스트는 or 연산자와 같은 동작을 합니다. 콤마구분 리스트를 사용하는 경우 하나의 미디어 쿼리가 참이면 스타일 (시트)가 적용됩니다. 리스트 내에 미디어쿼리는 독립된 쿼리로 사용되어 한 미디어쿼리에 대응하는 연산자는 각 쿼리에 영향을 끼치지 않습니다. 결국 컴마로 구분된 리스트의 미디어 쿼리를 사용할 경우 다른 미디어 특성, 미디어 타입, 그리고 미디어상태에 대해 똑같은 스타일을 적용하는것이 가능합니다.

예를 들어 가로폭 700px이상의 디바이스, 또한 가로방향의 모바일 단말의 쌍방에 스타일을 적용하고싶은 경우, 미디어 쿼리는 다음과 같이 작성할 수 있습니다.

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

예를 들어 디바이스의  viewport폭이 800px인 경우 미디어쿼리의 전반은  @media all and (min-width: 700px) 로 해석됩니다. 그렇기 때문에 미디어 타입이  handheld이 아니고 후반의 조건을 만족하지 않아도 전체적으론 참입니다. 디바이스의 가로 폭이 500px의 모바일 단말에서 디스플레이가 가로방향인 경우 전반의 쿼리는 거짓이 되나 후반의 조건을 만족하기 때문에 전체적으로 봤을때는 참이 됩니다.

not

어떤 미디어 쿼리의 결과가 거짓인 경우 (컬러 디스플레이의 경우 monochrome이나 min-width: 700px 의 미디어 특성에 대응하는 폭이 600px인 스크린) , 이 쿼리 전체에 not 연산자가 적용된 결과는 참이 됩니다. 컴마 구분 미디어쿼리에 not 연산자를 적용한 경우 일련의 미디어 쿼리 전체에 반대되는 결과를 반환합니다. 각각의 쿼리에 not 연산자를 부여하는 행위로 착각하는 경우가 많이 있으니 주의해야 합니다. not 연산자는 개별의 미디어 쿼리를 역으로 바꾸는것이 불가능하며, 항상 미디어쿼리 전체를 대상으로 적용됩니다. 예를 들어 이하의 쿼리의 not 연산자 또한 제일 마지막에 처리됩니다.

@media not all and (monochrome) { ... }

이 쿼리의 처리 순서는 다음과 같습니다.

@media not (all and (monochrome)) { ... }

추가의 예로 다음의 미디어 쿼리를 참고해주시기 바랍니다.

@media not screen and (color), print and (color)

이 쿼리의 처리 순서는 다음과 같습니다.

@media (not (screen and (color))), print and (color)

only

only 연산자를 사용하면 미디어 특성을 지정하는 미디어쿼리를 서포트하지 않는 낡은 브라우저에 대응하여 특정 스타일을 적용하는것이 가능합니다.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

유사 BNF 문법

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

미디어 쿼리는 대문자와 소문자가 구별됩니다. 불명의 미디어쿼리가 지정된 미디어쿼리는 항상 거짓을 반환합니다. 

메모: 위와 같이 표현식의 전후에는 괄호가 필요하며, 괄호가 쓰여지지 않은 경우에는 에러가 반환됩니다.

미디어 특성

대부분의 미디어 특성에는 이하나 이하와 같은 조건을 붙이기 때문에 "min-"이나 "max-"와 같은 접두사를 붙이는 경우가 가능합니다. 이러한 특성덕분에 "<"나 ">"와 같은 연산자를 사용할 필요가 없으며, HTML이나 XML에 붙일 기호와 충돌할 염려도 없습니다. 미디어 특성에 값이 지정되지 않은 경우 실제 값이 0이 아닌 경우 식은 참을 반환합니다.

메모: 브라우저가 작동하고 있는 디바이스에 해당 특성이 존재하지 않는 경우 그 미디어 특성에 대한 관계식은 거짓이 됩니다. 예를 들어 청각 디바이스에 대한 aspect비는 미디어 특성에 항상 거짓이 반환됩니다.

color

타입: <color>
미디어: media/visual
min/max 접두사 사용 가능 여부: 가능

출력 디바이스의 색 깊이(역주: 하나의 픽셀을 표시하는데 사용하는 비트 수)를 지정합니다. 흑백으로 출력되는 디바이스는 이 값이 0이 됩니다.

메모: 출력 디바이스가 색깔마다 다른 깊이를 가지고 있을 경우 그중에서 제일 비트수가 적은 색깊이가 디바이스의 특성으로 지정됩니다. 예를 들어 디스플레이가 청적에 대해서 5비트가 사용되며 녹색은 6비트가 사용되는 경우 해당 디바이스는 5비트의 색 깊이를 가지고 있는 것으로 취급됩니다. 디바이스가 인덱스컬러를 사용하고 있는 경우 참고하고 있는 테이블 내에서 가장 비트수가 적은 색깊이가 색 깊이의 특성이 됩니다.

표시 예제

흑백이 아닌 모든 디바이스에 스타일 시트를 적용하는 경우

@media all and (color) { ... }

색 깊이가 4비트 이상인 디바이스에 스타일 시트를 적용하는 경우

@media all and (min-color: 4) { ... }

color-index

타입: <integer>
미디어: media/visual
min/max 접두사 사용 가능 여부: 가능

인덱스 컬러를 사용하는 출력 디바이스에 대해 참고할 색 테이블이 포함된 색의 갯수를 지정합니다.

표기예

인덱스 컬러를 사용하는 모든 디바이스에 스타일 시트를 적용하고 싶은 경우

@media all and (color-index) { ... }

256색 이상의 인덱스 컬러를 사용하는 디바이스 스타일 시트에 적용하는 경우

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

aspect-ratio

값: <ratio>
미디어: media/visual, media/tactile
min/max접두사 사용 가능 여부: 가능

출력 디바이스에 대한 표시부분의 aspect 비율을 지정합니다. 이 값은 슬래시("/")로 구분된 두가지의 정수식으로 지정하며 수평방향, 수직방향의 픽셀 수의 비를 표시합니다.

표기예

가로 폭이 세로 폭을 초과하는 디스플레이에 스타일 시트를 적용하는 경우

@media screen and (min-aspect-ratio: 1/1) { ... }

이 쿼리에 의해 aspect 비가 1:1 이상, 즉 표기부분이 적방형 혹은 가로방향인 경우 스타일시트가 적용됩니다.

device-aspect-ratio

타입: <ratio>
미디어: media/visual, media/tactile
min/max 접두사 사용 가능 여부: 가능

출력 디바이스의 aspect 비를 지정 가능합니다. 이 값은 슬래쉬("/")로 구분된 두개의 정수식으로 표현되며 (수직방향) / (수평방향)과 같이 지정할 수 있습니다.

표기예

와이드 스크린의 디바이스 디스플레이에 스타일 시트를 적용하는 경우

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

이 쿼리에 의해 aspect비가  16:9혹은 16:10인 경우 스타일이 적용됩니다.

device-height

타입: <length>
미디어: media/visual, media/tactile
min/max 접두사 사용 가능 여부: 가능

출력 디바이스의 세로폭을 기준으로 합니다. 여기서 세로폭은 도큐먼트 윈도우와 같은 렌더링 영역이 아닌 스크린이나 브라우저의 전체 크기가 기준이 됩니다.

표기예

표시 스크린에 대한 세로 폭이 800px 미만인 경우에 스타일 시트를 적용하고자 하는 경우

<link rel="stylesheet" media="screen and (max-device-height: 799px)" />

device-width

타입 <length>
미디어: media/visual, media/tactile
min/max 접두사 사용 가능 여부: 가능

출력 디바이스의 가로폭을 기준으로 합니다. 여기서 가로폭은 도큐먼트 윈도우와 같은 렌더링 영역이 아닌 스크린이나 브라우저의 전체 크기가 기준이 됩니다.

표기예

표시할 스크린에 대한 가로폭이 800px 미만일때 스타일 시트를 적용하고자 하는 경우

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

grid

타입 <mq-boolean> <integer>로 0이나 1을 지정 가능 합니다.
미디어: all
min/max 접두사 사용 가능 여부: 不可

출력 디바이스가 그리드 식인가 비트맵식인가를 지정합니다. 그리드 디바이스(TTY 터미널이나 휴대전화 디스플레이와 같은 단일 폰트를 사용하는 경우)의 경우에는 1이 되며 이외의 디바이스값은 0이 됩니다.

표기예

디스플레이 폭이 15문자 이내의 모바일 단말에 스타일 시트를 적용하고싶은 경우

@media handheld and (grid) and (max-width: 15em) { ... }
메모: 그리드 디바이스에 대한 "em"단위는 특별한 의미를 가지고 있습니다. "1em"의 폭을 정확하게 지정하는것이 불가능하기 때문에 lem은 그리드 셀에 대한 수평방향의 가로폭, 수직방향의 세로폭으로 취급됩니다.

height

타입: <length>
미디어: media/visual, media/tactile
min/max 접두사 사용 가능 여부: 가능

출력 디바이스의 세로폭(viewport의 세로폭, 또한 프린터시 페이지박스의 세로폭)을 지정합니다.

메모: 유저가 윈도우 폭을 변화시키는 경우 동시에 Firefox는 width와 height 의 미디어 특성을 참고하며 스타일시트는 미디어 쿼리에 따라 적절하게 변경됩니다.

monochrome

타입: <integer>
미디어: media/visual
min/max 접두사 사용 가능 여부: 가능

모노크롬(그레이 스케일)의 디바이스에 대한 bits per pixel를 지정합니다. 모노크롬 디바이스가 아니면 값은 0이됩니다.

표기예

모든 모노크롬 디바이스에 스타일 시트를 지정하는 경우

@media all and (monochrome) { ... }

8 bits per pixel이상의 모노크롬 디바이스에 스타일 시트를 적용하고싶은 경우

@media all and (min-monochrome: 8) { ... }

orientation

타입: landscape | portrait
미디어: media/visual
min/max 접두사 사용 가능 여부: 불가

viewport의 방향을 지정합니다. 가로방향일때는 landscape를, 세로방향일땐 portrait를 지정할 시 참을 반환합니다.

표기예

디스플레이가 세로방향일때만 스타일 시트를 적용하고싶은 경우

@media all and (orientation: portrait) { ... }
메모: 이 값은 디바이스에 대한 실제 방향과 반드시 일치하지 않습니다. 대부분의 디바이스에 대해 소프트키보드를 동작하면 viewport가 가로방향이 되어버려 portrait 대힌 landscape의 스타일이 적용됩니다.

resolution

값: <resolution>
미디어: bitmap
min/max접두사의 적용 가능 여부:

출력 디바이스의 해상도(화면밀도)를 지정합니다. 해상도의 단위는 dots per inch(dpi)가 dots percentimiter(dpcm)을 지정할 수 있습니다.

표기예

300dpi 이상의 해상도를 가지는 디바이스의 스타일 시트를 적용하고자 하는 경우

@media print and (min-resolution: 300dpi) { ... }

(min-device-pixel-ratio: 2)같은 철지난 문구를 다음과 같은 방식으로 변환하는것이 가능합니다.

@media screen and (min-resolution: 2dppx) { ... }

scan

타입: progressiveinterlace
미디어: media/tv
min/max 접두사의 적용 가능 여부: 不可

출력 디바이스가 TV인 경우 주사방식을 지정합니다.

표기예

프로그래시브 방식으로 주사하는 TV에 대한 스타일시트를 적용하는 경우

@media tv and (scan: progressive) { ... }

width

타입: <length>
미디어: media/visual, media/tactile
min/max 접두사의 적용 가능 여부: 가능

출력 디바이스 렌더링 영역의 폭(도큐먼트 윈도우의 폭, 또한 프린터에 대한 페이지박스의 넓이)를 지정합니다.

메모: 유저가 윈도우 폭을 변화시킨 경우 동시에 Firefox는 width와 height의 미디어 특성을 참고하여 스타일시트는 미디어쿼리를 따라 적절하게 변경됩니다.

표기예

모바일 단말이나 20em보다 가로폭이 긴 스크린에 스타일 시트를 적용하고자 하는 경우

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

가로폭이 8.5인치 이상의 인쇄 미디어에 스타일 시트를 적용하고자 하는 경우

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />

viewport의 가로폭이 500px 이상 800px 이하인 경우 스타일 시트를 적용하고자 하는 경우

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

Mozilla의 고유한 미디어 특성

Mozilla와 Gecko에만 몇가지 고유한 미디어 특성이 제공됩니다. 이것들중 고식 미디어 특성으로 제안된 것도 몇가지 존재합니다.

-moz-images-in-menus

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

디바이스가 이미지를 메뉴에 표시 가능하면 1이 되며 그렇지 않은 경우 0이 됩니다. 이 미디어 특성은 CSS유사클래스:-moz-system-metric(images-in-menus)에 대응됩니다.

-moz-mac-graphite-theme

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

Mac OS X의 유저가 "Graphite" 표시를 사용하고 있는 경우 1이 됩니다. 통상 blue 표시를 사용하고 있거나 Mac OS X가 아닌 경우 0이 됩니다.

이 미디어 특성은 CSS유사클래스:-moz-system-metric(mac-graphite-theme) 와 대응됩니다.

-moz-maemo-classic

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

Maemo 유저가 오리지날 테마를 사용하고 있는 경우 1이 되며 Fremantle의 새로운 테마를 사용하는 경우 0이 됩니다.

이 미디어 특성은 CSS유사클래스:-moz-system-metric(maemo-classic)에 대응됩니다.

-moz-device-pixel-ratio

Requires Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
Deprecated Gecko &16

타입: <number>
미디어: media/visual
min/max 접두사의 적용 가능 여부:

1px당 디바이스의 픽셀을 지정합니다.

이 특성은 현재 사용되지 않습니다.

대신 resolution 미디어 특성을 dppx 단위로 사용해주시기 바랍니다.

-moz-device-pixel-ratio는 Firefox 16 이전 버전과 호환성을 유지하기 위해서 -webkit-device-pixel-ratio는 dppx를 서포트하지 않는 Webkit 베이스 브라우저의 호환성을 유지하기 위해 사용 가능합니다.

표기예

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit 베이스의 브라우저 */
       (min--moz-device-pixel-ratio: 2),    /* Firefox 16 이전 */
       (min-resolution: 2dppx),             /* 기준 */
       (min-resolution: 192dpi)             /* dppx를 서포트하지 않는 브라우저 */ 

resolution이나 dppx 의 호환성에 관련된 성공 사례에 관련해서는 CSSWG의 문서 를 참고해주시기 바랍니다.

메모: 이 미디어 특성은 -webkit-device-pixel-ratio로써 Webkit과 IE 11 for Windows Phone 8.1에서 구현되어 있습니다. Gecko에 있어서 min과 max의 접두사는 min--moz-device-pixel-ratio와 max--moz-device-pixel-ratio 의 이름에 구현되었습니다만, Webkit에 있어서 같은 접두사는 -webkit-min-device-pixel-ratio 와 -webkit-max-device-pixel-ratio 라는 이름으로 구현되어 있습니다.

-moz-os-version

Requires Gecko 25.0(Firefox 25.0 / Thunderbird 25.0 / SeaMonkey 2.22)

타입: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

사용된 OS를 지정합니다. 현재는 Windows 상에서만 구현되어 잇습니다. 지정 가능 값은 아래와 같습니다.

  • windows-xp
  • windows-vista
  • windows-win7
  • windows-win8
  • windows-win10

이 미디어 특성은 어플리케이션의 스킨이나 다른 UI를 구현하는 코드가 OS상에서 정상적으로 동작하도록 제공하고 있습니다.

-moz-scrollbar-end-backward

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 不可

디바이스의 UI에 있어서 스크롤바의 말단에 역방향의 화살표 방향이 표시되어 있으면 1이 되며 그렇지 않은 경우에는 0이 됩니다.

이 미디어 특성은 CSS유사클래스:-moz-system-metric(scrollbar-end-backward) 에 대응됩니다.

-moz-scrollbar-end-forward

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

디바이스의 UI에 있어서 스크롤바의 말단에 정방향의 화살표가 표시되어 있으면 1이 되며 그렇지 않은 경우에는 0이 됩니다.

이 미디어 특성은 CSS유사클래스:-moz-system-metric(scrollbar-end-forward) 에 대응됩니다.

-moz-scrollbar-start-backward

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

디바이스의 UI에 있어서 스크롤바의 선단에 역방향의 화살표가 표시되어 있으면 1이 되며 그렇지 않은 경우에는 0이 됩니다.

이 미디어 특성은 CSS유사클래스:-moz-system-metric(scrollbar-start-backward) 에 대응됩니다.

-moz-scrollbar-start-forward

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

디바이스의 UI에 있어서 스크롤바의 선단에 정방향의 화살표가 표시되어 있으면 1이 되며 그렇지 않은 경우에는 0이 됩니다.

이 미디어 특성은 CSS유사클래스:-moz-system-metric(scrollbar-start-forward) 에 대응됩니다.

-moz-scrollbar-thumb-proportional

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 不可

 디바이스의 UI에 있어서 스크롤바의 손잡이 크기가 스크린에 표시된 웹 페이지의 크기에 대해 변경 가능하면 1을 반환하며 그렇지 않을 경우 0을 반환합니다.

이 미디어 특성은 CSS의 유사 클래스:-moz-system-metric(scrollbar-thumb-proportional) 에 대응됩니다.

-moz-touch-enabled

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

터치스크린에 대응하는 디바이스가 터치이벤트를 서포트하고 있는 경우 1이 되며 그렇지 않은 경우 0이 됩니다.

이 미디어 특성은 CSS의 유사 클래스:-moz-system-metric(touch-enabled) 에 대응됩니다.

사용예

터치 스크린의 디바이스가 적용된 유저에 대해 손가락으로 조작하기 쉽도록 버튼을 조금 크게 표시하는 등의 사용법이 존재합니다.

-moz-windows-classic

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

Windows 유저가 테마를 적용하고있지 않는 경우 (uxtheme와 같은 추가 프로그램을 사용하지 않고 기존의 테마를 유지하는 경우) 1을 반환하며 그렇지 않은 경우 0을 반환합니다.

이 미디어 특성은 CSS의 유사 클래스:-moz-system-metric(windows-classic) 에 대응됩니다.

-moz-windows-compositor

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

Windows유저가 DWM compositor를 사용하고 있는 경우 1이 반환되며 그렇지 않은 경우 0이 반환됩니다.

이 미디어 특성은 CSS의 유사 클래스:-moz-system-metric(windows-compositor) 에 대응됩니다.

-moz-windows-default-theme

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

Windows유저가 기본 테마 (Luna、Royale、Zune、Aero(Vista Basic、Vista Advanced、Aero Glass)를 사용하고 있는 경우 1이 되며 그렇지 않은 경우 0을 반환합니다.

이 미디어 특성은 CSS의 유사 클래스:-moz-system-metric(windows-default-theme) 에 대응됩니다.

-moz-windows-glass

Requires Gecko 21.0(Firefox 21.0 / Thunderbird 21.0 / SeaMonkey 2.18)

타입: <integer>
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

Windows유저가 Glass 테마를 사용하고 있는 경우 값이 1이 되며 그렇지 않은 경우 0을 반환합니다. 이 테마는 Windows 7 이전에만 존재합니다.

-moz-windows-theme

Requires Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

타입: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
미디어: media/visual
min/max 접두사의 적용 가능 여부: 불가

Windows 유저가 사용하고 있는 테마를 지정합니다. 이 미디어 특성은 Windows 상에서만 유효하며 지정 가능한 값은 다음과 같습니다.

  • aero
  • luna-blue
  • luna-olive
  • luna-silver
  • royale
  • generic
  • zune

이 미디어 특성은 어플리케이션의 스킨이나 다른 UI를 구현하는 코드가 OS 상에서 올바르게 작동 할 수 있도록 제공되고 있습니다.

브라우저 구현 현황

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

기능 Chrome Firefox (Gecko) Internet Explorer Opera Safari
기본 서포트 21 3.5 (1.9.1) 9.0 9 4
grid ? No support [1] ? ? ?
resolution 29 3.5 (1.9.1) [2]
8.0 (8.0) [3]
? ? ?
scan ? No support [4] ? ? ?
기능 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
기본 서포트 (Yes) (Yes) ? (Yes) (Yes)

[1] 미디어타입 grid 는 서포트되지 않습니다.

[2] 값으로 <integer> 가 사용 가능합니다.

[3] 값으로 <number> 가 사용 가능합니다.

[4] 미디어 디바이스 tv는 서포트하지 않습니다.

참고

문서 태그 및 공헌자

최종 변경자: hwanseung,