미디어 쿼리 레벨 4

1. 소개

이 절은 규범적이지 않습니다.

1997년에 HTML4 [HTML401]는 미디어에 따라 달라지는 스타일 시트를 지원하는 메커니즘을 정의했으며, 서로 다른 미디어 유형에 맞게 조정되었다. 예를 들어, 문서는 화면용과 인쇄용에 서로 다른 스타일 시트를 사용할 수 있다. HTML에서는 다음과 같이 작성할 수 있다:

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

CSS는 @media 및 @import 규칙으로 이 기능을 채택하고 확장하여, 개별 기능의 값을 질의할 수 있는 능력을 추가했다:

@media screen {
  * { font-family: sans-serif }
}

@import "print-styles.css" print;

미디어 쿼리는 HTML, XHTML, XML [xml-stylesheet] 및 CSS의 @import 및 @media 규칙과 함께 사용할 수 있다.

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

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

<?xml-stylesheet media="screen and (color), projection and (color)"
                 rel="stylesheet" href="example.css" ?>

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }

1.1. 모듈 상호작용

이 모듈은 [CSS2]의 7절 및 [MEDIAQUERIES-3]에 정의된 미디어 쿼리, 미디어 유형 및 미디어 기능을 대체하고 확장한다.

1.2. 값

이 명세에서 정의되지 않은 값 유형(예: <integer>, <number> 또는 <resolution>)은 [CSS-VALUES-3]에서 정의된다. 다른 CSS 모듈은 이러한 값 유형의 정의를 확장할 수 있다.

1.3. 단위

미디어 쿼리에서 사용되는 단위는 CSS의 다른 부분과 동일하며, [CSS-VALUES-3]에 정의되어 있다. 예를 들어, 픽셀 단위는 물리적 픽셀이 아니라 CSS 픽셀을 나타낸다.

상대 길이 단위는 미디어 쿼리에서 초기값을 기준으로 하며, 이는 단위가 선언 결과를 기준으로 하는 일이 결코 없음을 의미한다. 예를 들어, HTML에서 em 단위는 사용자 에이전트 또는 사용자의 선호에 의해 정의되는 초기값인 font-size에 상대적이며, 페이지의 어떤 스타일링에도 의존하지 않는다.

2. 미디어 쿼리

A media query는 문서가 표시되는 사용자 에이전트 또는 장치의 특정 측면을 테스트하는 방법이다. 미디어 쿼리는 (거의) 항상 문서의 내용과는 독립적이며, 문서의 스타일링, 또는 그 밖의 어떤 내부적 측면에도 의존하지 않는다; 다른 기능이 미디어 쿼리의 해석에 영향을 준다고 명시적으로 지정하지 않는 한, “외부” 정보에만 의존한다.

미디어 쿼리의 구문은 선택적 미디어 쿼리 수정자, 선택적 미디어 유형, 그리고 0개 이상의 미디어 기능으로 구성된다:

미디어 쿼리는 참 또는 거짓인 논리식이다. 미디어 쿼리는 다음의 경우 참이다:

• 지정된 경우, 미디어 유형이 사용자 에이전트가 실행 중인 장치의 미디어 유형과 일치하고,

• 미디어 조건이 참이다.

이 절의 미디어 쿼리에 관한 진술은 구문 절을 따른다고 가정한다. 구문에 부합하지 않는 미디어 쿼리는 § 3.2 오류 처리에서 논의한다. 즉, 이 절의 요구사항보다 구문이 우선한다.

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

@import url(example.css) screen and (color);

사용자 에이전트는 자신이 인지하는 사용자 환경의 변화에 대응하여 미디어 쿼리를 재평가해야 하며, 예를 들어 장치가 가로 방향에서 세로 방향으로 전환되는 경우, 그 미디어 쿼리에 의존하는 모든 구성 요소의 동작을 그에 맞게 변경해야 한다.

다른 기능이 미디어 쿼리의 해석에 영향을 준다고 명시적으로 지정하지 않는 한, 표현식을 평가하기 위해 스타일 시트를 적용할 필요는 결코 없다.

2.1. 미디어 쿼리 결합

여러 미디어 쿼리는 쉼표로 구분된 미디어 쿼리 목록으로 결합할 수 있다.

미디어 쿼리 목록은 구성 요소 미디어 쿼리 중 어느 하나라도 참이면 참이고, 구성 요소 미디어 쿼리가 모두 거짓인 경우에만 거짓이다.

@media screen and (color), projection and (color) { … }

빈 미디어 쿼리 목록은 참으로 평가된다.

@media all { … }
@media { … }

2.2. 미디어 쿼리 수정자

미디어 쿼리는 선택적으로 단 하나의 미디어 쿼리 수정자로 접두될 수 있으며, 이는 뒤따르는 미디어 쿼리의 의미를 바꾸는 단일 키워드이다.

2.2.1. 미디어 쿼리 부정: not 키워드

개별 미디어 쿼리는 키워드 not을 접두함으로써 결과를 부정할 수 있다. 미디어 쿼리가 정상적으로는 참으로 평가될 경우, not을 접두하면 거짓으로 평가되며, 그 반대도 마찬가지이다.

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

2.2.2. 레거시 사용자 에이전트로부터 미디어 쿼리 숨기기: only 키워드

미디어 쿼리의 개념은 HTML4 [HTML401]에서 비롯된다. 그 명세는 미디어 유형만 정의했지만, 미디어 기능 같은 미래 개념의 추가를 수용할 수 있는 전방 호환 구문을 갖고 있었다: 첫 번째 비영숫자 문자가 나오기 전까지의 미디어 쿼리 문자를 소비하고, 이를 미디어 유형으로 해석하며, 나머지는 무시한다. 예를 들어, 미디어 쿼리 screen and (color)는 screen까지만 잘려 해석된다.

불행히도, 이 오류 처리 동작을 사용하는 레거시 사용자 에이전트는 미디어 쿼리 내의 어떤 미디어 기능도 무시하게 되며, 이는 기능이 쿼리의 미디어 유형보다 훨씬 더 중요하더라도 마찬가지다. 이는 부적절한 상황에서 스타일이 실수로 적용되는 결과를 낳을 수 있다.

이러한 미디어 쿼리를 레거시 사용자 에이전트로부터 숨기기 위해, 미디어 쿼리는 키워드 only로 접두될 수 있다. only 키워드는 미디어 쿼리의 결과에 영향이 없다. 다만 레거시 사용자 에이전트가 이를 미지의 미디어 유형 “only”로 지정한 것으로 파싱하게 하여, 결과적으로 무시되게 한다.

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

참고: only 키워드는 미디어 유형 앞에서만 사용할 수 있다. 미디어 기능만으로 구성된 미디어 쿼리나, 미디어 쿼리 수정자인 not 등이 있는 경우는 레거시 사용자 에이전트에 의해 자동으로 거짓으로 처리된다.

참고: 이 명세 발행 시점에는 이러한 레거시 사용자 에이전트가 극히 드물기 때문에, only 수정자를 사용하는 것은 드물게(혹은 전혀) 필요하다.

2.3. 미디어 유형

미디어 유형은 문서가 표시될 수 있는 사용자 에이전트 장치의 광범위한 분류이다. 원래의 미디어 유형 집합은 HTML4에서 <link> 요소의 media 속성을 위해 정의되었다.

