미디어 쿼리 레벨 5

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. 모듈 상호작용

이 모듈은 [MEDIAQUERIES-4] 및 그 전신인 [MEDIAQUERIES-3]를 확장하고 대체하며, 이들 또한 CSS 2 § 7 미디어 타입을 기반으로 구축되어 이를 대체했다.

1.2. 값

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

1.3. 단위

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

미디어 쿼리에서의 상대 길이 단위는 초기값에 기반하며, 이는 단위가 선언의 결과에 기반하는 일이 결코 없음을 의미한다.

Note: 예를 들어 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" />

Note: only 키워드는 미디어 타입 앞에서만 사용할 수 있음을 유의하라. 미디어 쿼리가 미디어 기능만으로 구성되었거나, not 같은 다른 미디어 쿼리 수정자를 가진 경우에는, 레거시 사용자 에이전트에 의해 자동으로 거짓으로 취급될 것이다.

Note: 이 명세가 발행되는 시점에, 그러한 레거시 사용자 에이전트는 극히 드물며, 따라서 only 수정자를 사용하는 것은 거의(혹은 아예) 필요하지 않다.

2.3. 미디어 타입

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

불행히도, 미디어 타입은 서로 다른 스타일링 요구를 가진 장치들을 구분하는 방식으로는 불충분한 것으로 드러났다. 원래는 상당히 뚜렷하게 구분되던 몇몇 범주(예: screen과 handheld)는 발명 이후 수년에 걸쳐 상당히 혼합되었다. 한편 tty 또는 tv 같은 것들은 완전한 기능을 갖춘 컴퓨터 모니터라는 표준과는 다른 유용한 차이를 드러내며, 따라서 서로 다른 스타일링으로 타깃팅하는 데 잠재적으로 유용하지만, 미디어 타입이 상호 배타적이라는 정의 때문에 이를 합리적인 방식으로 사용하기 어렵다. 대신, 이들의 배타적 측면은 미디어 기능으로서 더 잘 표현되며, 예로는 grid 또는 scan이 있다.

따라서, 다음 미디어 타입은 미디어 쿼리에서 사용하기 위해 정의된다:

all

모든 장치에 매치된다.

print

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

screen

print에 매치되지 않는 모든 장치에 매치된다.

또한, 다음 폐기됨 미디어 타입이 정의된다. 작성자는 이러한 미디어 타입을 사용해서는 안 된다; 대신, 작성자가 스타일링 대상으로 삼으려는 장치의 측면을 더 잘 나타내는 적절한 미디어 기능을 선택할 것이 권장된다.

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

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

Note: 모든 미디어 타입은 시간이 지나면 폐기될 것으로 예상되는데, 이는 그들의 중요한 차이를 포착하는 적절한 미디어 기능이 정의되기 때문이다.

2.4. 미디어 기능

미디어 기능은 미디어 타입보다 더 세밀한 테스트로, 사용자 에이전트 또는 디스플레이 장치의 하나의 구체적 기능을 테스트한다.

구문적으로, 미디어 기능은 CSS 속성과 유사하다: 기능 이름, 콜론, 그리고 테스트할 값으로 구성된다. 또한 콜론과 값을 생략하고 기능 이름만으로 불리언 형태로 작성할 수도 있으며, 비교 연산자를 사용한 범위 형태로도 작성할 수 있다.

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

• 속성은 문서를 어떻게 제시할지에 대한 정보를 제공하는 데 사용된다. 미디어 기능은 출력 장치의 요구사항을 설명하는 데 사용된다.
• 미디어 기능은 항상 괄호로 둘러싸이며 and 또는 or 키워드로 결합된다. 예: (color) and (min-width: 600px). 세미콜론으로 구분되지 않는다.
• 미디어 기능은 (콜론과 값을 생략하고) 오직 이름만으로 주어질 수 있으며, 이를 통해 기능을 불리언 컨텍스트에서 평가할 수 있다. 이는 0 또는 “none”을 나타내는 합리적인 값이 있는 기능에 대한 편리한 축약형이다. 예를 들어, (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” 중 하나로 정의한다.

pointer 같은 “Discrete” 미디어 기능은 한 집합에서 값을 취한다. 값은 키워드이거나 불리언 숫자(0과 1)일 수 있지만, 공통점은 그들 사이에 내재적인 “순서”가 없다는 것이다—​어떤 값도 다른 값보다 “작다”거나 “크다”지 않다.

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

두 유형의 유일하게 중요한 차이는 “range” 미디어 기능이 범위 컨텍스트에서 평가될 수 있고, 이름에 “min-” 및 “max-” 접두사를 받아들인다는 점이다. 이 둘 중 하나를 수행하면 기능의 의미가 바뀌는데—​기능이 주어진 값과 정확히 매치될 때 참이 되는 것이 아니라, 기능이 주어진 값보다 크거나/작거나/같을 때 매치된다.

2.4.2. 불리언 컨텍스트에서 미디어 기능 평가

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

이렇게 작성되면, 미디어 기능은 불리언 컨텍스트에서 평가된다. 기능이 0이라는 숫자를 제외한 어떤 값에 대해서라도 참이 될 수 있다면, 값이 0인 <dimension>, 키워드 none, 또는 해당 미디어 기능이 불리언 컨텍스트에서 거짓으로 평가된다고 명시적으로 정의한 값이 아니라면, 미디어 기능은 참으로 평가된다. 그렇지 않으면 거짓으로 평가된다.

2.4.3. 범위 컨텍스트에서 미디어 기능 평가

“range” 타입의 미디어 기능은 그 값이 순서가 있다는 사실을 활용하는 범위 컨텍스트로 대안적으로 작성될 수 있으며, 일반적인 수학 비교 연산자를 사용한다:

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

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

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

“range” 타입을 가진 일부 미디어 기능은 음수 범위에서 false라고 한다. 이는 음수 값이 유효하며 반드시 파싱되어야 하고, 미디어 기능이 그러한 음수 값과 같거나, 더 작거나, 또는 더 작거나 같은지를 쿼리하는 것은 반드시 false로 평가되어야 함을 의미한다. 미디어 기능이 음수 값보다 크거나, 또는 크거나 같은지를 쿼리하는 것은 그 관계가 참이면 true로 평가된다.

Note: 만약 음수 값이 파싱 시점에 거부되었다면 대신, 오류 처리 규칙에 따라 unknown으로 취급되었을 것이다. 그러나 실제로, 장치의 resolution이 -300dpi인지 여부는 unknown이 아니라, false임이 알려져 있다. 마찬가지로, 어떤 시각적 장치에서든, 타깃 디스플레이 영역의 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)와 동등하다.

Note: “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-4]에 정의되어 있다.

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

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

Note: <media-query-list> 파싱의 이 정의는 의도적으로 빈 목록도 받아들인다.

