미디어 쿼리 레벨 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. 미디어 쿼리

미디어 쿼리는 문서가 표시되는 사용자 에이전트 또는 장치의 특정 측면을 검사하는 방법입니다. 미디어 쿼리는 거의 항상 문서의 내용, 스타일링 또는 내부적인 다른 측면과는 독립적입니다; 오직 “외부” 정보에만 의존하며, 다른 기능이 명시적으로 미디어 쿼리의 판정에 영향을 준다고 지정하지 않는 한 그렇습니다.

미디어 쿼리의 문법은 선택적으로 미디어 쿼리 수정자, 선택적으로 미디어 타입, 그리고 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처럼 표준 PC 모니터와 유의미하게 구분되는 장치들은 별도의 스타일링을 적용하기 좋지만, 미디어 타입이 상호 배타적으로 정의되어 있어 합리적으로 사용하기 어렵습니다. 대신, 이들의 특징은 미디어 기능(예: 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이 아닌 값, <dimension> 값 0, 또는 키워드 none이 아니라면 참으로 평가됩니다. 그렇지 않으면 거짓입니다.

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

“range” 타입의 미디어 기능은 값들에 순서가 있기 때문에, 일반 수학 비교 연산자를 사용한 범위 문맥으로도 작성할 수 있습니다:

참고: 이 문법은 Mediaqueries Level 4에서 새롭게 도입된 것으로, 현재 min-/max- 접두사만큼 널리 지원되진 않습니다.

기본 형태는 기능 이름, 비교 연산자, 값으로 구성되며, 관계가 참이면 true를 반환합니다.

기능 이름이 두 값 비교 사이에 위치한 형태는, 두 비교가 모두 참이면 true를 반환합니다.

“range” 타입의 일부 미디어 기능은 음수 범위에서 false라고 합니다. 이는 음수 값도 유효하게 파싱되어야 하며, 해당 미디어 기능이 음수 값과 같거나, 작거나, 작거나 같은지 질의할 때 반드시 false가 되어야 한다는 뜻입니다. 음수 값보다 크거나, 크거나 같은지 질의하면 관계가 참이면 true가 됩니다.

참고: 만약 음수 값을 파싱 단계에서 거부했다면, 오류 처리 규칙에 따라 unknown으로 취급되었을 것입니다. 하지만 실제로는, 장치의 resolution이 -300dpi인지는 “알 수 없음”이 아니라 “false”임을 아는 것입니다. 마찬가지로 모든 시각 장치에서 디스플레이 영역 width가 -200px보다 크다는 것은 명확히 “true”입니다. 위 규칙은 이런 직관과 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) { /* 뷰포트가 320px 이하인 경우 스타일 */ }
@media (min-width: 321px) { /* 뷰포트가 321px 이상인 경우 스타일 */ }

@media (max-width: 320px) { /* 뷰포트가 320px 이하인 경우 스타일 */ }
@media (min-width: 320.01px) { /* 뷰포트가 320.01px 이상인 경우 스타일 */ }