불행히도, 미디어 유형은 서로 다른 스타일링 요구를 가진 장치들을 구분하는 방법으로는 불충분한 것으로 판명되었다. 원래는 상당히 뚜렷하게 구분되던 몇몇 범주들, 예컨대 screen과 handheld은 발명된 이후 수년 동안 크게 서로 섞이게 되었다. 다른 것들, 예컨대 tty나 tv는 완전한 기능을 갖춘 컴퓨터 모니터의 일반적인 기준과는 다른 유용한 차이를 드러내며, 따라서 서로 다른 스타일링으로 대상으로 삼는 데 잠재적으로 유용하지만, 미디어 유형을 상호 배타적인 것으로 정의한 탓에 이를 합리적인 방식으로 사용하기가 어렵다; 대신, 그 배타적인 측면은 미디어 기능인 grid나 scan처럼 더 잘 표현된다.

따라서, 다음 미디어 유형이 미디어 쿼리에서 사용되도록 정의된다:

all

모든 장치와 일치한다.

print

프린터 및 인쇄된 표시를 재현하도록 의도된 장치(예: 문서를 “인쇄 미리보기”로 표시하는 웹 브라우저)에 매치된다.

screen

print로 일치하지 않는 모든 장치와 일치한다.

또한, 다음 더 이상 사용되지 않는 미디어 유형이 정의된다. 작성자는 이러한 미디어 유형을 사용해서는 안 된다; 대신, 스타일링하려는 장치의 측면을 더 잘 나타내는 적절한 미디어 기능을 선택할 것을 권장한다.

사용자 에이전트는 다음 미디어 유형을 유효한 것으로 인식해야 하지만, 아무것과도 일치하지 않도록 해야 한다.

• tty
• tv
• projection
• handheld
• braille
• embossed
• aural
• speech

참고: 모든 미디어 유형은 그들의 중요한 차이를 포착하는 적절한 미디어 기능이 정의됨에 따라, 시간이 지나면 역시 더 이상 사용되지 않게 될 것으로 예상된다.

2.4. 미디어 기능

미디어 기능은 미디어 유형보다 더 세밀한 테스트로, 사용자 에이전트 또는 표시 장치의 하나의 특정 기능을 시험한다.

구문적으로, 미디어 기능은 CSS 속성과 유사하다: 기능 이름, 콜론, 그리고 시험할 값을 포함한다. 또한 기능 이름만으로 불리언 형태로 쓸 수도 있고, 비교 연산자를 사용하는 범위 형태로도 쓸 수 있다.

하지만, 속성과 미디어 기능 사이에는 몇 가지 중요한 차이가 있다:

• 속성은 문서를 어떻게 표현할지에 대한 정보를 제공하기 위해 사용된다. 미디어 기능은 출력 장치의 요구 사항을 설명하기 위해 사용된다.
• 미디어 기능은 항상 괄호로 감싸며 세미콜론으로 구분하는 대신 and 또는 or 키워드로 결합한다. 예: (color) and (min-width: 600px).
• 미디어 기능은 오직 이름만으로도 (콜론과 값을 생략하고) 불리언 문맥에서 기능을 평가할 수 있다. 이는 0 또는 “없음”을 나타내는 합리적인 값이 있는 기능을 위한 편리한 축약 표기다. 예를 들어, (color)는 color 미디어 기능이 0이 아닌 경우 참이다.
• “범위(range)” 유형의 미디어 기능은 범위 문맥에서 작성할 수 있으며, 콜론 대신 표준 수학 비교 연산자를 사용하거나, 또는 기능 이름에 “min-” 또는 “max-”를 접두할 수 있다.
• 속성은 때때로 복잡한 값을 받아들인다. 예: 여러 다른 값이 포함된 계산. 미디어 기능은 단일 값만 받아들인다: 하나의 키워드, 하나의 숫자 등.

미디어 기능이 UA가 실행 중인 장치에 존재하지 않는 개념을 참조하는 경우 (예: 음성 UA에는 “너비(width)”라는 개념이 없다), 미디어 기능은 항상 거짓으로 평가되어야 한다.

<link media="speech and (device-aspect-ratio: 16/9)"
      rel="stylesheet" href="example.css">

2.4.1. 미디어 기능 유형: “range”와 “discrete”

모든 미디어 기능은 정의 표에서 자신의 “유형”을 “range” 또는 “discrete” 중 하나로 정의한다.

“discrete” 미디어 기능은 pointer와 같이 값의 집합에서 값을 취한다. 값은 키워드일 수도 있고 불리언 숫자(0과 1)일 수도 있지만, 공통점은 본질적인 “순서”가 없다는 점이다—​ 어떤 값도 다른 값보다 “작다”거나 “크다”고 할 수 없다.

반면 “range” 미디어 기능은 width처럼 값의 범위에서 값을 취한다. 임의의 두 값은 어느 쪽이 더 작고 어느 쪽이 더 큰지 비교할 수 있다.

두 유형의 유일한 중요한 차이는 “range” 미디어 기능이 범위 문맥에서 평가될 수 있고, 이름에 “min-” 및 “max-” 접두를 허용한다는 점이다. 이들 중 어느 하나를 수행하면 기능의 의미가 바뀐다—​ 즉, 기능이 주어진 값과 정확히 일치할 때 참이 되는 대신, 기능이 주어진 값보다 크거나/작거나/같을 때 일치한다.

2.4.2. 불리언 문맥에서 미디어 기능 평가

미디어 기능은 보통 CSS 속성과 유사한 구문을 갖지만, (color)처럼 기능 이름만으로 더 단순하게 쓸 수도 있다.

이렇게 작성되면, 미디어 기능은 불리언 문맥에서 평가된다. 기능이 다음을 제외한 어떤 값에 대해서라도 참이 될 수 있다면— 숫자 0, 값이 0인 <dimension>, 또는 키워드 none— 미디어 기능은 참으로 평가된다. 그렇지 않으면 거짓으로 평가된다.

2.4.3. 범위 문맥에서 미디어 기능 평가

“range” 유형의 미디어 기능은 값에 순서가 있다는 사실을 활용하여, 일반적인 수학 비교 연산자를 사용하는 범위 문맥으로 대체 표기할 수 있다:

참고: 이 구문은 Mediaqueries 레벨 4에서 새로 도입되었으며, 따라서 현재는 min-/max- 접두사만큼 널리 지원되지 않는다.

기본 형태는 기능 이름, 비교 연산자, 그리고 값으로 구성되며, 그 관계가 참이면 참을 반환한다.

나머지 형태는, 기능 이름이 두 값 비교 사이에 중첩된 형태로, 두 비교가 모두 참이면 참을 반환한다.

“range” 유형인 일부 미디어 기능은 음수 범위에서 거짓이라고 한다. 이는 음수 값이 유효하며 파싱되어야 하고, 미디어 기능이 그러한 음수 값과 같거나, 작거나, 작거나 같은지를 질의하는 것은 모두 거짓으로 평가되어야 함을 의미한다. 미디어 기능이 음수 값보다 크거나, 크거나 같은지를 질의하는 것은 그 관계가 참이면 참으로 평가된다.