Note: [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를 포함하지 않는다.

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

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

Note: 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> 항(term)의 부정이다. unknown의 부정은 unknown이다.

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

결과는 <media-in-parens> 자식 항(term)과, <media-and> 자식 항(term)의 <media-in-parens> 자식들이 모두 참이면 true, 이들 <media-in-parens> 항(term) 중 적어도 하나가 거짓이면 false, 그 외에는 unknown이다.

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

결과는 <media-in-parens> 자식 항(term)과, <media-or> 자식 항(term)의 <media-in-parens> 자식들이 모두 거짓이면 false, 이들 <media-in-parens> 항(term) 중 적어도 하나가 참이면 true, 그 외에는 unknown이다.

<general-enclosed>

결과는 unknown이다.

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

<media-feature>

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

위 생성물 중 어느 하나의 결과가 두 값 불리언을 기대하는 컨텍스트에서 사용된다면, “unknown”은 “false”로 변환되어야 한다.

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

3.2. 오류 처리

이전 절의 문법에 매치되지 않는 미디어 쿼리는 파싱 중에 not all로 대체되어야 한다.

Note: 문법 불일치는 전체 미디어 쿼리 목록을 지우지 않으며, 문제 있는 미디어 쿼리만 그렇다. 위에서 정의된 파싱 동작은 다음 최상위 쉼표에서 자동으로 복구된다.

@media (example, all,), speech { /* speech 장치에만 적용 가능 */ }
@media &test, speech           { /* speech 장치에만 적용 가능 */ }

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

알 수 없는 <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는 음수 범위에서 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 미디어 기능은, height 미디어 기능의 값이 width 미디어 기능의 값보다 크거나 같을 때 portrait이다.

landscape

그 외에는 orientation이 landscape이다.

@media (orientation:portrait) { … }

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

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

none

블록 축에서 오버플로에 대한 제공(affordance)이 없다; 오버플로된 콘텐츠는 단순히 표시되지 않는다. 예: 광고판

scroll

블록 축에서 오버플로된 콘텐츠는 사용자가 스크롤하여 접근할 수 있도록 함으로써 노출된다. 예: 컴퓨터 화면

paged

콘텐츠는 분리된 페이지로 나뉜다; 블록 축에서 한 페이지를 오버플로하는 콘텐츠는 다음 페이지에 표시된다. 예: 프린터, 전자책 리더

none 또는 scroll에 매치되는 미디어는 연속 미디어라고 하며, paged에 매치되는 미디어는 페이징 미디어라고 한다

Note: 이 미디어 기능에 대한 추가 값은 연속과 페이징 미디어의 측면을 결합한 하이브리드 동작을 가진 사용자 에이전트의 분류를 설명하기 위해 미래에 추가될 수 있다. 예를 들어, Presto 레이아웃 엔진(현재는 중단됨)은 강제 페이지 나누기를 존중한다는 점을 제외하면 연속과 유사한 반(半) 페이징된 프레젠테이션 모드 동작을 제공했다. 현재 판매/배포 중인 사용자 에이전트 중 이러한 동작을 가진 것으로 알려진 것이 없기 때문에, 작업 그룹은 그러한 사용자 에이전트를 잘못 규정하는 것을 피하기 위해 이 레벨에서는 그러한 값을 추가하지 않기로 결정했다. 위에서 지정된 어떤 값으로도 충분히 설명되지 않는 사용자 에이전트를 구현하는 사람은 이 미디어 기능의 확장을 고려할 수 있도록 작업 그룹에 연락할 것이 권장된다.

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

overflow-inline 미디어 기능은, 콘텐츠가 인라인 축에서 초기 포함 블록을 오버플로할 때 장치의 동작을 설명한다.

none

인라인 축에서 오버플로에 대한 제공(affordance)이 없다; 오버플로된 콘텐츠는 단순히 표시되지 않는다.

scroll

인라인 축에서 오버플로된 콘텐츠는 사용자가 스크롤하여 접근할 수 있도록 함으로써 노출된다.

Note: 인라인 방향으로 오버플로되는 콘텐츠를 페이징 방식으로 오버플로 처리하는 구현은 알려진 바가 없으며, 그 개념 자체도 크게 의미가 없어 보이므로, overflow-inline에 대해서는 의도적으로 paged 값이 없다.

4.7. 수평 뷰포트 세그먼트: horizontal-viewport-segments 기능

horizontal-viewport-segments 미디어 기능은 뷰포트의 수평 방향 논리적 세그먼트 수를 설명한다.

horizontal-viewport-segments 미디어 기능은 음수 범위에서 false이다.

뷰포트가 하나 이상의 하드웨어 기능(예: 분리된 디스플레이 사이의 접힘 또는 힌지)에 의해 분할되고, 이러한 기능이 논리적 구분자로 작용하는 경우, 세그먼트는 페이지가 논리적으로 구분된 것으로 취급할 수 있는 뷰포트의 영역이다.

4.8. 수직 뷰포트 세그먼트: vertical-viewport-segments 기능

vertical-viewport-segments 미디어 기능은 뷰포트의 수직 방향 논리적 세그먼트 수를 설명한다.

vertical-viewport-segments 미디어 기능은 음수 범위에서 false이다.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) { … }

4.9. 디스플레이 모드: display-mode 미디어 기능

display-mode 미디어 기능은 현재 브라우징 컨텍스트가 최종 사용자에게 어떻게 제시되고 있는지의 모드를 설명한다. 자식 브라우징 컨텍스트에서는, 디스플레이 모드는 최상위 브라우징 컨텍스트의 것과 매치되어야 한다.

이 기능은 주로 사용자 에이전트가 디스플레이 모드 중 어떤 것을 애플리케이션 컨텍스트에 적용했는지 판단하는 데 사용된다. 따라서 이 기능의 값은 [APPMANIFEST]에 정의된 디스플레이 모드에 대응한다. 그러나 또한 비-애플리케이션 컨텍스트에서도, 뷰포트가 fullscreen 또는 picture-in-picture 같은 다른 모드에 있는지 판단하는 데 사용할 수 있다.

fullscreen

브라우징 컨텍스트는 브라우저 UI 요소가 숨겨진 채로 표시되며, 사용 가능한 디스플레이 영역 전체를 차지한다. fullscreen 컨텍스트는 fullscreen 디스플레이 모드가 애플리케이션 매니페스트에 의해 요청되었거나, Fullscreen API의 requestFullscreen() 메서드에 의해 요청되었거나, 또는 다른 수단(예: 사용자가 사용자 에이전트 내장 컨트롤로 fullscreen 모드를 수동 활성화)으로 인해 발생했을 수 있다.

fullscreen 디스플레이 모드에 대응한다.

standalone

standalone 디스플레이 모드가 사용 중이다. 애플리케이션 컨텍스트에서만 적용된다.

minimal-ui

minimal-ui 디스플레이 모드가 사용 중이다. 애플리케이션 컨텍스트에서만 적용된다.

browser

브라우징 컨텍스트는 사용자 에이전트에서 하이퍼링크를 여는 플랫폼별 관례(예: 주소 표시줄 같은 컨트롤을 가진 브라우저 탭 또는 웹 브라우저 창)를 사용하여 표시된다. 이는 다른 디스플레이 모드가 적절하지 않은 비-애플리케이션 컨텍스트에서 사용되어야 한다.