@media (width <= 320px) { /* 뷰포트가 320px 이하인 경우 스타일 */ }
@media (width > 320px) { /* 뷰포트가 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-리더) 또는 기본 포인팅 장치가 hover 기능이 없을 때 일치합니다. 이런 경우, 정보를 숨기지 않고 더 많이 노출하는 레이아웃을 쓰는 것이 유리할 수 있습니다.

• 미디어 조건은 괄호 ()로 묶어 그룹화할 수 있으며, 그룹화된 조건을 단일 미디어 쿼리처럼 중첩해 사용할 수 있습니다. 예를 들어 (not (color)) or (hover)는 모노크롬이면서 hover 기능이 있는 장치에 참이 됩니다. 반대로, 모노크롬이면서 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. 문법

미디어 쿼리 문법에 대한 비공식 설명은 앞 단락과 railroad 다이어그램에 나와 있습니다. 이 섹션에서는 공식적인 미디어 쿼리 문법을 설명하며, 규칙/속성의 문법은 [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 키워드가 포함되지 않습니다.

“<” 또는 “>” <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>

결과는 하위 항의 결과입니다.

<media-not>

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

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

<media-in-parens> 하위 항과 <media-in-parens> 자식 항들이 모두 참이면 결과는 true, 이 중 하나라도 거짓이면 false, 그렇지 않으면 unknown입니다.

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

<media-in-parens> 하위 항과 <media-in-parens> 자식 항들이 모두 거짓이면 결과는 false, 하나라도 참이면 true, 그렇지 않으면 unknown입니다.

<general-enclosed>

결과는 unknown입니다.

작성자는 <general-enclosed>를 스타일시트에서 사용하면 안 됩니다. 이는 미래 호환성을 위해 존재하며, 새로운 문법 추가가 이전 사용자 에이전트에서 너무 많은 <media-condition>을 무효화하지 않도록 하기 위함입니다.

<media-feature>

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

위 생산식 중 어떤 결과가 2값 불린을 기대하는 문맥에서 사용될 경우, “unknown”은 반드시 “false”로 변환되어야 합니다.

참고: 예를 들어, 미디어 쿼리가 @media 규칙에 사용될 때, “unknown”이면 “false”로 간주되어 일치하지 않습니다.

3.2. 오류 처리

이전 섹션의 문법과 일치하지 않는 미디어 쿼리는 파싱 시 not all로 대체되어야 합니다.

참고: 문법 불일치는 전체 미디어 쿼리 목록을 무효화하지 않고, 문제의 미디어 쿼리만 무효화합니다. 위에서 정의한 파싱 동작은 다음 최상위 쉼표에서 자동으로 복구됩니다.

@media (example, all,), speech { /* 오직 음성 장치에만 적용됨 */ }
@media &test, speech           { /* 오직 음성 장치에만 적용됨 */ }