참고: 만약 음수 값이 파싱 시점에 거부되었다면, 오류 처리 규칙에 따라 unknown으로 취급되었을 것이다. 그러나 현실에서, 장치의 resolution이 -300dpi인지 여부는 미지(unknown)가 아니라, 거짓임이 알려져 있다. 마찬가지로, 모든 시각 장치에서 대상 표시 영역의 width는 -200px보다 크다는 것이 알려져 있다. 위 규칙은 이를 반영하여, 직관이 UA의 동작과 일치하도록 만든다.

@media not (width <= -100px) {
  body { background: green; }
}

@media (height > -100px) {
  body { background: green; }
}

@media not (resolution: -300dpi) {
  body { background: green; }
}

2.4.4. 범위 기능에 “min-” 및 “max-” 접두사 사용

위에서 설명한 것처럼 “range” 유형의 미디어 기능을 범위 문맥에서 평가하는 대신, 기능은 일반적인 미디어 기능으로 작성하되, 기능 이름에 “min-” 또는 “max-” 접두사를 붙여 쓸 수 있다.

이는 다음과 같이 범위 문맥에서 기능을 평가하는 것과 동등하다:

• 기능 이름에 “min-” 접두사를 사용하는 것은 “>=” 연산자를 사용하는 것과 동등하다. 예를 들어, (min-height: 600px)는 (height >= 600px)와 동등하다.
• 기능 이름에 “max-” 접두사를 사용하는 것은 “<=” 연산자를 사용하는 것과 동등하다. 예를 들어, (max-width: 40em)는 (width <= 40em)와 동등하다.

참고: “min-”과 “max-”는 모두 값을 포함하는 범위 비교와 동일하므로, 특정 상황에서는 제약이 될 수 있다.

@media (max-width: 320px) { /* viewports <= 320px에 대한 스타일 */ }
@media (min-width: 321px) { /* viewports >= 321px에 대한 스타일 */ }

@media (max-width: 320px) { /* viewports <= 320px에 대한 스타일 */ }
@media (min-width: 320.01px) { /* viewports >= 320.01px에 대한 스타일 */ }

@media (width <= 320px) { /* viewports <= 320px에 대한 스타일 */ }
@media (width > 320px) { /* viewports > 320px에 대한 스타일 */ }

“discrete” 유형 속성은 “min-” 또는 “max-” 접두사를 받지 않는다. “discrete” 유형 미디어 기능에 이러한 접두사를 추가하면 단순히 알 수 없는 기능 이름이 된다.

min/max 접두사가 붙은 미디어 기능을 불리언 문맥에서 평가하려는 시도는 유효하지 않으며 구문 오류다.

2.5. 미디어 기능 결합

여러 미디어 기능은 완전한 불리언 대수 (not, and, or)를 사용하여 미디어 조건으로 결합될 수 있다.

• 어떤 미디어 기능이든 앞에 not을 두어 부정할 수 있다. 예: not (color)는 (color)의 의미를 반전한다—​ (color)가 어떤 종류의 컬러 디스플레이든 가진 장치와 일치한다면, not (color)는 어떤 종류의 컬러 디스플레이도 없는 장치와 일치한다.

• 두 개 이상의 미디어 기능은 사이에 and를 두어 연결할 수 있으며, 이 경우 모든 미디어 기능이 참일 때만 쿼리가 참이다. 예: (width < 600px) and (height < 600px)는 화면의 두 차원 모두에서 600px보다 작은 장치에만 일치한다.

• 또는, 두 개 이상의 미디어 기능은 사이에 or를 두어 연결할 수 있으며, 이 경우 어느 하나의 미디어 기능이라도 참이면 쿼리가 참이다. 예: (update: slow) or (hover: none)는 장치가 화면 업데이트가 느리거나(예: e-reader) 또는 주요 포인팅 장치에 호버 기능이 없는 경우에 일치하며, 이는 사용자가 호버할 때까지 간결하게 숨겨두는 대신 더 많은 정보를 표시하는 레이아웃을 사용해야 함을 시사할 수 있다.

• 미디어 조건은 괄호 ()로 감싸 그룹화할 수 있으며, 이는 단일 미디어 쿼리와 동일하게 조건 안에 중첩될 수 있다. 예: (not (color)) or (hover)는 단색이며 그리고/또는 호버 기능이 있는 장치에서 참이다. 반대로 단색이면서 호버 기능이 없는 장치를 질의하려면, not ((color) or (hover)) (또는 동등하게 (not (color)) and (not (hover)))로 작성해야 한다.

and와 or와 not을 미디어 쿼리의 같은 “수준”에서 섞는 것은 유효하지 않다. 예: (color) and (pointer) or (hover)는 불법인데, 의도가 무엇인지 불명확하기 때문이다. 대신, 특정 결합 키워드를 사용하여 그룹화하려면 괄호를 사용할 수 있으며, (color) and ((pointer) or (hover)) 또는 ((color) and (pointer)) or (hover)를 얻는다. 이 둘은 의미가 매우 다르다: (hover)만 참이라면, 첫 번째는 거짓으로 평가되지만 두 번째는 참으로 평가된다.

3. 구문

미디어 쿼리 구문에 대한 비공식 설명은 앞 절의 산문과 레일로드 다이어그램에 나타난다. 공식 미디어 쿼리 구문은 이 절에서 설명되며, 규칙/속성 문법 구문은 [CSS-SYNTAX-3] 및 [CSS-VALUES-3]에서 정의된다.

<media-query-list> 생성물을 파싱하기 위해, 컴포넌트 값의 쉼표로 구분된 목록을 파싱한 다음, 반환된 목록의 각 항목을 <media-query>로 파싱한다. 그 값은 이렇게 생성된 <media-query>들의 목록이다.

참고: <media-query-list> 파싱에 대한 이 명시적 정의는, 미디어 쿼리 목록의 오류 복구 동작을 잘 정의되게 만들기 위해 필요하다.

참고: <media-query-list> 파싱에 대한 이 정의는 의도적으로 빈 목록을 허용한다.

참고: [CSS-SYNTAX-3]에 따라, 토큰은 ASCII 대소문자 구분 없음이다.

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

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

<media-feature> = [ <mf-plain> | <mf-boolean> | <mf-range> ]
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> <mf-comparison> <mf-value>
           | <mf-value> <mf-comparison> <mf-name>
           | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value>
           | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
<mf-lt> = '<' '='?
<mf-gt> = '>' '='?
<mf-eq> = '='
<mf-comparison> = <mf-lt> | <mf-gt> | <mf-eq>

<general-enclosed> = [ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]

<media-type> 생성물은 키워드 only, not, and, or, 그리고 layer를 포함하지 않는다.

참고: layer를 제외하는 이유는, 그렇지 않으면 @import url(…) layer; 구문에서 캐스케이드 레이어를 위해 사용될 때 모호해질 수 있기 때문이다. [CSS-CASCADE-5]를 참조하라.

“<” 또는 “>” <delim-token>과 뒤따르는 “=” <delim-token>(존재하는 경우) 사이에는 공백이 허용되지 않는다.