browser 디스플레이 모드에 대응한다.

picture-in-picture

이 모드는 사용자가 자신의 장치에서 다른 사이트나 애플리케이션과 상호작용하는 동안에도 미디어를 계속 소비할 수 있게 한다. 브라우징 컨텍스트는 부유(floating)하며 항상 위에 표시되는 창에 표시된다. 사용자 에이전트는 "back-to-tab" 및 "site information" 버튼 같은, 또는 플랫폼과 사용자 에이전트에서 관례적인 기타 플랫폼별 UI 요소를 포함할 수 있다.

{
  "display": "standalone"
}

@media (display-mode: standalone) { … }

/* 뷰포트가 fullscreen일 때 적용됨 */
@media (display-mode: fullscreen) { … }

/* 요소가 fullscreen일 때 적용됨 */
#game:fullscreen { … }

Note: 이 미디어 기능에 대한 추가 값은 [APPMANIFEST]에 추가되는 새로운 디스플레이 모드에 매치하기 위해 미래에 추가될 수 있다.

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 방송을 시뮬레이션할 수 있게 했다.

인터레이스 화면에 표시할 때, 작성자는 “combing”을 피하기 위해 화면을 가로지르는 매우 빠른 움직임을 피해야 하며, “twitter”를 피하기 위해 화면의 디테일이 1px보다 넓도록 보장해야 한다.

progressive

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

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

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

Note: 작성 시점에서 알려진 모든 구현은 scan: interlace가 아니라 scan: progressive에 매치된다.

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

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

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

Note: <mq-boolean> 타입은 레거시 목적을 위해서만 존재한다. 오늘날 이 기능을 설계한다면, 대신 값에 대해 적절한 이름을 가진 키워드를 사용했을 것이다.

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

Note: 작성 시점에서 알려진 모든 구현은 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. 디스플레이 기술 감지: environment-blending 기능

environment-blending 미디어 기능은 사용자의 디스플레이 특성을 쿼리하여 작성자가 문서의 스타일을 조정할 수 있도록 하는 데 사용된다. 작성자는 매력도를 높이거나 가독성을 개선하기 위해 디스플레이 기술에 따라 페이지의 시각 요소 및/또는 레이아웃을 조정하기로 선택할 수 있다.

다음 값이 유효하다:

opaque

문서는 전통적인 모니터나 종이 같은 불투명 매체에 렌더링된다. 검정은 어둡고 흰색은 100% 빛이다.

additive

디스플레이는 가산 혼합을 사용하여 캔버스의 색상을 현실 세계와 혼합한다. 검정은 완전히 투명하고 흰색은 100% 빛이다.

예: 자동차의 헤드업 디스플레이.

subtractive

디스플레이는 감산 혼합을 사용하여 캔버스의 색상을 현실 세계와 혼합한다. 흰색은 완전히 투명하며 어두운 색이 가장 높은 대비를 가진다.

예: 욕실 거울에 내장된 LCD 디스플레이.

subtractive 값이 필요할까?

body { background-color: white; }
p { color: black; }

@media(environment-blending: additive) {
  body { background-color: black; }
  p { color: white; font-size: 16px; font-weight: 1000; }
}

6. 색상 미디어 기능

6.1. 색상 깊이: color 기능

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

color는 음수 범위에서 false이다.

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

@media (color >= 8) { … }

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

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

Note: 위에서 설명한 기능은 피상적인 수준에서만 색상 능력을 설명할 수 있다. 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가 지정된 공간의 색상을 가진 콘텐츠를 받으면 출력 장치가 적절한 색상(또는 충분히 가까운 무언가)을 렌더링하도록 만들 수 있다.

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

srgb

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

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

p3

UA 및 출력 장치는 Display P3 [Display-P3] Color Space에 의해 지정된 색역 또는 그 이상을 대략 지원할 수 있다.

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

rec2020

UA 및 출력 장치는 ITU-R Recommendation BT.2020 Color Space에 의해 지정된 색역 또는 그 이상을 대략 지원할 수 있다.

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

다음 표는 [COLORIMETRY]에 정의된 바에 따라, 이들 색 공간의 원색(primaries)을 색 공간 색도(chromaticity) 좌표로 나열한다.

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

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

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

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

6.5. 동적 범위: dynamic-range 기능

dynamic-range는 사용자 에이전트 및 출력 장치가 지원하는 최대 밝기, 색상 깊이, 그리고 대비비(contrast ratio)의 조합을 나타낸다.

high

사용자 에이전트와 출력 장치는 다음 기준을 모두 충족한다:

• 높은 피크 밝기를 지원한다

• 높은 대비비를 지원한다

• 색상 깊이가 24비트(또는 RGB 색상 구성 요소당 8비트)보다 크다

Note: 일부 장치는 항상 켜져 있지 않은 높은 동적 범위 기능을 가지고 있으며, 활성화되어야 한다 (때로는 프로그래밍으로, 때로는 사용자에 의해, 때로는 콘텐츠에 기반하여). 이 미디어 기능은 그러한 모드가 활성 상태인지 테스트하지 않으며, 장치가 높은 동적 범위 비주얼을 지원할 수 있는지 여부만 테스트한다.

standard

이 값은 어떤 시각적 장치에서는 매치되며, 시각 능력이 없는 장치에서는 매치되지 않는다.

Note: 이 미디어 기능의 하나 이상의 값이 동시에 매치될 수 있다: high에 매치되는 사용자 에이전트는 standard에도 매치된다.

6.5.1. 디스플레이의 대비 및 밝기 결정

피크 밝기는 LCD 화면 같은 발광 장치가 만들어낼 수 있는 가장 밝은 점이 얼마나 밝은지를 의미하거나, 종이나 e-ink 같은 반사 장치의 경우에는 빛을 가장 적게 흡수하는 지점을 의미한다.

Note: 일부 장치는 피크 밝기를 짧은 시간 동안만, 또는 주어진 시간에 그 표면의 작은 일부에서만 만들어낼 수 있다.

대비비는 시스템이 만들어낼 수 있는 가장 밝은 색의 휘도(luminance)와 가장 어두운 색의 휘도의 비율이다.

이 명세는 이러한 특성을 측정하는 정확한 방법을 정의하지 않으며; 또한 사용자 에이전트가 대비비에 대한 높음과, 피크 밝기에 대한 높음이 무엇인지 결정하도록 허용한다. 그럼에도 불구하고 사용자 에이전트는 다음 의도에 맞추어야 한다: 높은 피크 밝기가 가능한 장치는 “흰색보다 더 밝은” 하이라이트를 표시할 수 있으며, 동시에 깊은 검정을 제시하면서도(전체적으로 밝지만 바랜 이미지가 아니라) 이를 수행할 수 있는 능력은 높은 대비비를 시사한다.

Note: dynamic-range 및 video-dynamic-range에 대한 결정은 사용자 에이전트에 따라 달라지겠지만, 대체로 신뢰할 수 있는 의미를 가질 것으로 예상된다.

6.6. 디스플레이에서 반전된 색상 감지: inverted-colors 기능