@media (example, speech { /* 음성 장치 규칙 */ }

알 수 없는 <media-type>은 일치하지 않는 것으로 처리해야 합니다.

알 수 없는 <mf-name>, <mf-value> 또는 허용되지 않은 <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는 음수 범위에서 false입니다.

<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는 음수 범위에서 false입니다.

4.3. 종횡비: aspect-ratio 기능

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

4.4. 방향: orientation 기능

portrait

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

landscape

그 외의 경우 orientation은 landscape입니다.

@media (orientation:portrait) { … }

5. 디스플레이 품질 미디어 기능

5.1. 디스플레이 해상도: resolution 기능

resolution 미디어 기능은 출력 장치의 해상도(픽셀 밀도, 페이지 줌을 반영하고 핀치 줌은 1.0으로 가정함)를 설명합니다.

resolution 미디어 기능은 음수 범위에서는 false입니다.

비정사각형 픽셀을 가진 미디어 질의 시, 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 방송을 시뮬레이션할 수 있게 해줍니다.

인터레이스 화면에 표시할 때, 너무 빠른 화면 움직임은 “콤빙” 현상을 피하기 위해 피해야 하며, 화면의 세부 요소는 1px보다 넓게 만들어 “트위터 현상”을 방지해야 합니다.

progressive

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

대부분의 현대 디스플레이와 모든 컴퓨터 화면은 프로그레시브 렌더링을 사용합니다.

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

참고: 작성 시점 기준, 모든 구현은 scan: progressive에만 매칭되고 scan: interlace에는 매칭되지 않습니다.

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

grid 미디어 기능은 출력 장치가 그리드 기반인지 비트맵 기반인지 질의하는 데 사용됩니다. 출력 장치가 그리드 기반(예: “tty” 터미널, 고정 폰트만 지원하는 휴대폰 화면 등)이면 값이 1, 아니면 값이 0입니다.

<mq-boolean> 값 타입은 <integer>로, 값은 0 또는 1입니다. 그 외의 정수값은 올바르지 않습니다. 참고: -0은 CSS에서 항상 0과 같으므로, <mq-boolean> 값으로도 허용됩니다.

참고: <mq-boolean> 타입은 레거시 목적만을 위해 존재합니다. 오늘날 이 기능을 설계한다면 값에 키워드를 사용했을 것입니다.

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

참고: 작성 시점 기준, 모든 구현은 grid: 0에만 매칭되고 grid: 1에는 매칭되지 않습니다.

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 미디어 기능은 block axis에서 초기 포함 블록을 벗어나는 콘텐츠에 대해 장치가 어떻게 동작하는지 설명합니다.

none

block axis에서 오버플로우에 대한 대응이 없으며, 넘치는 콘텐츠는 단순히 표시되지 않습니다. 예시: 광고판

scroll

block axis에서 넘치는 콘텐츠를 사용자가 스크롤하여 볼 수 있습니다. 예시: 컴퓨터 화면

paged

콘텐츠가 개별 페이지로 분할되며, block axis에서 페이지를 넘는 콘텐츠는 다음 페이지에 표시됩니다. 예시: 프린터, 전자책 리더

none 또는 scroll에 해당하는 미디어는 연속 미디어라고 하며, paged에 해당하는 미디어는 페이징 미디어라고 합니다.

참고: 앞으로 이 미디어 기능에 연속/페이징 미디어 특성이 혼합된 하이브리드 동작의 사용자 에이전트를 설명할 추가 값이 생길 수 있습니다. 예를 들어, Presto 레이아웃 엔진(현재 단종)은 continuous와 유사하지만 강제 페이지 분할을 존중하는 반쪽짜리 페이징 모드가 있었습니다. 현재 이런 동작을 하는 UA는 없으므로, 본 레벨에서는 이런 값을 추가하지 않기로 했습니다. 위 값으로 충분히 설명할 수 없는 UA를 구현하는 경우, 이 미디어 기능 확장을 논의할 수 있도록 작업 그룹에 연락해 주시기 바랍니다.

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

overflow-inline 미디어 기능은 inline axis에서 초기 포함 블록을 벗어나는 콘텐츠에 대해 장치가 어떻게 동작하는지 설명합니다.

none

inline axis에서 오버플로우에 대한 대응이 없으며, 넘치는 콘텐츠는 단순히 표시되지 않습니다.

scroll

inline axis에서 넘치는 콘텐츠를 사용자가 스크롤하여 볼 수 있습니다.

참고: 인라인 오버플로우된 콘텐츠의 페이징 오버플로우 구현은 알려진 바가 없으며, 개념적으로도 별 의미가 없기 때문에 paged 값은 overflow-inline에 포함되지 않습니다.

6. 색상 미디어 기능

6.1. 색상 깊이: color 기능

color 미디어 기능은 출력 장치의 각 색상 컴포넌트 당 비트 수를 설명합니다. 장치가 색상 장치가 아니라면 값은 0입니다.

color는 음수 범위에서는 false입니다.

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

@media (color >= 8) { … }

각 색상 컴포넌트가 서로 다른 비트 수로 표현된다면, 그 중 가장 작은 수를 사용합니다.

색상 인덱스 장치의 경우, 색상 조회 테이블에서 각 색상 컴포넌트 당 최소 비트 수를 사용합니다.

참고: 이 기능은 색상 기능을 표면적으로만 설명할 수 있습니다. color-gamut이 작성자에게 더 적합한 경우가 많습니다. 더 고급 기능이 필요한 경우, RFC2879 [RFC2879]에 더 구체적인 미디어 기능이 있습니다.

6.2. 팔레트 색상 화면: color-index 기능

color-index 미디어 기능은 출력 장치의 색상 조회 테이블의 엔트리 수를 설명합니다. 장치가 색상 조회 테이블을 사용하지 않으면 값은 0입니다.

color-index는 음수 범위에서는 false입니다.

@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는 음수 범위에서는 false입니다.

@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와 출력 장치가 DCI P3 색상 공간 또는 그 이상의 범위를 지원할 수 있습니다.

참고: p3 범위는 srgb 범위보다 넓고 srgb를 포함합니다.

rec2020

UA와 출력 장치가 ITU-R Recommendation BT.2020 색상 공간 또는 그 이상의 범위를 지원할 수 있습니다.

참고: rec2020 범위는 p3 범위보다 넓고 p3를 포함합니다.

아래 표는 각 색상 공간의 주요 색상을 색상 공간 색채 좌표로 나열합니다. (정의는 [COLORIMETRY] 참조)

참고: 위 표는 색상 공간을 완전히 설명할 만큼 충분한 정보는 아니지만, 출력 장치가 해당 범위를 대략적으로 커버하는지 판단할 수 있습니다. sRGB 관련 정보는 [SRGB], DCI P3는 [SMPTE-EG-432-1-2010] 및 [SMPTE-RP-431-2-2011], 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 기능은 “주” 포인팅 장치의 특성과 관련되고, any-pointer와 any-hover는 사용 가능한 모든 포인팅 장치의 특성을 질의할 때 사용할 수 있습니다.

참고: 이 명세는 사용자 에이전트가 “주” 포인팅 장치를 어떻게 결정해야 하는지 정의하지 않지만, 사용자 에이전트는 실행되는 장치/환경에 대한 지식, 사용 가능한 포인팅 장치의 수와 종류, 그 중 일반적으로 또는 현재 사용 중인 것이 무엇인지 등을 종합해 결정해야 합니다. 장치의 주 입력 방식이 포인팅 장치가 아니지만 보조 입력(덜 자주 사용됨)이 포인팅 장치인 경우, 사용자 에이전트가 비포인팅 장치를 주 입력으로 판단할 수 있으며(pointer: none 반환), 환경 변화나 사용자의 상호작용 방식 변화에 따라 주 포인팅 장치 유형을 동적으로 변경할 수도 있습니다.

참고: pointer, hover, any-pointer, any-hover 기능은 포인팅 장치의 특성이나 존재 여부만 관련되며, 키보드 등 비포인팅 장치 입력의 존재 여부는 감지할 수 없습니다. 작성자는 해당 기능을 질의할 때 어떤 값이 일치하든, 비포인팅 입력의 가능성도 반드시 고려해야 합니다.

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

pointer 미디어 기능은 마우스 등 포인팅 장치의 존재와 정확도를 질의하는 데 사용됩니다. 여러 포인팅 장치가 있을 경우, pointer 미디어 기능은 사용자 에이전트가 결정한 "주" 포인팅 장치의 특성을 반영해야 합니다. (모든 사용 가능한 포인팅 장치의 기능을 질의하려면 any-pointer 미디어 기능을 참조하세요.)

none

장치의 주 입력 방식에 포인팅 장치가 포함되어 있지 않습니다.

coarse

장치의 주 입력 방식에 정확도가 제한적인 포인팅 장치가 포함됩니다. 예: 터치스크린, 동작 감지 센서(Xbox Kinect 등)

fine

장치의 주 입력 방식에 정확한 포인팅 장치가 포함됩니다. 예: 마우스, 터치패드, 드로잉 스타일러스

coarse와 fine 모두 포인팅 장치의 존재를 의미하지만, 정확도가 다릅니다. 여러 작은 인접한 타겟 중 하나를 신뢰성 있게 클릭하기 어렵거나 불가능한 포인팅 장치는 coarse로 간주합니다. 확대/축소 수준을 변경해도 이 미디어 기능의 값에는 영향을 주지 않습니다.

참고: UA가 사용자가 확대/축소할 수 있도록 하거나 보조 포인팅 장치가 다른 정확도를 가질 수 있으므로, 사용자는 이 미디어 기능 값이 coarse여도 정확한 클릭을 할 수 있습니다. 이 미디어 기능은 사용자가 절대로 정확하게 클릭할 수 없다는 뜻이 아니라, 정확하게 클릭하기가 불편하다는 것을 의미합니다. 작성자는 coarse일 때 정확한 클릭에 의존하지 않는 페이지를 설계해야 합니다.

접근성 측면에서, 포인팅 장치가 fine이더라도, UA가 coarse 또는 none 값을 반환해, 사용자가 포인팅 장치를 정확하게 조작하기 어렵거나 불가능함을 나타낼 수 있습니다. 또한 주 포인팅 장치가 fine일지라도, 추가적으로 coarse 포인팅 장치가 있을 수 있습니다. 작성자는 any-pointer 미디어 기능으로 이런 coarse 포인팅 장치도 고려할 수 있습니다.

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

7.2. 호버 가능성: hover 기능

hover 미디어 기능은 주 포인팅 장치로 사용자가 페이지 요소 위에 호버할 수 있는지 질의하는 데 사용됩니다. 여러 포인팅 장치가 있을 경우, hover 미디어 기능은 사용자 에이전트가 결정한 "주" 포인팅 장치의 특성을 반영해야 합니다. (모든 사용 가능한 포인팅 장치의 기능을 질의하려면 any-hover 미디어 기능을 참조하세요.)

none

주 포인팅 장치가 호버를 지원하지 않거나, 포인팅 장치가 없습니다. 예: 터치스크린, 기본 스타일러스 화면.

호버가 가능하지만 불편하거나 일반적으로 그렇게 사용하지 않는 포인팅 장치도 이 값에 일치합니다. 예를 들어, 터치스크린에서 롱 프레스를 호버로 처리하는 경우 hover: none에 일치합니다.

hover

주 포인팅 장치가 페이지의 일부에 쉽게 호버할 수 있음을 의미합니다. 예: 마우스, 닌텐도 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 미디어 기능은 출력 장치의 렌더링 표면의 너비를 설명합니다. 연속 미디어에서는 Web-exposed screen area의 너비를 의미합니다. 페이징 미디어에서는 페이지 시트 크기의 너비입니다.

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

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

참고: 디바이스가 세로/가로 등 여러 방향으로 사용될 수 있으면, device-* 미디어 기능은 현재 방향을 반영합니다.

device-height

device-height 미디어 기능은 출력 장치의 렌더링 표면의 높이를 설명합니다. 연속 미디어에서는 Web-exposed screen area의 높이, 페이징 미디어에서는 페이지 시트 크기의 높이입니다.

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) { … }