참고: not, and 또는 or 키워드와 그 뒤의 ( 문자 사이에는 공백이 필요하다. 공백이 없으면 <function-token>으로 파싱되기 때문이다. 이는 위 문법에서 이미 다뤄지고 있으므로 명시적으로 무효 처리하지는 않는다. 다만 )와 그 뒤의 키워드 사이에는 공백이 있어도 괜찮다.

<media-in-parens> 생성물을 파싱할 때, <general-enclosed> 분기는 입력이 앞의 두 분기 중 어느 쪽과도 일치하지 않을 때만 선택되어야 한다. <general-enclosed>는 문법을 합리적으로 호환되는 방식으로 확장할 수 있도록 하기 위해 존재한다.

3.1. 미디어 쿼리 평가

<media-condition> 또는 <media-condition-without-or>의 각 주요 하위 표현식은 다음과 같이 불리언 결과와 연관된다:

<media-condition>

<media-condition-without-or>

결과는 자식 하위 표현식의 결과이다.

<media-in-parens>

결과는 자식 항(term)의 결과이다.

<media-not>

결과는 <media-in-parens> 항의 부정이다. unknown의 부정은 unknown이다.

<media-in-parens> <media-and>*

결과는 <media-in-parens> 자식 항과, <media-and> 자식 항들의 모든 <media-in-parens> 자식들이 참이면 참이고, 이들 중 적어도 하나의 <media-in-parens> 항이 거짓이면 거짓이며, 그 외에는 unknown이다.

<media-in-parens> <media-or>*

결과는 <media-in-parens> 자식 항과, <media-or> 자식 항들의 모든 <media-in-parens> 자식들이 거짓이면 거짓이고, 이들 중 적어도 하나의 <media-in-parens> 항이 참이면 참이며, 그 외에는 unknown이다.

<general-enclosed>

결과는 unknown이다.

작성자는 스타일시트에서 <general-enclosed>를 사용해서는 안 된다. 이는 오직 향후 호환성을 위해 존재하며, 새로운 구문 추가가 오래된 사용자 에이전트에서 <media-condition>의 너무 많은 부분을 무효화하지 않도록 하기 위함이다.

<media-feature>

결과는 지정된 미디어 기능을 평가한 결과이다.

위 생성물들 중 어느 하나의 결과가 2값 불리언을 기대하는 어떤 문맥에서 사용되는 경우, “unknown”은 “false”로 변환되어야 한다.

참고: 이는 예를 들어, 미디어 쿼리가 @media 규칙에서 사용될 때, “unknown”으로 해석되면 “false”로 취급되어 일치에 실패함을 의미한다.

3.2. 오류 처리

앞 절의 문법과 일치하지 않는 미디어 쿼리는 파싱 중 not all로 대체되어야 한다.

참고: 문법 불일치는 전체 미디어 쿼리 목록을 지우는 것이 아니다. 문제가 있는 미디어 쿼리만 해당한다. 위에서 정의한 파싱 동작은 다음 최상위 쉼표에서 자동으로 복구한다.

@media (example, all,), speech { /* only applicable to speech devices */ }
@media &test, speech           { /* only applicable to speech devices */ }