inverted-colors 미디어 기능은 콘텐츠가 정상적으로 표시되는지, 또는 색상이 반전되었는지를 나타낸다.

Note: 이는 사용자 에이전트 또는 그 아래의 운영 체제가 모든 색상을 강제로 반전했다는 표시이며, 그렇게 해 달라는 요청이 아니다. 이는 때때로 단순한 접근성 기능으로 제공되어, 사용자가 밝은 배경의 어두운 글자와 어두운 배경의 밝은 글자 사이를 전환할 수 있게 한다. 하지만 이는 그림이 반전되거나, 그림자가 하이라이트로 바뀌는 등 불쾌한 부작용을 가져와 콘텐츠의 가독성을 떨어뜨린다.

none

색상은 정상적으로 표시된다.

inverted

표시 영역 내의 모든 픽셀이 반전되었다.

사용자 에이전트가 이미지를 보존하는 것 같은 어떤 종류의 콘텐츠 인지 반전(content aware inversion)을 수행했다면, 이 값은 매치되어서는 안 된다.

Note: 이는 이 미디어 기능의 목표가, 모든 픽셀을 반전시키는 비-콘텐츠 인지 방식의 바람직하지 않은 효과를 작성자가 완화할 수 있게 하는 것이기 때문이다. 작성자가 콘텐츠 인지 사례에서도 대응 조치를 취한다면, 작성자의 조치와 UA의 조치가 서로를 상쇄할 위험이 있다.

@media (inverted-colors) {
  img:not(picture > img), picture, video {
    filter: invert(100%);
  }
}

@media (inverted-colors) {
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }
}

7. 상호작용 미디어 기능

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

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

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

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

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

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

none

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

coarse

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

fine

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

coarse와 fine는 둘 다 포인팅 장치의 존재를 나타내지만, 정확도에서 차이가 있다. 확대/축소 비율이 1인 상태에서 여러 개의 작고 인접한 타깃 중 하나를 안정적으로 선택하기가 어렵거나 불가능한 포인팅 장치는 coarse에 해당한다. 줌 레벨 변경은 이 미디어 기능의 값에 영향을 주지 않는다.

Note: UA가 사용자에게 줌 기능을 제공할 수도 있고, 2차 포인팅 장치가 서로 다른 정확도를 가질 수도 있으므로, 사용자는 이 미디어 기능의 값이 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 미디어 기능과 동일하지만, 사용자에게 제공되는 모든 포인팅 장치의 능력의 합집합(union)에 대응한다. any-pointer의 경우에는, 서로 다른 포인팅 장치가 서로 다른 특성을 가지면 하나 이상의 값이 매치될 수 있다.

any-pointer 및 any-hover는 대응하는 쿼리에 대해 모든 포인팅 장치가 none에 매치되는 경우, 또는 포인팅 장치가 아예 없는 경우에만 none에 매치되어야 한다.

7.4. UA가 제공하는 내비게이션 컨트롤 감지: nav-controls 기능

nav-controls 미디어 기능은, 사용자 에이전트가 사용자 인터페이스의 일부로 명백히 발견 가능한 내비게이션 컨트롤을 제공하는지 여부를 작성자가 알 수 있게 해준다.

Note: 전통적인 브라우저는 일반적으로 그러한 컨트롤을 제공하며, 웹 페이지는 보통 이를 신경 쓸 필요가 없었지만, 일부 컨텍스트에서는 웹 애플리케이션이 이른바 web-view를 통해 실행되며, 이들은 항상 완전한 사용자 인터페이스를 갖추고 있지는 않다. 따라서 작성자가 사용자 에이전트가 무엇을 제공하는지 알 수 있다면 유용하며, 쉽게 발견되는 대안을 제공해야 하는지 여부를 고려할 수 있다.

이 컨텍스트에서, 명백히 발견 가능한은 버튼처럼 사용자 인터페이스에서 직접 보이는 컨트롤이거나, 또는 해당 장치의 사용자 인터페이스에서 전형적이며 사용자가 쉽게 식별할 수 있는 다른 형태의 컨트롤을 의미한다. 시각적 사용자 인터페이스의 경우, 이는 보통 보이는 컨트롤이지만, 오디오 또는 촉각 사용자 인터페이스의 경우에는 다른 무언가일 수도 있다. 중요한 점은, 이것은 키보드 단축키나 제스처에 관한 것이 아니라는 점이다; 이런 것들이 편리할 수는 있지만, (시각적 UI의 경우) 사용자 에이전트를 보기만 해서 사용자가 쉽게 알아차릴 수 있는 것은 아니다.

다음 값이 유효하다:

none

사용자 에이전트에 명백히 발견 가능한 내비게이션 컨트롤이 전혀 없으며, 특히 사용자 에이전트가 페이지의 이전 세션 히스토리 엔트리로 돌아가게 만드는 컨트롤도 없다.

back

사용자 에이전트가 내비게이션 컨트롤을 제공하며, 사용자 에이전트가 페이지의 이전 세션 히스토리 엔트리로 돌아가게 하는 명백히 발견 가능한 컨트롤을 최소 하나 포함한다 (전형적으로 “뒤로” 버튼).

@media (nav-controls: back) {
  #back-button {
    display: none;
  }
}

@media (nav-controls) {
  #back-button {
    display: none;
  }
}

명백히 발견 가능한 컨트롤이 활성 상태인지 여부는 이 미디어 기능의 평가에 영향을 주지 않는다.

8. 비디오 접두 기능

일부 사용자 에이전트는, 많은 TV를 포함하여, 비디오와 그래픽을 서로 다른 화면 특성을 가진 두 개의 별도 "플레인"(bi-plane)으로 렌더링합니다. 비디오 플레인을 설명하기 위해 비디오 접두사가 붙은 기능들이 제공됩니다.

모든 bi-plane 구현은 다음 기능들에 대해 비디오 플레인을 기준으로 값을 반환해야 합니다: video-color-gamut; video-dynamic-range. 다른 모든 기능은 그래픽 플레인을 기준으로 값을 반환해야 합니다.

비(非) bi-plane 구현은 비디오 접두 기능과 접두가 없는 대응 기능에 대해 동일한 값을 반환해야 합니다.

8.1. 비디오 색상 표시 품질: video-color-gamut 기능

The video-color-gamut 미디어 기능은 사용자 에이전트와 출력 장치의 비디오 플레인이 지원하는 대략적인 색상 범위를 설명합니다. 즉, 사용자 에이전트가 지정된 색 공간의 색을 포함한 콘텐츠를 받으면 출력 장치가 해당 색을 적절히 렌더링하거나 그에 충분히 근접한 색을 렌더링할 수 있음을 의미합니다.

값 및 색 공간 정의는 color-gamut과 동일합니다.

8.2. 비디오 동적 범위: video-dynamic-range 기능

video-dynamic-range는 사용자 에이전트와 출력 장치의 비디오 플레인이 지원하는 최대 밝기, 색 깊이 및 명암비의 조합을 나타냅니다.

지원되는 값은 dynamic-range와 동일합니다.