변경사항

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

• 에서 빈 함수 허용 ( 이슈 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,∞]> ]?로 확장함.

• 편집상 수정, 표현 개선, 명확화 등
• 연속 미디어와 페이징 미디어 용어 정의 추가
• optional-paged 값을 overflow-block에서 제거(현재 해당 동작을 가진 UA 없음)
• update를 위험(at-risk)으로 표시

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

• 범위 타입 미디어 기능이 음수 값 파싱 실패 대신 음수 범위에서는 false로 변경됨
• color-gamut에 필요한 색상 공간 정보 직접 명세에 포함
• hover, pointer, any-hover, any-pointer의 위험 표시 해제

Media Queries Level 3 이후 변경사항

아래는 2012년 6월 19일 Media Queries Level 3 권고안 이후의 변경사항입니다:

• 문서 대규모 편집 및 재구성
• 불린 문맥 미디어 기능은 이제 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 사용 중단 및 프라이버시·보안 상 screen 대신 Web-exposed screen area 참조하도록 변경
• 일부 경우 미디어쿼리가 스타일 시트 평가에 의존할 수 있음

감사의 글

이 명세는 W3C CSS 작업 그룹이 작성했습니다.

댓글 제공자: 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, 그리고 張俊芝 이 명세의 개선에 기여했습니다.