@media (example, speech { /* rules for speech devices */ }

알 수 없는 <media-type>은 일치하지 않는 것으로 취급되어야 한다.

알 수 없는 <mf-name> 또는 <mf-value>, 또는 해당 미디어 기능의 값 구문과 일치하지 않는 기능 값은 “unknown” 값을 만든다. 값이 “unknown”인 <media-query>는 not all로 대체되어야 한다.

<link media="screen and (max-weight: 3kg) and (color), (color)"rel="stylesheet" href="example.css" />

@media (min-orientation: portrait) { … }

@media test;,all { body { background: lime } }

4. 뷰포트/페이지 크기 미디어 기능

4.1. 너비: width 기능

width 미디어 기능은 출력 장치의 대상 표시 영역의 너비를 설명한다. 연속 미디어의 경우, 이는 뷰포트의 너비이며 (CSS2 9.1.1절 [CSS2]에 설명됨), 렌더링된 스크롤바(있는 경우)의 크기를 포함한다. 페이지드 미디어의 경우, 이는 페이지 박스의 너비이다 (CSS2 13.2절 [CSS2]에 설명됨).

<length>는 § 1.3 단위에 따라 해석된다.

width는 음수 범위에서 거짓이다.

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

@media (400px <= width <= 700px) { … }

@media (min-width: 20em) { … }

4.2. 높이: height 기능

height 미디어 기능은 출력 장치의 대상 표시 영역의 높이를 설명한다. 연속 미디어의 경우, 이는 뷰포트 높이이며 렌더링된 스크롤바(있는 경우)의 크기를 포함한다. 페이지드 미디어의 경우, 이는 페이지 박스의 높이이다.

<length>는 § 1.3 단위에 따라 해석된다.

height는 음수 범위에서 거짓이다.

4.3. 종횡비: aspect-ratio 기능

aspect-ratio 미디어 기능은 width 미디어 기능 값과 height 미디어 기능 값의 비율로 정의된다.

4.4. 방향: orientation 기능

portrait

orientation 미디어 기능은, height 미디어 기능 값이 width 미디어 기능 값보다 크거나 같을 때 portrait이다.

landscape

그 밖의 경우 orientation은 landscape이다.

@media (orientation: portrait) { … }

5. 표시 품질 미디어 기능

5.1. 표시 해상도: resolution 기능

resolution 미디어 기능은 출력 장치의 해상도, 즉 픽셀의 밀도를 설명하며, 페이지 줌을 고려하지만 스케일 계수는 1.0이라고 가정한다.

resolution 미디어 기능은 음수 범위에서 거짓이다

정사각형이 아닌 픽셀을 가진 미디어를 질의할 때, resolution은 수직 차원의 밀도를 질의한다.

프린터의 경우, 이는 스크리닝 해상도(임의의 색상 점을 인쇄하기 위한 해상도)에 해당한다. 프린터는 회색조 인쇄에 대해 다른 해상도를 가질 수도 있다.

해상도에 물리적 제약이 없는 출력 매체(예: 벡터 그래픽으로 출력)의 경우, 이 기능은 infinite 값과 일치해야 한다. 이 미디어 기능을 범위 문맥에서 평가할 때, infinite는 가능한 어떤 <resolution>보다도 큰 것으로 취급되어야 한다. (즉, (resolution > 1000dpi) 같은 질의는 infinite 미디어에 대해 참이 된다.)

@media (resolution >= 2dppx)

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

@media print and (min-resolution: 118dpcm) { … }

5.2. 표시 유형: scan 기능

scan 미디어 기능은 일부 출력 장치의 스캐닝 과정을 설명한다.

interlace

CRT 및 일부 플라즈마 TV 화면 유형은 “인터레이스” 렌더링을 사용했는데, 비디오 프레임이 화면의 “짝수” 줄만 지정하는 것과 “홀수” 줄만 지정하는 것을 번갈아 수행하며, 다양한 자동적인 심상 보정 능력을 활용해 부드러운 움직임을 만들어냈다. 이는 대역폭 비용을 절반으로 하면서 더 높은 FPS 방송을 시뮬레이션할 수 있게 했다.

인터레이스 화면에서 표시할 때는, 작성자는 “콤빙(combing)”을 피하기 위해 화면을 가로지르는 매우 빠른 움직임을 피해야 하며, “트위터(twitter)”를 피하기 위해 화면의 세부 요소가 1px보다 넓도록 해야 한다.

progressive

“프로그레시브” 렌더링을 사용하는 화면은 각 화면을 완전히 표시하며, 특별한 처리가 필요 없다.

대부분의 현대 화면과 모든 컴퓨터 화면은 프로그레시브 렌더링을 사용한다.

@media (scan: interlace) { body { font-family: sans-serif; } }

참고: 작성 시점 기준, 알려진 모든 구현은 scan: interlace가 아니라 scan: progressive와 일치한다.

5.3. 콘솔 디스플레이 감지: grid 기능

<mq-boolean> = <integer [0,1]>

grid 미디어 기능은 출력 장치가 그리드인지 비트맵인지 질의하는 데 사용된다. 출력 장치가 그리드 기반(예: “tty” 터미널, 또는 고정 글꼴 하나만 가진 전화기 디스플레이)이라면 값은 1이 된다. 그렇지 않으면 값은 0이 된다.

<mq-boolean> 값 유형은 값이 0 또는 1인 <integer>이다. 그 밖의 어떤 정수 값도 유효하지 않다. CSS에서 -0은 항상 0과 동등하므로, 유효한 <mq-boolean> 값으로도 받아들여진다는 점에 유의하라.

참고: <mq-boolean> 유형은 오직 레거시 목적을 위해 존재한다. 이 기능이 오늘날 설계된다면, 값에 대해 적절한 이름의 키워드를 대신 사용했을 것이다.

@media (grid) and (max-width: 15em) { … }

참고: 작성 시점 기준, 알려진 모든 구현은 grid: 1이 아니라 grid: 0과 일치한다.

5.4. 표시 업데이트 빈도: update 기능

update 미디어 기능은 콘텐츠가 렌더링된 이후에 출력 장치가 콘텐츠의 모양을 수정할 수 있는 능력을 질의하는 데 사용된다. 이는 다음 값을 받는다:

none

렌더링된 후에는 레이아웃을 더 이상 업데이트할 수 없다. 예: 종이에 인쇄된 문서.

slow

레이아웃은 CSS의 일반 규칙에 따라 동적으로 변할 수 있지만, 출력 장치는 변화가 부드러운 애니메이션으로 인지될 만큼 충분히 빠르게 렌더링하거나 표시할 수 없다. 예: E-ink 화면 또는 심각하게 저성능인 장치.

fast

레이아웃은 CSS의 일반 규칙에 따라 동적으로 변할 수 있으며, 출력 장치는 속도 면에서 특별히 제약되지 않으므로, CSS 애니메이션 같은 정기적으로 업데이트되는 것들을 사용할 수 있다. 예: 컴퓨터 화면.

@media (update) {
  a { text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
}
/* 업데이트되지 않는 UA에서는 링크가 기본 밑줄을 항상 가진다. */

5.5. 블록 축 오버플로: overflow-block 기능

overflow-block 미디어 기능은 콘텐츠가 블록 축에서 초기 포함 블록을 넘칠 때의 장치 동작을 설명한다.

none

block axis에서 오버플로를 처리할 수 있는 수단이 없으며; 넘치는 콘텐츠는 단순히 표시되지 않는다. 예: 빌보드

scroll

block axis에서 넘치는 콘텐츠는 사용자가 스크롤하여 볼 수 있도록 함으로써 노출된다. 예: 컴퓨터 화면

paged

콘텐츠는 개별 페이지로 나뉘며; block axis에서 한 페이지를 넘치는 콘텐츠는 다음 페이지에 표시된다. 예: 프린터, 전자책 리더

none 또는 scroll과 일치하는 미디어는 연속 미디어라고 하며, paged와 일치하는 미디어는 페이지드 미디어라고 한다.

참고: 이 미디어 기능에 대한 추가 값은 향후 연속 및 페이지드 미디어의 측면을 결합한 하이브리드 동작을 갖는 사용자 에이전트의 범주를 설명하기 위해 추가될 수 있다. 예를 들어, (현재는 중단된) Presto 레이아웃 엔진은 강제 페이지 나누기를 존중한다는 점을 제외하면 continuous와 유사한 반(半) 페이지드 프레젠테이션 모드 동작을 제공했다. 이 수준에서 이러한 유형의 동작을 가진 현재 배포 중인 사용자 에이전트를 알지 못하므로, 워킹 그룹은 그러한 사용자 에이전트를 잘못 특징짓는 것을 피하기 위해 이 수준에서는 그러한 값을 추가하지 않기로 결정했다. 위에 지정된 값들 중 어느 것으로도 적절히 설명되지 않는 사용자 에이전트를 구현하는 사람은 누구나, 이 미디어 기능에 대한 확장을 고려할 수 있도록 워킹 그룹에 연락할 것이 권장된다.

5.6. 인라인 축 오버플로: overflow-inline 기능

overflow-inline 미디어 기능은 콘텐츠가 inline axis에서 초기 포함 블록을 넘칠 때의 장치 동작을 설명한다.

none

inline axis에서 오버플로를 처리할 수 있는 수단이 없으며; 넘치는 콘텐츠는 단순히 표시되지 않는다.

scroll

inline axis에서 넘치는 콘텐츠는 사용자가 스크롤하여 볼 수 있도록 함으로써 노출된다.

참고: inline-overflowing 콘텐츠의 페이지드(paged) 오버플로에 대한 알려진 구현은 없으며, 그 개념 자체도 크게 타당해 보이지 않으므로, overflow-inline에 대해서는 의도적으로 paged 값이 없다.

6. 색상 미디어 기능

6.1. 색상 깊이: color 기능

color 미디어 기능은 출력 장치의 각 색상 구성 요소당 비트 수를 설명한다. 장치가 컬러 장치가 아니라면 값은 0이다.

color는 음수 범위에서 거짓이다.

@media (color) { … }
@media (min-color: 1) { … }

@media (color >= 8) { … }

서로 다른 색상 구성 요소가 서로 다른 비트 수로 표현되는 경우, 가장 작은 수가 사용된다.

인덱스(팔레트) 색상을 가진 장치에서는, 룩업 테이블에서 각 색상 구성 요소당 최소 비트 수가 사용된다.

참고: 설명된 기능은 색상 능력을 피상적인 수준에서만 설명할 수 있다. 일반적으로 color-gamut이 작성자의 요구에 더 관련성이 크다. 추가 기능이 필요하다면, RFC2879 [RFC2879]는 이후 단계에서 지원될 수 있는 보다 구체적인 미디어 기능을 제공한다.

6.2. 팔레트 컬러 화면: color-index 기능

color-index 미디어 기능은 출력 장치의 색상 룩업 테이블의 엔트리 수를 설명한다. 장치가 색상 룩업 테이블을 사용하지 않는 경우, 값은 0이다.

color-index는 음수 범위에서 거짓이다.

@media (color-index) { … }
@media (color-index >= 1) { … }

<?xml-stylesheet media="(min-color-index: 256)"
  href="http://www.example.com/…" ?>

6.3. 단색 화면: monochrome 기능

monochrome 미디어 기능은 단색 프레임 버퍼에서 픽셀당 비트 수를 설명한다. 장치가 단색 장치가 아니라면, 출력 장치 값은 0이 된다.

monochrome는 음수 범위에서 거짓이다.

@media (monochrome) { … }

@media (monochrome >= 2) { … }

<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

6.4. 컬러 디스플레이 품질: color-gamut 기능

color-gamut 미디어 기능은 UA 및 출력 장치가 지원하는 색상의 대략적인 범위를 설명한다. 즉, UA가 지정된 색 공간의 색을 포함한 콘텐츠를 수신하면 출력 장치가 해당하는 색을 렌더링하도록 하거나, 또는 그에 충분히 가깝게 렌더링하도록 만들 수 있다.

참고: 이 쿼리는 몇 가지 이유로 대략적인 범위를 사용한다. 첫째, 디스플레이 하드웨어에는 매우 많은 차이가 있다. 예를 들어, 어떤 장치는 "Rec. 2020"을 지원한다고 주장할 수 있지만, 실제로는 전체 색역보다 훨씬 낮은 범위만 렌더링한다. 둘째, 서로 다른 장치가 지원하는 색 범위의 종류가 매우 많으며, 이를 모두 열거하는 것은 번거롭다. 대부분의 경우 작성자는 디스플레이의 정확한 성능을 알 필요가 없고, sRGB보다 더 나은지, 또는 sRGB보다 현저히 더 나은지만 알면 된다. 그렇게 하면 적절한 이미지를, 색 프로필로 태그하여, 사용자에게 제공할 수 있다.

srgb

UA 및 출력 장치는 대략 sRGB 색역 또는 그 이상을 지원할 수 있다.

참고: 대다수의 컬러 디스플레이는 이 유형의 쿼리에 대해 true를 반환할 수 있을 것으로 예상된다.

p3

UA 및 출력 장치는 Display P3 [Display-P3] 색 공간으로 지정된 색역 또는 그 이상을 대략 지원할 수 있다.

참고: p3 색역은 srgb 색역보다 더 크며 이를 포함한다.

rec2020

UA 및 출력 장치는 ITU-R 권고 BT.2020 색 공간으로 지정된 색역 또는 그 이상을 대략 지원할 수 있다.

참고: rec2020 색역은 p3 색역보다 더 크며 이를 포함한다.

다음 표는 [COLORIMETRY]에 정의된 바와 같이, 이들 색 공간의 기본색을 해당 색 공간의 색도 좌표로 나타낸 것이다.

참고: 위 표는 색 공간을 완전히 설명하기에 충분한 정보를 포함하지는 않지만, 출력 장치가 각 색역을 대략적으로 커버하는지 여부를 판단하기에는 충분하다. sRGB에 대한 추가 정보는 [SRGB]를, Display P3에 대한 추가 정보는 [Display-P3]를, ITU-R 권고 BT.2020에 대한 추가 정보는 [ITU-R-BT-2020-2]를 참조하라.

@media (color-gamut: p3) { … }

참고: 출력 장치의 전체 출력 색역이 충분히 크거나, 한 색역이 다른 지원되는 색역의 부분집합인 경우, 이 미디어 기능의 여러 값에 대해 true를 반환할 수 있다. 그 결과, 이 기능은 “오름차순” 방식으로 사용하는 것이 가장 좋다—​(color-gamut: srgb)가 true일 때 기본 값을 설정한 다음, (color-gamut: p3)가 true이면 이를 덮어쓰는 식으로, 등등.

참고: 일부 출력 장치(예: 단색 디스플레이)는 srgb 색역조차 지원하지 못할 수 있다. 이러한 장치를 테스트하려면, 부정된 불리언 컨텍스트 방식으로 이 기능을 사용할 수 있다: not (color-gamut).

7. 상호작용 미디어 기능

“상호작용” 미디어 기능은 사용자가 페이지와 상호작용하는 방식의 다양한 측면을 반영한다.

pointer 및 hover 기능은 “주(Primary)” 포인팅 장치의 특성과 관련이 있으며, any-pointer 및 any-hover는 잠재적으로 사용 가능한 모든 포인팅 장치의 속성을 쿼리하는 데 사용할 수 있다.

참고: 이 명세는 사용자 에이전트가 “주(Primary)” 포인팅 장치를 어떻게 결정해야 하는지 정의하지 않지만, 기대되는 바는 사용자 에이전트가 다음을 결합하여 이 결정을 내리는 것이다: 실행 중인 장치/환경에 대한 지식, 사용 가능한 포인팅 장치의 수와 유형, 그리고 이들 중 어느 것이 일반적으로 및/또는 현재 사용 중인지에 대한 개념. 어떤 장치에서 주 입력 메커니즘이 포인팅 장치가 아니지만, 더 드물게 사용되는 보조 입력이 포인팅 장치인 상황에서는, 사용자 에이전트가 비-포인팅 장치를 주 장치로 취급하기로 결정할 수 있다(그 결과 pointer: none). 사용자 에이전트는 또한 사용자 환경의 변화나 사용자가 UA와 상호작용하는 방식의 변화에 반응하여, 어떤 유형의 포인팅 장치를 주 장치로 간주할지를 동적으로 변경하기로 결정할 수도 있다.

참고: pointer, hover, any-pointer 및 any-hover 기능은 포인팅 장치의 특성, 또는 포인팅 장치의 완전한 부재에만 관련되며, 키보드 같은 비-포인팅 장치 입력 메커니즘의 존재를 감지하는 데 사용할 수 없다. 작성자는 이러한 기능을 쿼리할 때 어떤 값이 매치되는지와 무관하게, 비-포인팅 장치 입력이 존재할 수 있음을 고려해야 한다.

7.1. 포인팅 장치 품질: pointer 기능

pointer 미디어 기능은 마우스와 같은 포인팅 장치의 존재 및 정확도를 쿼리하는 데 사용된다. 여러 포인팅 장치가 존재하는 경우, pointer 미디어 기능은 사용자 에이전트가 결정한 “주(Primary)” 포인팅 장치의 특성을 반영해야 한다. (사용 가능한 어떤 포인팅 장치의 성능을 쿼리하려면, any-pointer 미디어 기능을 참조하라.)

none

장치의 주 입력 메커니즘에 포인팅 장치가 포함되지 않는다.

coarse

장치의 주 입력 메커니즘에 제한된 정확도의 포인팅 장치가 포함된다. 예로는 터치스크린과 모션 감지 센서(예: Xbox용 Kinect 주변기기)가 있다.

fine

장치의 주 입력 메커니즘에 정확한 포인팅 장치가 포함된다. 예로는 마우스, 터치패드, 드로잉 스타일러스가 있다.

coarse와 fine은 모두 포인팅 장치의 존재를 나타내지만, 정확도에서 차이가 있다. 줌 배율 1에서 서로 인접한 여러 작은 타깃 중 하나를 신뢰성 있게 선택하기가 어렵거나 불가능한 포인팅 장치는 coarse로 분류될 것이다. 줌 레벨 변경은 이 미디어 기능의 값에 영향을 주지 않는다.

참고: UA가 사용자에게 줌 기능을 제공할 수 있고, 또는 보조 포인팅 장치의 정확도가 다를 수 있으므로, 사용자는 이 미디어 기능의 값이 coarse이더라도 정확한 클릭을 수행할 수 있을지도 모른다. 이 미디어 기능은 사용자가 결코 정확하게 클릭할 수 없다는 것을 나타내지 않으며, 단지 그렇게 하는 것이 불편하다는 것만을 나타낸다. 작성자는 coarse 값에 반응하여 정확한 클릭에 의존하지 않고도 조작될 수 있도록 페이지를 설계해야 할 것으로 기대된다.

접근성 이유로, 포인팅 장치를 fine으로 설명할 수 있는 장치에서조차, UA는 이 미디어 쿼리에 대해 coarse 또는 none 값을 줄 수 있는데, 이는 사용자가 포인팅 장치를 정확하게, 또는 아예 조작하기 어렵다는 것을 나타내기 위함이다. 또한 주 포인팅 장치가 fine 정확도를 가지고 있더라도, 사용자에게는 추가적인 coarse 포인팅 장치가 제공될 수 있다. 작성자는 이러한 다른 coarse 잠재적 포인팅 장치를 고려하기 위해 any-pointer 미디어 기능을 쿼리하고 싶을 수 있다.

/* 부정확한 주 포인팅 장치가 있을 경우 라디오 버튼과 체크박스를 더 크게 만든다 */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width: 30px;
    min-height: 40px;
    background: transparent;
  }
}