9. 스크립팅 미디어 기능

9.1. 스크립팅 지원: scripting 기능

The scripting 미디어 기능은 JavaScript와 같은 스크립팅 언어가 현재 문서에서 지원되는지 여부를 질의하는 데 사용됩니다.

enabled

사용자 에이전트가 페이지의 스크립팅을 지원하며, 현재 문서에서 문서의 생애 주기 동안 스크립팅이 활성화되어 있음을 나타냅니다.

initial-only

사용자 에이전트가 페이지의 스크립팅을 지원하며, 현재 문서에서 초기 페이지 로드 동안에는 스크립팅이 활성화되어 있지만, 이후에는 지원되지 않음을 나타냅니다. 예로는 인쇄된 페이지나, 서버에서 페이지를 렌더링하고 거의 정적인 버전을 사용자에게 보내는 프리렌더링 네트워크 프록시가 있습니다.

UA가 initial-only를 주장하기 위해 충족해야 하는 명시적 최소 기준이 있어야 할까요? 그런 기준이 있으면 작성자는 무엇을 의존할 수 있는지 알 수 있고, 그에 따라 스크립트를 조정할 수 있습니다. 반면, 그 임계값을 정하기는 어렵습니다: 너무 낮게 설정하면 작성자가 의존할 수 있는 스크립팅 기능이 실제 UA가 지원하는 것보다 실용적으로 너무 제한될 수 있습니다. 반면 너무 높게 설정하면 로딩 시에는 스크립팅을 지원하지만 복잡한 휴리스틱에 따라 일부 경우에 이를 제한하는 UA들을 제외할 수 있습니다. 예를 들어, 보수적인 정의는 적어도 모든 인라인 스크립트를 실행하고 DOMContentLoaded 이벤트를 발생시키는 것을 포함할 가능성이 큽니다. 그러나 대부분(또는 아마도 모든) initial-only UA들이 외부 스크립트(예: async 및 defer 포함)를 로드하고 load 이벤트를 발생시키는 경우가 많다면, 작성자가 이에 맞춰 자신을 제한하는 것은 유용하지 않을 수 있습니다. 반면에 외부 스크립트의 로드와 load 이벤트의 발생을 요구하면, Opera mini와 같이 일반적으로 외부 스크립트를 실행하지만 타임아웃 및 기타 휴리스틱에 따라 실행하지 않기로 결정할 수 있는 UA들을 제외할 수 있습니다. [Issue #503]

none

사용자 에이전트가 이 문서에 대해 스크립트를 실행하지 않음을 나타냅니다; 해당 스크립팅 언어를 지원하지 않거나, 현재 문서에서 지원이 활성화되어 있지 않습니다.

일부 사용자 에이전트는 스크립트별 또는 도메인별로 스크립팅 지원을 끌 수 있어, 특정 문서에서 일부 스크립트만 실행을 허용할 수 있습니다. scripting 미디어 기능은 어떤 스크립트가 실행되는지를 세부적으로 감지하는 것을 허용하지 않습니다. 이런 시나리오에서는 문서와 동일한 도메인에서 유래한 스크립트들이 실행되는 것이 허용된다면 scripting 미디어 기능의 값은 enabled 또는 initial-only가 되어야 하며, 그렇지 않으면 none이어야 합니다.

Note: 향후 CSS 버전에서는 이 미디어 기능을 확장하여 어떤 스크립트가 허용되는지를 세분화하여 탐지할 수 있게 할 수 있습니다.

10. 사용자 정의 미디어 쿼리

미디어 쿼리를 사용하는 문서를 설계할 때, 동일한 미디어 쿼리가 여러 곳에서 사용될 수 있습니다. 예를 들어 여러 @import 문을 한정하기 위해 사용될 수 있습니다. 같은 미디어 쿼리를 여러 번 반복하는 것은 편집상 위험을 초래합니다; 작성자가 변경을 할 때 모든 복사본을 동일하게 편집해야 하며, 그렇지 않으면 CSS에 찾기 어려운 버그가 발생할 수 있습니다.

이를 완화하기 위해, 이 명세서는 사용자 정의 미디어 쿼리를 정의하는 방법을 제공합니다. 이는 더 길고 복잡한 미디어 쿼리에 대한 간단한 이름 별칭입니다. 이렇게 하면 여러 곳에서 사용되는 미디어 쿼리를 사용자 정의 미디어 쿼리로 할당하고, 모든 곳에서 이를 사용하며, 미디어 쿼리를 수정할 때는 코드의 한 줄만 수정하면 됩니다.

A custom media query 는 @custom-media 규칙으로 정의됩니다:

@custom-media = @custom-media <extension-name> [ <media-query-list> | true | false ] ;

<extension-name> 은 미디어 기능에서 사용할 수 있습니다. 이는 반드시 불리언 컨텍스트에서 사용되어야 합니다; 일반 컨텍스트나 범위 컨텍스트에서 사용하는 것은 문법 오류입니다. 만약 <media-query-list>가 주어지면, 사용자 정의 미디어 쿼리는 그것이 나타내는 <media-query-list>가 true로 평가될 때 true로 평가되며, 그렇지 않으면 false로 평가됩니다. 만약 true 또는 false가 주어지면, 사용자 정의 미디어 쿼리는 각각 true 또는 false로 평가됩니다.

/* --modern targets modern devices that support color or hover */
@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
  .a { color: green; }
}

@media ((color) or (hover)) and (width > 1024px) {
  .a { color: green; }
}

@media (color), (hover) and (width > 1024px) {
  .a { color: green; }
}

@custom-media 규칙은 다른 사용자 정의 미디어 쿼리를 참조할 수 있습니다. 하지만 순환(루프)은 금지되며, 사용자 정의 미디어 쿼리는 자신을 직접 또는 간접적으로 참조하는 자신 또는 다른 사용자 정의 미디어 쿼리로 정의되어서는 안 됩니다. 순환 종속성으로 정의하려는 시도는 해당 루프에 있는 모든 사용자 정의 미디어 쿼리의 정의 실패를 초래해야 합니다.

여러 @custom-media 규칙이 동일한 <extension-name>을 선언하는 경우, 진리값은 마지막 선언만 기준으로 하며, 동일한 <extension-name>의 이전 선언들은 무시됩니다.

Note: 오류 처리 목적상, 정의되지 않은 미디어 기능는 false로 평가되는 미디어 기능과 다릅니다. 자세한 내용은 Media Queries 4 § 3.2 오류 처리를 참조하세요.

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}
@media (--narrow-window) and (script) {
  /* special styles for when script is allowed */
}
/* etc */

10.1. 스크립트 기반 사용자 정의 미디어 쿼리

<script>
CSS.customMedia.set('--foo', 5);
</script>
<style>
@media (_foo: 5) { ... }
@media (_foo < 10) { ... }
</style>

11. CSSOM

The CSSCustomMediaRule 인터페이스는 @custom-media 규칙을 나타냅니다.

typedef (MediaList or boolean) CustomMediaQuery;