8. 프라이버시 및 보안 고려사항

이 명세는 새로운 보안 고려사항을 도입하지 않습니다.

미디어쿼리는 CSS가 페이지 환경의 다양한 측면을 질의할 수 있게 해주며, 스크립팅으로 찾기 어렵거나 불가능한 정보도 포함됩니다. 이는 잠재적으로 프라이버시 위험이 될 수 있으며, 사용자의 지문 채취(fingerprinting)를 강화할 수 있지만, 위험은 일반적으로 낮습니다. 최소한, 동일한 정보는 사용자 에이전트 문자열을 확인하는 스크립팅으로 추론 가능해야 합니다. 하지만 UA 문자열 위조는 미디어쿼리에는 영향을 주지 않으므로, 보다 견고한 감지 방법이 됩니다.

하지만 미디어쿼리가 제공하는 정보는 비교적 거칠고, 이 측면에서 많은 엔트로피를 제공하지 않습니다.

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

TAG는 명세서 편집자와 작업 그룹이 자신들의 명세가 도입하는 위험을 평가할 수 있도록 자체 검토 설문지를 개발했습니다. 답변은 아래에 제공합니다.

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

아니오.

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

아니오.

이 명세가 브라우징 세션을 넘어서 지속되는 신규 상태를 도입하나요?

아니오.

이 명세가 웹에 지속적이며 교차 출처 상태를 노출하나요?

아니오.

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

아니오.

이 명세가 신규 스크립트 실행/로딩 메커니즘을 도입하나요?

아니오.

이 명세가 오리진에 사용자의 위치 정보를 제공하나요?

아니오.

이 명세가 오리진에 사용자의 장치 센서에 접근을 허용하나요?

아니오.

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

네, 위 본문에서 설명한 대로입니다.

이 명세가 오리진에 다른 장치에 대한 접근을 허용하나요?

아니오.

이 명세가 오리진에 사용자 에이전트의 고유 UI에 대한 제어를 허용하나요?

아니오.

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

아니오.

이 명세가 1st-party와 3rd-party 문맥에서의 동작을 구분하나요?

아니오.

이 명세가 사용자 에이전트의 "시크릿 모드"에서 어떻게 동작해야 하나요?

동작에 차이를 둘 필요 없음.

이 명세가 사용자의 로컬 장치에 데이터를 영구 저장하나요?

아니오.

이 명세에 "보안 고려사항" 및 "프라이버시 고려사항" 섹션이 있나요?

예, 현재 보고 있는 이 섹션입니다.

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

아니오.