7.2. 호버 기능: hover 기능

hover 미디어 기능은 사용자가 주 포인팅 장치로 페이지의 요소 위를 호버할 수 있는 능력을 쿼리하는 데 사용된다. 장치에 여러 포인팅 장치가 있는 경우, hover 미디어 기능은 사용자 에이전트가 결정한 “주(Primary)” 포인팅 장치의 특성을 반영해야 한다. (사용 가능한 어떤 포인팅 장치의 성능을 쿼리하려면, any-hover 미디어 기능을 참조하라.)

none

주 포인팅 장치가 호버할 수 없거나, 또는 포인팅 장치가 없음을 나타낸다. 예로는 터치스크린과 기본 드로잉 스타일러스를 사용하는 화면이 있다.

호버할 수는 있지만, 호버하는 것이 불편하고 일반적인 사용 방식의 일부가 아닌 포인팅 장치도 이 값에 매치된다. 예를 들어, 길게 누르기를 호버로 취급하는 터치스크린은 hover: none에 매치될 것이다.

hover

주 포인팅 장치가 페이지의 일부 위를 쉽게 호버할 수 있음을 나타낸다. 예로는 마우스 및 Nintendo Wii 컨트롤러처럼 화면을 물리적으로 가리키는 장치가 있다.

접근성 이유로, 호버를 지원하는 장치에서도 UA는 이 미디어 쿼리에 대해 hover: none 값을 줄 수 있는데, 호버 없이도 잘 동작하는 레이아웃을 선택하도록 하기 위함이다. 주 입력 메커니즘이 hover: hover 기능을 가지고 있더라도, 사용자에게는 호버 기능을 제공하지 않는 추가 입력 메커니즘이 있을 수 있음을 유의하라.