[Exposed=Window]
interface CSSCustomMediaRule : CSSRule {
  readonly attribute CSSOMString name;
  readonly attribute CustomMediaQuery query;
};

name, of type CSSOMString, readonly

<extension-name>에 해당하는 CSSOMString을 반환합니다.

query, of type CustomMediaQuery, readonly

사용자 정의 미디어 쿼리의 값을 나타냅니다. 반환되는 CustomMediaQuery 는 다음 중 하나입니다:

• 규칙이 <media-query-list>로 정의된 경우, MediaList 객체.
• 규칙이 true로 정의된 경우 불리언 true.
• 규칙이 false로 정의된 경우 불리언 false.

12. 사용자 환경 설정 미디어 기능

12.1. 페이지의 움직임 감소 희망 감지: prefers-reduced-motion 기능

The prefers-reduced-motion 미디어 기능은 사용자가 시스템에 비필수적 움직임을 최소화해 달라고 요청했는지를 감지하는 데 사용됩니다.

no-preference

사용자가 시스템에 대해 특별한 선호를 알리지 않았음을 나타냅니다. 이 키워드 값은 불리언 컨텍스트에서 false로 평가됩니다.

reduce

사용자가 전정 감각(vestibular motion) 민감성을 유발하거나, 주의력 결핍이 있는 사람들에게 산만을 초래하는 유형의 모션 기반 애니메이션을 제거하거나 대체하는 인터페이스를 선호한다고 시스템에 알렸음을 나타냅니다.

12.2. 페이지의 투명도 감소 희망 감지: prefers-reduced-transparency 기능

The prefers-reduced-transparency 미디어 기능은 사용자가 시스템에 투명 또는 반투명 레이어 효과의 사용을 최소화해 달라고 요청했는지를 감지하는 데 사용됩니다.

no-preference

사용자가 시스템에 대해 특별한 선호를 알리지 않았음을 나타냅니다. 이 키워드 값은 불리언 컨텍스트에서 false로 평가됩니다.

reduce

사용자가 투명 또는 반투명 레이어 효과의 사용을 최소화하는 인터페이스를 선호한다고 시스템에 알렸음을 나타냅니다.

이것이 예를 들어 패턴 채우기 및 배경에 대한 선호와는 어떻게 상호작용할까요? 그것들은 투명성과 관련된 것은 아니지만 형태 인식에 방해가 될 수 있습니다.

12.3. 페이지 요소의 색 대비 증가 또는 감소 희망 감지: prefers-contrast 기능

The prefers-contrast 미디어 기능은 사용자가 페이지에서 더 많거나 더 적은 대비를 요청했는지를 감지하는 데 사용됩니다. 예를 들어 인접한 색상 간의 명암비를 조정하거나, 요소가 시각적으로 얼마나 두드러지게 보이는지를 변경(예: 테두리 조정)하는 방식으로 대응할 수 있습니다.

no-preference

사용자가 시스템에 대해 특별한 선호를 알리지 않았음을 나타냅니다. 이 키워드 값은 불리언 컨텍스트에서 false로 평가됩니다.

less

사용자가 더 낮은 수준의 대비를 갖는 인터페이스를 선호한다고 시스템에 알렸음을 나타냅니다.

more

사용자가 더 높은 수준의 대비를 갖는 인터페이스를 선호한다고 시스템에 알렸음을 나타냅니다.

custom

사용자가 특정 색상 세트를 사용하기를 원한다는 표시를 했지만, 해당 특정 색상들이 암시하는 대비가 more나 less 어느 쪽에도 해당하지 않는 경우를 나타냅니다.

Note: 이 값은 강제 색상 모드(forced colors mode)를 사용하는 사용자가 특히 높은 또는 낮은 대비가 아닌 팔레트를 선택한 경우에 일치합니다. 자세한 내용은 § 12.4 강제 색상 모드 감지: forced-colors 기능을 참조하세요.

예: 녹청색 텍스트에 녹슨색 배경을 요청하는 사용자는(적어도 휘도 측면에서) 특별히 높은 또는 낮은 대비를 요구하는 것은 아니지만, 선호가 없는 것도 아닙니다.

12.4. 강제 색상 모드 감지: forced-colors 기능

active

강제 색상 모드가 활성화되어 있음을 나타냅니다: 사용자 에이전트가 페이지에 사용자 선택의 제한된 색상 팔레트를 적용합니다. UA는 CSS 시스템 색상 키워드를 통해 작성자에게 색상 팔레트를 제공합니다. 자세한 내용은 CSS Color Adjustment 1 § 3 강제 색상 팔레트를 참조하세요.

이것은 반드시 더 높은 대비를 선호함을 의미하지 않습니다. 색상은 사용자의 선호에 맞게 강제로 조정되었지만, 그 선호는 더 낮거나 더 높은 대비, 또는 특별히 낮거나 높지 않은 다른 구성일 수 있습니다.

사용자 에이전트는 forced-colors: active 외에도, 사용자가 선택한 강제 색상 팔레트가 특히 높은 또는 낮은 대비를 갖는지를 판단할 수 있다면 prefers-contrast: more 또는 prefers-contrast: less 중 하나와 일치시켜야 하며, 그렇지 않으면 prefers-contrast: custom와 일치시켜야 합니다.

유사하게, 사용자가 선택한 강제 색상 팔레트가 prefers-color-scheme에서 설명하는 색상 체계 중 하나에 속한다면, 해당 값도 일치해야 합니다.

none

강제 색상 모드가 활성화되지 않았음을 나타냅니다.

12.5. 밝은색 또는 어두운색 테마 선호 감지: prefers-color-scheme 기능

The prefers-color-scheme 미디어 기능은 사용자가 페이지에 밝은 테마 또는 어두운 테마를 사용하기를 원하는지를 반영합니다.

light

사용자가 밝은 테마(밝은 배경에 어두운 텍스트)를 선호하거나, 특별한 활성 선호를 표현하지 않아 웹의 기본값인 밝은 테마를 받아야 함을 나타냅니다.

dark

사용자가 어두운 테마(어두운 배경에 밝은 텍스트)를 선호한다고 표현했음을 나타냅니다.

Note: 이 기능의 값은 향후 확장될 수 있습니다 (예: 밝은 색상 체계에 대한 더 적극적인 선호를 표현하거나, "세피아" 같은 다른 색상 체계 선호를 표현). 따라서 이 미디어 기능을 사용하는 가장 향후 호환성이 좋은 방법은 (prefers-color-scheme: dark) 및 (not (prefers-color-scheme: dark))와 같은 부정을 사용하는 것입니다. 이렇게 하면 새 값이 추가되어도 적어도 스타일 블록 중 하나에는 속하게 됩니다.

사용자가 선호를 표현하는 방법은 다양할 수 있습니다. 운영체제가 제공하는 시스템 수준 설정일 수도 있고, 사용자 에이전트가 제어하는 설정일 수도 있습니다.

Note: 사용자 선호는 매체에 따라 달라질 수 있습니다. 예를 들어 사용자는 발광 화면에서는 어두운 테마를 선호하지만, 인쇄 시에는 밝은 테마를 선호할 수 있습니다 (잉크 절약 또는 잉크로 인쇄된 텍스트가 빈 종이에 인쇄된 것보다 더 읽기 쉽기 때문). 사용자 에이전트는 이러한 차이를 고려하여 prefers-color-scheme이 매체에 적절한 선호를 반영하도록 기대됩니다.

임베디드 SVG 문서에서 "Secure Animated" 임베딩 모드를 사용하여 평가되는 경우, 선호 색상 체계는 임베딩 문서의 임베딩 노드에서 사용되는 used color scheme의 값을 반영해야 합니다.

12.6. 페이지 로딩 시 데이터 사용량 감소 희망 감지: prefers-reduced-data 기능

이 기능은 원치 않는 지문 식별(fingerprinting)의 원인이 될 수 있으며, 저소득층의 데이터 제한과 편향될 수 있습니다. [Issue #10076]

The prefers-reduced-data 미디어 기능은 사용자가 페이지를 렌더링하는 데 사용되는 데이터량이 적은 대체 콘텐츠를 제공받기를 선호하는지를 감지하는 데 사용됩니다.

no-preference

사용자가 시스템에 대해 특별한 선호를 알리지 않았음을 나타냅니다. 이 키워드 값은 불리언 컨텍스트에서 false로 평가됩니다.

reduce

사용자가 경량 대체 콘텐츠를 선호한다고 표현했음을 나타냅니다.

사용자가 선호를 표현하는 방법은 다양할 수 있습니다. 운영체제가 제공하는 시스템 설정일 수도 있고, 사용자 에이전트가 제어하는 설정일 수도 있습니다. 사용자 에이전트는 Save-Data HTTP 요청 헤더를 설정하는 데 사용하는 동일한 사용자 또는 시스템 선호를 기반으로 이 값을 설정하는 것을 고려할 수 있습니다.

Note: 사용자 에이전트는 이 값의 토글을 처리할 때 사용자 중심의 재량을 사용하는 것이 권장됩니다. 이 값이 페이지 로드 중 또는 로드 후에 토글될 때의 처리 방식에 대해 고려해야 합니다. 주요 목표는 불필요한 데이터 다운로드를 피하는 것이 될 수 있습니다. 예를 들어 페이지가 이미 고품질 자산으로 로드되어 있고 사용자가 선호를 '축소'로 변경하면, 페이지를 즉시 업데이트하지 않고 사용자 명시적 새로고침을 기다릴 수 있습니다. 반대로 페이지 다운로드가 오래 걸리고 사용자가 선호를 '축소'로 변경하면, 즉시 더 작은 자산 다운로드로 전환하여 사용자의 대역폭을 절약할 수 있습니다. 사용자 에이전트는 이러한 상황에 대해 적절하다고 판단되는 로직을 자유롭게 구현할 수 있습니다.

.image {
  background-image: url("images/heavy.jpg");
}

@media (prefers-reduced-data: reduce) {
  /* Save-Data: On */
  .image {
    background-image: url("images/light.jpg");
  }
}

12.7. 사용자 선호의 자동 처리

사용자 에이전트는 사용자가 선호를 표시할 수 있도록 명시적 설정을 제공하거나, 기본 운영체제 설정을 기반으로 판단할 수 있습니다. 또한 장치, 환경 등에 관한 지식을 기반으로 사용자의 선호를 자동으로 추론할 수도 있습니다. 이러한 경우 자동으로 결정된 선호를 사용자가 선택 해제하거나 재정의할 수 있는 방법을 제공하는 것이 권장됩니다.

13. 스크립트에 의한 사용자 선호 제어

웹사이트 작성자가 사용자의 시스템 선호를 존중하면서도 그 선호를 재정의할 수 있도록 허용하려는 경우가 흔합니다. 이를 돕기 위해, 이 명세서는 작성자가 § 12 사용자 환경 설정 미디어 기능을 PreferenceManager 인터페이스를 사용해 재정의할 수 있는 방법을 정의합니다.

이 재정의는 해당 선호에 의해 영향을 받는 다양한 플랫폼 기능과의 통합을 허용합니다.

13.1. Navigator 인터페이스에 대한 확장

[Exposed=Window, SecureContext]
partial interface Navigator {
	[SameObject] readonly attribute PreferenceManager preferences;
};

13.1.1. preferences 속성

preferences 속성을 가져올 때는 항상 동일한 인스턴스의 PreferenceManager 객체를 반환해야 합니다.

13.1.2. PreferenceManager 인터페이스

[Exposed=Window, SecureContext]
interface PreferenceManager {
	readonly attribute PreferenceObject colorScheme;
	readonly attribute PreferenceObject contrast;
	readonly attribute PreferenceObject reducedMotion;
	readonly attribute PreferenceObject reducedTransparency;
	readonly attribute PreferenceObject reducedData;
};

13.1.3. colorScheme 속성

The colorScheme 속성은 사이트의 색상 체계에 대한 사용자의 선호를 재정의하는 데 사용되는 PreferenceObject입니다. 이는 § 12.5 밝음 또는 어두움 색상 체계 선호 감지: prefers-color-scheme 기능을 모델로 합니다.

이 선호에 대한 재정의가 설정된 경우:

• 사용자 에이전트는 모든 스타일시트에 대해 이 재정의를 § 12.5 밝음 또는 어두움 색상 체계 선호 감지: prefers-color-scheme 기능에 사용해야 하며, 이는 UA 스타일 시트를 포함하여 해당 origin에 적용됩니다.

• 사용자 에이전트는 또한 CSSOM View § 4 Window 인터페이스 확장에서 `matchMedia()`로 질의할 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 사용된 색상 체계(used color scheme)를 계산할 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 User Preference Media Features Client Hints Headers § 2.5 Sec-CH-Prefers-Color-Scheme을 보낼 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 일반적으로 § 12.5 밝음 또는 어두움 색상 체계 선호 감지: prefers-color-scheme 기능에 의해 영향을 받는 모든 UA 기능에 대해 이 재정의를 사용해야 합니다.

13.1.4. contrast 속성

The contrast 속성은 사이트의 대비에 대한 사용자의 선호를 재정의하는 데 사용되는 PreferenceObject입니다. 이는 § 12.3 페이지 요소의 색 대비 증감 선호 감지: prefers-contrast 기능을 모델로 합니다.

이 선호에 대한 재정의가 설정된 경우:

• 사용자 에이전트는 모든 스타일시트에 대해 이 재정의를 § 12.3 페이지 요소의 색 대비 증감 선호 감지: prefers-contrast 기능에 사용해야 하며, 이는 UA 스타일 시트를 포함하여 해당 origin에 적용됩니다.

• 사용자 에이전트는 또한 CSSOM View § 4 Window 인터페이스 확장에서 `matchMedia()`로 질의할 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 User Preference Media Features Client Hints Headers § 2.3 Sec-CH-Prefers-Contrast을 보낼 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 일반적으로 § 12.3 페이지 요소의 색 대비 증감 선호 감지: prefers-contrast 기능에 의해 영향을 받는 모든 UA 기능에 대해 이 재정의를 사용해야 합니다.

Note: 이 선호는 미디어 기능과 달리 custom으로 설정할 수 없습니다. 이는 이 값이 § 12.4 강제 색상 모드 감지: forced-colors 기능과 강하게 결합되어 있기 때문입니다.

13.1.5. reducedMotion 속성

The reducedMotion 속성은 사이트에서의 모션 감소에 대한 사용자의 선호를 재정의하는 데 사용되는 PreferenceObject입니다. 이는 § 12.1 페이지의 움직임 감소 희망 감지: prefers-reduced-motion 기능을 모델로 합니다.

이 선호에 대한 재정의가 설정된 경우:

• 사용자 에이전트는 모든 스타일시트에 대해 이 재정의를 § 12.1 페이지의 움직임 감소 희망 감지: prefers-reduced-motion 기능에 사용해야 하며, 이는 UA 스타일 시트를 포함하여 해당 origin에 적용됩니다.

• 사용자 에이전트는 또한 CSSOM View § 4 Window 인터페이스 확장에서 `matchMedia()`로 질의할 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 User Preference Media Features Client Hints Headers § 2.1 Sec-CH-Prefers-Reduced-Motion을 보낼 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 일반적으로 § 12.1 페이지의 움직임 감소 희망 감지: prefers-reduced-motion 기능에 의해 영향을 받는 모든 UA 기능에 대해 이 재정의를 사용해야 합니다.

Note: 이 선호에 의해 영향을 받는 UA 기능의 예로는 부드러운 스크롤링을 비활성화하거나 마퀴 요소를 일시정지하는 것이 있을 수 있습니다.

13.1.6. reducedTransparency 속성

The reducedTransparency 속성은 사이트에서의 투명도 감소에 대한 사용자의 선호를 재정의하는 데 사용되는 PreferenceObject입니다. 이는 § 12.2 페이지의 투명도 감소 희망 감지: prefers-reduced-transparency 기능을 모델로 합니다.

이 선호에 대한 재정의가 설정된 경우:

• 사용자 에이전트는 모든 스타일시트에 대해 이 재정의를 § 12.2 페이지의 투명도 감소 희망 감지: prefers-reduced-transparency 기능에 사용해야 하며, 이는 UA 스타일 시트를 포함하여 해당 origin에 적용됩니다.

• 사용자 에이전트는 또한 CSSOM View § 4 Window 인터페이스 확장에서 `matchMedia()`로 질의할 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 User Preference Media Features Client Hints Headers § 2.2 Sec-CH-Prefers-Reduced-Transparency을 보낼 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 일반적으로 § 12.2 페이지의 투명도 감소 희망 감지: prefers-reduced-transparency 기능에 의해 영향을 받는 모든 UA 기능에 대해 이 재정의를 사용해야 합니다.

13.1.7. reducedData 속성

The reducedData 속성은 사이트에서의 데이터 사용량 감소에 대한 사용자의 선호를 재정의하는 데 사용되는 PreferenceObject입니다. 이는 § 12.6 페이지 로딩 시 데이터 사용량 감소 희망 감지: prefers-reduced-data 기능을 모델로 합니다.

이 선호에 대한 재정의가 설정된 경우:

• 사용자 에이전트는 모든 스타일시트에 대해 이 재정의를 § 12.6 페이지 로딩 시 데이터 사용량 감소 희망 감지: prefers-reduced-data 기능에 사용해야 하며, 이는 UA 스타일 시트를 포함하여 해당 origin에 적용됩니다.

• 사용자 에이전트는 또한 CSSOM View § 4 Window 인터페이스 확장에서 `matchMedia()`로 질의할 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 Save Data API § 2.1.1 Save-Data 요청 헤더 필드를 보낼 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 Save Data API § 2.1 saveData 속성을 계산할 때 이 재정의를 사용해야 합니다.

• 사용자 에이전트는 또한 일반적으로 § 12.6 페이지 로딩 시 데이터 사용량 감소 희망 감지: prefers-reduced-data 기능에 의해 영향을 받는 모든 UA 기능에 대해 이 재정의를 사용해야 합니다.

13.1.8. PreferenceObject 인터페이스

[Exposed=Window, SecureContext]
interface PreferenceObject : EventTarget {
	readonly attribute DOMString? override;
	readonly attribute DOMString value;
	readonly attribute FrozenArray<DOMString> validValues;

	undefined clearOverride();
	Promise<undefined> requestOverride(DOMString? value);

	attribute EventHandler onchange;
};

13.1.8.1. override 속성

13.1.8.2. value 속성

13.1.8.3. validValues 속성

13.1.8.4. onchange 이벤트 핸들러 속성

The onchange 속성은 이벤트 핸들러 IDL 속성로서 onchange 이벤트 핸들러에 대응하며, 그 이벤트 타입은 change입니다.

13.1.8.5. requestOverride() 메서드

이 알고리즘은 선호 재정의 설정이 정확히 무엇을 하는지에 대해 더 많은 세부사항이 필요합니다.

여기에서 TypeError가 적절한가요?

Note: `change` 이벤트는 계산된 값이 변경될 때 발생하지만, 새로운 재정의가 설정될 때 값이 변경되지 않더라도 발생합니다.

13.1.8.6. clearOverride() 메서드

Note: `change` 이벤트는 계산된 값이 변경될 때 발생하지만, 재정의가 제거될 때 값이 변경되지 않더라도 발생합니다.

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

Note: 장치가 세로/가로 등 여러 방향으로 사용될 수 있는 경우, 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) { … }