/* 편리하게 호버할 수 있는 장치에서만 호버로 활성화되는 드롭다운 메뉴를 사용한다. */
@media (hover) {
  .menu > li        {display:inline-block;}
  .menu ul          {display:none; position:absolute;}
  .menu li:hover ul {display:block; list-style:none; padding:0;}
  /* ... */
}

7.3. 사용 가능한 모든 상호작용 능력: any-pointer 및 any-hover 기능

any-pointer 및 any-hover 미디어 기능은 pointer 및 hover 미디어 기능과 동일하지만, 사용자에게 사용 가능한 모든 포인팅 장치의 능력의 합집합에 대응한다. any-pointer의 경우, 서로 다른 포인팅 장치가 서로 다른 특성을 가지면 하나 이상의 값이 매치될 수 있다.

any-pointer 및 any-hover는 none이 대응 쿼리에 대해 none에 매치되는 포인팅 장치뿐이거나, 또는 포인팅 장치가 전혀 없을 때에만 매치되어야 한다.

부록 A: 폐기된 미디어 기능

다음 미디어 기능은 폐기됨이다. 이들은 하위 호환성을 위해 유지되지만, 새로 작성되는 스타일 시트에는 적절하지 않다. 작성자는 이를 사용해서는 안 된다. 사용자 에이전트는 명시된 대로 이를 지원해야 한다 .

뷰포트의 크기(또는 페이지 미디어에서의 페이지 박스)를 쿼리하려면, width, height 및 aspect-ratio 미디어 기능을 사용해야 하며, 문서가 레이아웃되는 데 사용 가능한 공간의 양과 무관하게 장치의 물리적 크기를 참조하는 device-width, device-height 및 device-aspect-ratio를 쓰는 대신 그래야 한다. 또한 device-* 미디어 기능은 때때로 모바일 장치를 탐지하기 위한 프록시로도 사용된다. 대신, 작성자는 스타일링 대상으로 삼으려는 장치의 측면을 더 잘 표현하는 미디어 기능을 사용해야 한다.

device-width

device-width 미디어 기능은 출력 장치의 렌더링 표면의 너비를 설명한다. 연속 미디어의 경우, 이는 웹에 노출된 화면 영역의 너비이다. 페이지드 미디어의 경우, 이는 페이지 용지 크기의 너비이다.

device-width는 음수 범위에서 false이다.

@media (device-width < 800px) { … }

참고: 장치가 세로(포트레이트) 및 가로(랜드스케이프)처럼 여러 방향으로 사용될 수 있는 경우, device-* 미디어 기능은 현재 방향을 반영한다.

device-height

device-height 미디어 기능은 출력 장치의 렌더링 표면의 높이를 설명한다. 연속 미디어의 경우, 이는 웹에 노출된 화면 영역의 높이이다. 페이지드 미디어의 경우, 이는 페이지 용지 크기의 높이이다.

device-height는 음수 범위에서 false이다.

<link rel="stylesheet" media="(device-height > 600px)" />

device-aspect-ratio

device-aspect-ratio 미디어 기능은 device-width 미디어 기능 값과 device-height 미디어 기능 값의 비율로 정의된다.

@media (device-aspect-ratio: 16/9) { … }
@media (device-aspect-ratio: 32/18) { … }
@media (device-aspect-ratio: 1280/720) { … }
@media (device-aspect-ratio: 2560/1440) { … }

변경 사항

2021년 12월 25일 후보 권고 초안 이후의 변경 사항

• [Display-P3]에 대한 규범적 참조를 확립

• layer를 미디어 타입으로 사용하는 것을, 단지 알 수 없는 타입으로 취급하는 것이 아니라, 캐스케이드 레이어와의 호환성을 위해 금지함.

2020년 7월 21일 후보 권고 이후의 변경 사항

• <general-enclosed>에서 빈 함수 허용 (참조: 이슈 6803).

• 문법 정의 방식에 대한 편집상 조정 (참조: 이슈 6806).

2017년 9월 5일 후보 권고 이후의 변경 사항