변경사항

이 섹션은 규범적이지 않습니다.

감사의 글

이 섹션은 규범적이지 않습니다.

이 명세서는 W3C의 Cascading Style Sheets 작업 그룹의 산물입니다.

다음으로부터의 의견: Adam Argyle, Amelia Bellamy-Royds, Andreas Lind, Andres Galante, Arve Bersvendsen, Björn Höhrmann, Chen Hui Jing, Chris Lilley, Chris Rebert, Christian Biesinger, Christoph Päper, Elika J. Etemad (fantasai), Emilio Cobos Álvarez, François Remy, Frédéric Wang, Fuqiao Xue, Greg Whitworth, Ian Pouncey, James Craig, Jay Harris, Jinfeng Ma, Kivi Shapiro, L. David Baron, Masataka Yakura, Matt Giuca, Melinda Grant, Michael Smith, Nicholas C. Zakas Patrick H. Lauke, Philipp Hoschka, Rick Byers, Rijk van Geijtenbeek, Rik Cabanier, Roger Gimson, Rossen Atanassov, Sam Sneddon, Sigurd Lerstad, Simon Kissane, Simon Pieters, Stephen Chenney, Steven Pemberton, Susan Lesch, Tantek Çelik, Thomas Wisniewski, Vi Nguyen, Xidorn Quan, Yves Lafon, akklesed, and 張俊芝 이 명세서를 개선했습니다.

개인정보 고려사항

이 섹션은 규범적이지 않습니다.

보안 고려사항

이 섹션은 규범적이지 않습니다.