• speech 미디어 타입을 폐기함. 미디어 타입은 상호 배타적이므로, 화면 판독기에 관한 것일 수 없는데, 화면 판독기는 이름이 시사하듯 화면 렌디션에 기반해 동작하며 따라서 screen 미디어 타입에 매치되기 때문이다. 순수 오디오 UA에 관한 것일 수도 있으나, 그러한 구현은 알려진 바가 없다.
• 토큰 파싱이 ASCII 대소문자 비구분임을 상기시키기 위해 문법 명세를 참조하는 참고를 추가
• 비교 없이 (width 500px) 같은 형태를 우연히 허용하던 문법 버그 수정
• <ratio>의 정의를 [CSS-VALUES-4]에 위임함. 이는 미디어쿼리뿐 아니라 더 많은 곳에서 사용되기 때문이다.

  참고: [CSS-VALUES-4]는 <ratio> = <integer> / <integer> 에서 <ratio> = <number [0,∞]> [ / <number [0,∞]> ]? 로 정의를 확장했다.

• 다양한 편집상 조정, 문구 개선 및 명확화.
• 연속 미디어 및 페이지드 미디어 용어 정의 추가.
• 현재 UA가 그 동작을 보이지 않는다는 이유로 overflow-block의 optional-paged 값을 제거함.
• update를 risk로 표시.

2017년 5월 19일 작업 초안 이후의 변경 사항

• 범위 미디어 기능을 음수 값을 파싱 실패로 처리하는 대신 음수 범위에서 false가 되도록 변경.
• color-gamut에 필요한 색 공간 정보를 명세에 직접 포함하도록 함.
• hover, pointer, any-hover, 및 any-pointer를 더 이상 risk가 아닌 것으로 표시.

Media Queries Level 3 이후의 변경 사항

다음 변경 사항은 2012년 6월 19일 Media Queries Level 3 권고 이후 이 명세에 적용되었다:

• 대규모 편집 재작성 및 문서 재구성.
• 불리언 컨텍스트 미디어 기능은 keyword none에 대해 true가 될 수 있는 경우에도 추가로 false가 된다.
• 수치 값을 가진 미디어 기능은 이제 범위 컨텍스트에서 작성할 수 있다.
• pointer, any-pointer, hover, any-hover, update, color-gamut, overflow-block, 및 overflow-inline 미디어 기능이 추가되었다.
• or, and, only 및 not은 미디어 타입으로 인식되는 것이(심지어 유효하지 않은 타입으로도) 금지되었다. (대신 문법 오류를 유발한다.)
• screen, print, speech, 및 all을 제외한 모든 미디어 타입은 폐기되었다.
• device-width, device-height, device-aspect-ratio를 폐기하고, 프라이버시 및 보안 이유로 화면이 아닌 웹에 노출된 화면 영역을 참조하도록 변경함.
• 미디어쿼리는 일부 경우 스타일 시트의 평가에 의존할 수 있다

감사의 말

이 명세는 W3C 캐스케이딩 스타일 시트 작업 그룹의 산물이다.

다음의 의견 제공자: Amelia Bellamy-Royds, Andreas Lind, Andres Galante, Arve Bersvendsen, Björn Höhrmann, Chris Lilley, Chris Rebert, Christian Biesinger, Christoph Päper, Dean Jackson, Elika J. Etemad (fantasai), Emilio Cobos Álvarez, François Remy, Frédéric Wang, Greg Whitworth, Ian Pouncey, James Craig, Jinfeng Ma, Kivi Shapiro, L. David Baron, Masataka Yakura, Melinda Grant, Michael[tm] Smith, Nicholas C. Zakas Patrick H. Lauke, Philipp Hoschka, Rick Byers, Rijk van Geijtenbeek, Roger Gimson, Sam Sneddon, Sigurd Lerstad, Simon Kissane, Simon Pieters, Steven Pemberton, Susan Lesch, Tantek Çelik, Thomas Wisniewski, Vi Nguyen, Xidorn Quan, Yves Lafon, 그리고 張俊芝 는 이 명세를 개선했다.

보안 고려 사항

이 명세에 대해 새로운 보안 고려 사항은 보고되지 않았다.

프라이버시 고려 사항

Media Queries는 CSS가 페이지 환경의 다양한 측면을 쿼리할 수 있게 해주며, 여기에는 스크립팅으로는 찾기 어렵거나 불가능한 것들도 포함된다. 이는 잠재적으로 프라이버시 위험이 될 수 있으며, 사용자의 지문(fingerprint) 식별을 강화할 수 있지만, 일반적으로 그 위험은 낮다. 최소한 동일한 정보는 사용자 에이전트 문자열을 검사하는 스크립팅을 통해 추론 가능해야 한다. 그러나 UA 문자열 스푸핑은 Media Queries에 영향을 주지 않으므로, 이는 다소 더 견고한 탐지 기법이 된다.

그렇다 하더라도, Media Queries가 제공하는 정보는 상대적으로 거칠며, 이 측면에서 엔트로피에 크게 기여하지 않는다.

몇몇 레거시 미디어 기능(device-width, device-height, 및 device-aspect-ratio)은 UA가 실행되는 환경에 대한 정보를 명확한 이점 없이 노출한다. 이들은 호환성 이유로 유지되지만, 프라이버시 및 보안을 위해 UA는 부정확한 정보를 보고하도록 허용되었다.

TAG는 편집자 및 작업 그룹이 그들의 명세로 인해 도입되는 위험을 평가하는 데 도움이 되도록 자체 검토 설문지를 개발했다. 답변은 아래에 제공된다.

이 명세는 개인 식별 정보를 다루는가?

아니오.

이 명세는 고가치 데이터를 다루는가?

아니오.

이 명세는 브라우저 세션 전반에 걸쳐 지속되는, 오리진의 새로운 상태를 도입하는가?

아니오.

이 명세는 지속적이며 교차 오리진 상태를 웹에 노출하는가?

아니오.

이 명세는 어떤 오리진이 현재 접근할 수 없는 다른 데이터를 그 오리진에 노출하는가?

아니오.

이 명세는 새로운 스크립트 실행/로딩 메커니즘을 가능하게 하는가?

아니오.

이 명세는 오리진이 사용자의 위치에 접근하도록 허용하는가?

아니오.

이 명세는 오리진이 사용자의 장치 센서에 접근하도록 허용하는가?

아니오.

이 명세는 오리진이 사용자의 로컬 컴퓨팅 환경의 측면에 접근하도록 허용하는가?

예, 위 설문지 앞의 설명문에 기술된 바와 같다.

이 명세는 오리진이 다른 장치에 접근하도록 허용하는가?

아니오.

이 명세는 오리진이 사용자 에이전트의 네이티브 UI에 대해 어느 정도 제어할 수 있게 하는가?

아니오.

이 명세는 웹에 임시 식별자를 노출하는가?

아니오.

이 명세는 퍼스트 파티 및 서드 파티 컨텍스트에서의 동작을 구분하는가?

아니오.

이 명세는 사용자 에이전트의 "시크릿(incognito)" 모드 컨텍스트에서 어떻게 동작해야 하는가?

동작에서 차이가 필요 없다.

이 명세는 사용자의 로컬 장치에 데이터를 지속 저장하는가?

아니오.

이 명세에는 "보안 고려 사항" 및 "프라이버시 고려 사항" 절이 있는가?

예, 당신이 현재 읽고 있는 이 절이다.

이 명세는 기본 보안 특성의 다운그레이드를 허용하는가?

아니오.