미디어 쿼리

개요

HTML4와 CSS2는 현재, 다른 미디어 타입에 맞춰 미디어 고유 스타일 시트를 넣는 걸 지원합니다. 예를 들어, 문서가 화면상에 표시될 때는 sans-serif로, 프린트될 때는 serif 폰트를 사용할 수 있습니다. ‘screen’과 ‘print’는 2개의 정의 미디어 타입입니다. 미디어 쿼리는 스타일 시트를 이용해 매우 정교한 라벨링이 가능하여, 미디어 타입 기능을 확장합니다.

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

미디어 쿼리는 미디어 타입과 특정 미디어 속성의 상태를 확인하는 0개 이상의 식으로 구성합니다. 미디어 쿼리에서 사용 가능한 미디어 속성에는 ‘width’, ‘height’, ‘color’ 등이 있습니다. 미디어 쿼리을 사용함으로써, 콘텐츠 자체를 변경하지 않고 출력 디바이스의 고유 범위에 맞춰 표시하는 게 가능합니다.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

이 문서의 상태

이 섹션은 이 문서를 공개했을 때 상태에 대해 설명합니다. 다른 문서가 이 문서를 덮어쓸 가능성이 있으니 주의하시길 바랍니다. 이 문서 및 W3C에서 공개한 다른 문서의 최신 버전은 W3C technical reports index at http://www.w3.org/TR/에서 확인 가능합니다.

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

W3C 권고안은, 구현 가능하도록 광범위하게 리뷰를 받은 뒤 공개한 성숙한 문서입니다. W3C는 가능한한 모두가 이 스펙 문서의 내용을 구현하기를 장려합니다. 이 스펙문서와 관련한 토론은 (archived) 공개 메일링 리스트 [email protected] (참가안내서)에서 하는 것이 바람직하며, 메일을 보낼 때에는 제목에 “css3-mediaqueries”를 기입해주시길 바랍니다. 이는 곧, “[css3-mediaqueries] …본문 요약…” 같은 형태일 것입니다.

A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. W3C encourages everybody to implement this specification. The (archived) public mailing list [email protected] (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-mediaqueries” in the subject, preferably like this: “[css3-mediaqueries] …summary of comment…”.

이 문서는 W3C 멤버, 소프트웨어 개발자, 그리고 다른 W3C 그룹 및 관계자들이 평가를 진행하여, 디렉터에 의해 W3C 권고안으로 발표했습니다. 이 문서는 안정적이며, 참고자료로 사용하거나 다른 문서에서 인용해도 좋습니다. 스펙 문서의 권고를 통해 W3C가 하는 역할은 스펙 문서에 관심을 모으고 다방면으로 퍼뜨리는 일입니다. 이를 통해 웹의 기능과 상호운용성 향상을 기대할 수 있습니다.

This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.

워킹 그룹의 구현 레포트 및 미디어 쿼리 Test Suite를 확인하시길 바랍니다.

Please see the Working Group's implementation report and the Media Queries Test Suite.

이전 후보 권고안과 관련한 변경점 및 Disposition of comments를 확인할 수 있습니다.

Also see the Disposition of comments and a list of changes relative to the previous Proposed Recommendation.

W3C의 권고안으로 공개하는 것이 모든 W3C 멤버의 승인을 의미하지 않습니다. 이는 초안 문서이므로 다른 문서에 의해 언제든지 업데이트 되거나, 교체되거나 폐기될 수 있습니다. 작업 중 이외에 이 문서를 인용하는 것은 바람직하지 않습니다.

Publication as a W3C Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

이 문서는 (Style Activity의 일원인) CSS Working Group에서 제공합니다.

This document was produced by the CSS Working Group (part of the Style Activity).

이 문서는 2004년 2월 6일 W3C 특허 정책을 따르는 그룹에서 작성하였습니다. W3C는 그룹의 성과물에 관련하여 모든 공개 특허 공개 리스트를 관리합니다. 여기에는 특허 공개에 대한 지시사항도 포함합니다. 특허에 대해서 충분한 지식이 있는 사람이, 스펙 문서의 Essential Claim(s)에 인정된다고 파악되는 경우, W3C 특허 정책 제 6장에 의거하여 정보를 공개해야 할 필요가 있습니다.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

이 문서는 스타일 시트의 제외, title 및 date 같은 표기 정보 수정, 오래된 변경점 섹션 제거를 제외하고 이전 후보 권고안과 동일합니다.

This document is the same as the previous, Proposed Recommendation version: except for the style sheet, editorial changes to the front matter such as the title and date, and removal of the older changes section.

목차

• 1. 배경
• 2. 미디어 쿼리
• 3. 문법
  • 3.1. 에러 처리
• 4. 미디어 특성
  • 4.1. width
  • 4.2. height
  • 4.3. device-width
  • 4.4. device-height
  • 4.5. orientation
  • 4.6. aspect-ratio
  • 4.7. device-aspect-ratio
  • 4.8. color
  • 4.9. color-index
  • 4.10. monochrome
  • 4.11. resolution
  • 4.12. scan
  • 4.13. grid
• 5. 값
• 6. 단위
  • 6.1. 해상도
• Acknowledgments
• 참고 문서
  • 표준 참고 문서
  • 다른 참고 문서

1. 배경

(이 섹션은 표준에 준하는 내용이 아닙니다.)

(This section is not normative.)

HTML4 [HTML401]와 CSS2[CSS21]는 현재 다른 미디어 타입에 따라 미디어 고유의 스타일 시트를 적용하는 걸 지원합니다. 예를 들어, 문서가 화면에 보여질 때와 인쇄를 할 때 다른 스타일 시트를 이용할 수 있습니다. HTML 4에서는 아래와 같이 작성합니다.

HTML4 [HTML401] and CSS2 [CSS21] currently support media-dependent style sheets tailored for different media types. For example, a document may use different style sheets for screen and print. In HTML4, this can be written as:

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

CSS 스타일 시트에서는 특정 미디어 타입에서만 적용할 부분을 선언할 수 있습니다.

Inside a CSS style sheet, one can declare that sections apply to certain media types:

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

미디어 타입 ‘print’와 ‘screen’은 HTML4에서 정의되었습니다. HTML4에서 정의된 미디어 타입의 전체 목록은 ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’입니다. CSS2에서도 같은 리스트를 정의하지만, ‘aural’을 제거하고, ‘embossed’와 ‘speech’를 추가했습니다. 또한 ‘all’은 모든 미디어 타입에서 적용할 스타일 시트를 나타낼 때 사용합니다.

The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types.

미디어 고유 스타일 시트는 여러 유저 에이전트에서 지원합니다. 가장 일반적으로 사용되는 타입은 ‘screen’과 ‘print’입니다.

Media-specific style sheets are supported by several user agents. The most commonly used feature is to distinguish between ‘screen’ and ‘print’.

출력 디바이스의 어떤 타입에 스타일시트를 적용해야하는 지 디테일하게 설명하기 위한 방법에 대한 요청이 있었습니다. 다행히도 HTML4에서 이러한 요청을 예상하고 미디어 타입에 대한 상위호환성을 가진 구문을 정의해두었습니다. 여기에서는 HTML4 섹션 6.13을 인용합니다.

There have been requests for ways to describe in more detail what type of output devices a style sheet applies to. Fortunately HTML4 foresaw these requests and defined a forward-compatible syntax for media types. Here is a quote from HTML4, section 6.13:

이후의 HTML 버전에서 새로운 값이 추가될 가능성 및 파라미터화된 값이 허용될 가능성이 있습니다. 이러한 형태의 확장이 가능하도록 하기 위해서는, 적합하는 유저 에이전트가 아래와 같이 media 속성을 해석해야만 합니다. Future versions of HTML may introduce new values and may allow parameterized values. To facilitate the introduction of these extensions, conforming user agents must be able to parse the media attribute value as follows:

1. 값은 콤마로 구분한 항목의 리스트여야 합니다. 예를 들어,

   media="screen, 3d-glasses, print and resolution > 90dpi"

   이는 아래 형태와 매핑됩니다 :

   "screen"
   "3d-glasses"
   "print and resolution > 90dpi"

2. 각 항목은, US ASCII 문자 [a-zA-Z] (유니코드 10진수 65-90, 97-122), 숫자 [0-9] (유니코드 10진수 30-39), 혹은 하이픈 (45)로 시작하는 첫번째 문자 외에는 잘립니다. 현재 예시에서는 다음과 같이 됩니다. Each entry is truncated just before the first character that isn't a US ASCII letter [a-zA-Z] (Unicode decimal 65-90, 97-122), digit [0-9] (Unicode hex 30-39), or hyphen (45). In the example, this gives:

   "screen"
   "3d-glasses"
   "print"

이 스펙문서에서 설명하는 미디어 쿼리는 HTML4에서 정의한 메커니즘을 기본으로 삼습니다. 미디어 쿼리 문법은 HTML 4에서 이미 정의해둔 미디어 쿼리 문법에 적합합니다. HTML4 media 속성은, XHTML 및 일반적인 XML에도 존재합니다. 같은 문법을 CSS ‘@media’ 및 ‘@import’규칙에서도 사용할 수 있습니다.

Media queries, as described in this specification, build on the mechanism outlined in HTML4. The syntax of media queries fit into the media type syntax reserved in HTML4. The media attribute of HTML4 also exists in XHTML and generic XML. The same syntax can also be used inside in the ‘@media’ and ‘@import’ rules of CSS.

그러나, 미디어 쿼리 해석규칙은 CSS에서 사용되는 미디어 쿼리와 정합성을 가지기 때문에 HTML4 규칙과는 호환성이 없습니다.

However, the parsing rules for media queries are incompatible with those of HTML4 so that they are consistent with those of media queries used in CSS.

HTML5 [HTML5] (이 문서를 공개할 때는 아직 작성중)는, 미디어 쿼리 스펙을 직접 참조하고 있어, HTML의 규칙을 변경하고 있습니다. HTML5 [HTML5] (at the moment of writing still work in progress) references the Media Queries specification directly and thus updates the rules for HTML.

2. 미디어 쿼리

미디어 쿼리는 미디어 타입과 특정 미디어 타입의 특성을 체크하는 0개 이상의 표현식으로 구성합니다.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

이 섹션에서 작성하는 미디어 쿼리에 관한 내용은 문법 섹션을 준수하고 있다는 걸 전제로 합니다. 문법을 준수하지 않는 미디어 쿼리에 대해서는 에러 처리 섹션에 작성되어 있습니다. 즉 이 섹션에서 설명하는 요건보다 문법이 먼저입니다.

Statements regarding media queries in this section assume the syntax section is followed. Media queries that do not conform to the syntax are discussed in the error handling section. I.e. the syntax takes precedence over requirements in this section.

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

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

미디어 쿼리는 값이 true거나 false인 표현식입니다. 미디어 쿼리는 미디어 쿼리의 미디어 타입이 유저 에이전트가 동작하고 있는 디바이스의 미디어 타입 ("Applies to" 라인에 정의되어 있는)과 일치하며, 미디어 쿼리 내 모든 식이 true라면 true입니다.

A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true.

모든 미디어 타입에 적용 가능한 미디어 쿼리는, 단축문법을 사용하고 있으며, ‘all’ 키워드는 (‘and’와 함께) 생략 가능합니다. 즉 미디어 타입을 명시하지 않은 경우에는 ‘all’입니다.

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

여러 미디어 쿼리를 하나의 미디어 쿼리 목록으로 묶을 수 있습니다. 콤마로 구분한 리스트 내 미디어 쿼리 중 하나 이상이 true라면 전체 리스트는 true이며, 그 외에는 모두 false입니다. 미디어 쿼리 문법에서 콤마는 논리 OR을 나타내며, ‘and’ 키워드는 논리 AND를 나타냅니다.

Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND.

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

미디어 쿼리 리스트가 공백(즉, 선언에 공백문자 혹은 빈 문자열)인 경우 true로 간주됩니다.

If the media query list is empty (i.e. the declaration is the empty string or consists solely of whitespace) it evaluates to true.

@media all { … }
@media { … }

논리 NOT은 ‘not’ 키워드를 통해 표현합니다. 미디어 쿼리 앞에 ‘not’ 키워드가 존재한다면, 결과는 부정으로 됩니다. 즉, ‘not’키워드가 없는 미디어 쿼리가 false인 경우의 반대와 동일합니다. (HTML4에서 설명하는 바와 같이) 미디어 타입만을 지원하는 유저 에이전트는 ‘not’ 키워드를 알아보지 않고, 따라서 관련 스타일 시트는 적용되지 않습니다.

The logical NOT can be expressed through the ‘not’ keyword. The presence of the keyword ‘not’ at the beginning of the media query negates the result. I.e., if the media query had been true without the ‘not’ keyword it will become false, and vice versa. User agents that only support media types (as described in HTML4) will not recognize the ‘not’ keyword and the associated style sheet is therefore not applied.

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

‘only’ 키워드를 사용해서 오래된 유저 에이전트에서 스타일 시트를 보이지 않게 할 수 있습니다. 유저 에이전트는 ‘only’로 시작하는 미디어 쿼리를, ‘only’라는 키워드가 존재하지 않는 것 마냥 처리해야합니다.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

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

미디어 쿼리 문법은 HTML, XHTML, XML [XMLSTYLE] 및 CSS의 @import와 @media 룰에서 사용합니다.

The media queries syntax can be used with HTML, XHTML, XML [XMLSTYLE] and the @import and @media rules of CSS.

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

<link rel="stylesheet" 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) { … }

유저에이전트가 동작하고 있는 디바이스에서 적용할 수 없는 미디어 특성이 존재하는 경우, 해당 미디어 특성과 관련하는 모든 식은 false가 됩니다.

If a media feature does not apply to the device where the UA is running, expressions involving the media feature will be false.

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

디바이스에서 허용하지 않는 단위를 사용한 경우, 식은 항상 false가 됩니다.

Expressions will always be false if the unit of measurement does not apply to the device.

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

순환 의존관계를 피하기 위해, 식을 평가하기 위한 스타일시트를 적용할 필요는 없습니다. 예를 들어, print 문서의 종횡비는, 스타일 시트의 영향을 받을 수도 있지만, ‘device-aspect-ratio’ 관련 식은, 유저 에이전트의 디폴트 종횡비에 맞출 것입니다.

To avoid circular dependencies, it is never necessary to apply the style sheet in order to evaluate expressions. For example, the aspect ratio of a printed document may be influenced by a style sheet, but expressions involving ‘device-aspect-ratio’ will be based on the default aspect ratio of the user agent.

필수조건은 아니지만 유저 에이전트에서 디바이스가 랜드스케이프 모드에서 포트레이트 모드로 변경되는 등 유저의 환경 변화에 대응하여 페이지를 재계산해 레이아웃을 다시 잡을 것으로 기대합니다.

3. 문법

미디어 쿼리 문법은 CSS2 grammar에서 설명하고 있습니다. 여기서 정의하지 않은 문법은 CSS2에서 정의하고 있습니다. 아래에 정의되어있는 media_query_list 생성 규칙은, CSS2의 media_list 생성 규칙을 교체하는 것입니다. [CSS21]

The media query syntax is described in terms of the CSS2 grammar. As such, rules not defined here are defined in CSS2. The media_query_list production defined below replaces the media_list production from CSS2. [CSS21]

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
media_feature
 : IDENT
 ;

CSS2에서 정의한 COMMENT 토큰은, (가독성을 갖기 위해) 문법 내에서 나타나지 않지만, 다른 토큰 사이 어디에라도 몇번이든지 나타날 수 있습니다. [CSS21]

COMMENT tokens, as defined by CSS2, do not occur in the grammar (to keep it readable), but any number of these tokens may appear anywhere between other tokens. [CSS21]

새로운 정의 내용이 추가되었습니다.

The following new definitions are introduced:

L  l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|[ \t\r\n\f])?|\\y

새로운 토큰이 추가되었습니다.

The following new tokens are introduced:

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

RESOLUTION이 CSS2 term 생성 규칙에 추가되어있습니다.

RESOLUTION is to be added to the CSS2 term production.

CSS 스타일 시트는 일반적으로 대소문자를 구분하지 않으며, 이는 미디어 쿼리에서도 동일합니다.

CSS style sheets are generally case-insensitive, and this is also the case for media queries.

구문의 적합 외에 개별 미디어 쿼리가 준수하는 것으로 간주되기 위해서는 관련 스펙에 따라 미디어 타입과 특성을 사용해야할 필요가 있습니다.

In addition to conforming to the syntax, each media query needs to use media types and media features according to their respective specification in order to be considered conforming.

@media all { body { background:lime } }
@media example { body { background:red } }

3.1. 에러 처리

올바르지 않은 미디어 쿼리에 대해 유저 에이전트는 이 섹션에서 설명하는 규칙을 지킬 필요가 있습니다.

For media queries that are not conforming user agents need to follow the rules described in this section.

• 알 수 없는 미디어타입 알 수 없는 미디어 타입은 false로 간주합니다. 사실 상, 디바이스의 미디어 타입과 일치하지 않고 알려진 미디어 타입은 모두 동일하게 처리합니다.

  Unknown media types. Unknown media types evaluate to false. Effectively, they are treated identically to known media types that do not match the media type of the device.

  "unknown" 미디어 쿼리가 실제로 지원하는 미디어 타입이 아닌 경우 unknown은 false입니다. 마찬가지로 "not unknown"은 true입니다.

  알 수 없는 미디어 타입은, IDENT 생성 규칙과 실제로 일치하지 않는 미디어 타입과는 다릅니다. 이는, 부정 미디어 쿼리 섹션에 해당합니다.

• 알 수 없는 미디어 특성. 유저 에이전트는 정의된 미디어 특성 1개가 알려지지 않은 경우, 미디어 쿼리를 "not all"로 표현합니다.

  Unknown media features. User agents are to represent a media query as "not all" when one of the specified media features is not known.

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

  이 예에서 첫번째 미디어 쿼리는 "not all"로 간주되어 false가 됩니다. 그리고 2번째 미디어 쿼리는 사실상 첫번째 쿼리가 지정되지 않은 것과 동일하게 평가됩니다.

  In this example, the first media query will be represented as "not all" and evaluate to false and the second media query is evaluated as if the first had not been specified, effectively.

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

  ‘orientation’ 특성은 ‘min-’ 접두사를 지원하지 않기 때문에 이 쿼리는 "not all"로 표현됩니다.

• 알 수 없는 미디어 특성 값. 유저에이전트는 알 수 없는 미디어 특성과 마찬가지로 미디어 특성 값 1개가 알 수 없는 경우, 미디어 쿼리를 "not all"로 표현합니다.

  Unknown media feature values. As with unknown media features, user agents are to represent a media query as "not all" when one of the specified media feature values is not known.

  (color:20example) 미디어 쿼리는 ‘color’ 미디어 특성에 알 수 없는 값을 사용하여 "not all"로 표현합니다.

  이 미디어 쿼리는 ‘width’ 미디어 특성에서 음수 길이를 허용하지 않기 때문에 "not all"로 표현합니다.

  @media (min-width: -100px) { … }

• 올바르지 않은 미디어 쿼리. 유저 에이전트는 미디어의 마지막까지 읽고 미디어를 해석하는 동안 (), [], {}, "", and '' 매칭 규칙에 따르거나, 에스케이프를 적절히 처리해나가면서 발생한 예기치 않은 토큰을 처리합니다. 예기치않은 토큰을 포함한 미디어 쿼리는 "not all"로 표현합니다. [CSS21]

  Malformed media query. User agents are to handle unexpected tokens encountered while parsing a media query by reading until the end of the media query, while observing the rules for matching pairs of (), [], {}, "", and '', and correctly handling escapes. Media queries with unexpected tokens are represented as "not all". [CSS21]

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

  아래 예제는,‘and’와 식 사이에 공백문자가 없는 것을 허용하지 않기 때문에 올바르지 않은 미디어 쿼리입니다. (이는 함수 표기 문법에 이미 정의되어 있습니다)

  @media all and(color) { … }

  미디어 쿼리는 호스트 언어의 에러 처리 규칙에도 따르기를 기대합니다.

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

  세미콜론이 CSS @media 규칙을 종료시키기 때문에 적용되지 않습니다.

4. 미디어 특성

문법적으로 미디어 특성은 CSS 속성과 닮아있습니다. 미디어 특성은 이름과 특정 값을 가집니다. 그러나 CSS 속성과 미디어 특성에는 몇가지 큰 차이가 있습니다.

Syntactically, media features resemble CSS properties: they have names and accept certain values. There are, however, several important differences between properties and media features:

• CSS 속성은 선언 내에서 사용하며 문서의 표현방법에 대한 정보를 제공합니다. 미디어 특성은, 표현식 내에서 사용하며 출력 디바이스의 요건을 설명합니다.
  Properties are used in declarations to give information about how to present a document. Media features are used in expressions to describe requirements of the output device.
• 대부분의 미디어 특성은 ‘min-’이나 ‘max-’ 접두어를 "~이상", "~이하"를 표현할 때 옵션으로 사용할 수 있도록 허용합니다. 이 문법은 HTML이나 XML과 충돌 가능성이 있는 "<"와 ">" 문자를 피하기 위해 사용합니다. 접두어가 붙어있는 미디어 특성은 접두어와 함께 사용하는 것이 가장 일반적이지만, 단독으로 사용되기도 합니다.
  Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.
• CSS 속성은 선언을 형식화하기 위해 항상 값을 필요로 합니다. 한편 미디어 특성은 값 없이 사용하는 게 가능합니다. 미디어 특성의 feature인 경우, 0 혹은 단위를 가진 0이 아닌 (즉0, 0px, 0em이 아닌) 값 x에 대해서(feature:x) true인 경우 (feature)는 true입니다. max/min 접두어가 붙은 미디어 특성은 값을 반드시 가져야합니다. min/max 접두어가 붙은 미디어 특성을 값 없이 사용하면, 미디어 쿼리는 올바르지 않다고 간주합니다.
  Properties always require a value to form a declaration. Media features, on the other hand, can also be used without a value. For a media feature feature, (feature) will evaluate to true if (feature:x) will evaluate to true for a value x other than zero or zero followed by a unit identifier (i.e., other than 0, 0px, 0em, etc.). Media features that are prefixed by min/max cannot be used without a value. When a media feature prefixed with min/max is used without a value it makes the media query malformed.
• CSS 속성에서는 다수의 다른 값을 포함하는 계산식 등 복잡한 값을 가질 수 있습니다. 미디어 특성에서는 1개의 키워드, 1개의 값, 단위가 붙은 숫자 등 1개의 값만 가질 수 있습니다. (다만 ‘aspect-ratio’와 ‘device-aspect-ratio’는 제외입니다)
  Properties may accept more complex values, e.g., calculations that involve several other values. Media features only accept single values: one keyword, one number, or a number with a unit identifier. (The only exceptions are the ‘aspect-ratio’ and ‘device-aspect-ratio’ media features.)

이 스펙문서에서는 시각 및 청각 디바이스에서 사용 가능한 미디어 특성을 정의하고 있습니다. 비슷하게 미디어 특성은 aural 미디어 타입에서 대해서도 정의하고 있습니다.

4.1. width

‘width’ 미디어 특성은 출력 디바이스의 대상 디스플레이 영역의 width를 설명합니다. 연속 미디어인 경우, 현재 표시되어 있는 스크롤 바(가 존재한다면)의 사이즈를 포함한 뷰포트의 (CSS2 섹션 9.9.1에서 설명하는[CSS21]) width입니다. 페이지 미디어에서는 페이지 박스 (CSS2 섹션 13.2에서 설명하는[CSS21])의 width입니다.

the ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any). For paged media, this is the width of the page box (as described by CSS2, section 13.2 [CSS21]).

<length>에 음수는 사용할 수 없습니다.

A specified <length> cannot be negative.

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

@media screen and (min-width: 400px) and (max-width: 700px) { … }

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

4.2. height

‘height’ 미디어 특성은 출력 디바이스에서 디스플레이 영역의 높이를 의미합니다. 계속하는 미디어에서, (만약 존재한다면) 현재 렌더링된 스크롤 바의 사이즈를 포함한 뷰포트의 높이입니다. 페이지 미디어에서, 페이지 박스의 높이입니다.

‘height’ media feature describes the height of the targeted display area of the output device. For continuous media, this is the height of the viewport including the size of a rendered scroll bar (if any). For paged media, this is the height of the page box.

<length>에 음수는 사용할 수 없습니다.

A specified <length> cannot be negative.

4.3. device-width

‘device-width’ 미디어 특성은 출력 디바이스 렌더링 표면의 너비를 나타냅니다. 이어지는 콘텐츠에서 스크린의 너비를 의미합니다. 페이지 미디어에서 페이지 시트 사이즈의 너비를 의미합니다.

The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen. For paged media, this is the width of the page sheet size.

<length>에 음수는 사용할 수 없습니다.

A specified <length> cannot be negative.

@media screen and (device-width: 800px) { … }

4.4. device-height

‘device-height’ 미디어 특성은 출력 디바이스 렌더링 표면의 높이를 나타냅니다. 이어지는 콘텐츠에서 스크린의 높이를 의미합니다. 페이지 미디어에서 페이지 시트 사이즈의 높이를 의미합니다.

The ‘device-height’ media feature describes the height of the rendering surface of the output device. For continuous media, this is the height of the screen. For paged media, this is the height of the page sheet size.

<length>에 음수는 사용할 수 없습니다.

A specified <length> cannot be negative.

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

4.5. orientation

‘orientation’ 미디어 특성은 ‘width’ 미디어 특성의 값보다 ‘height’ 미디어 특성의 값이 크거나 같을 때를 나타내는 값인 ‘portrait’와 그 외의 ‘orientation’을 나타내는 ‘landscape’가 있습니다.

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

4.6. aspect-ratio

‘aspect-ratio’ 미디어 특성은 ‘width’ 미디어 특성 값 및 ‘height’ 미디어 특성 값의 비율을 정의합니다.

The ‘aspect-ratio’ media feature is defined as the ratio of the value of the ‘width’ media feature to the value of the ‘height’ media feature.

4.7. device-aspect-ratio

‘device-aspect-ratio’ 미디어 특성은 ‘device-width’ 미디어 특성 값 및 ‘device-height’ 미디어 특성 값의 비율을 정의합니다.

The ‘device-aspect-ratio’ media feature is defined as the ratio of the value of the ‘device-width’ media feature to the value of the ‘device-height’ media feature.

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

4.8. color

‘color’ 미디어 특성은 출력 디바이스의 컬러 컴포넌트 당 비트의 갯수를 나타냅니다. 만약 디바이스가 컬러 디바이스가 아니라면, 값은 0입니다.

The ‘color’ media feature describes the number of bits per color component of the output device. If the device is not a color device, the value is zero.

<정수>에 음수는 사용할 수 없습니다.

A specified <integer> cannot be negative.

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

@media all and (min-color: 2) { … }

만약 컬러 컴포넌트가 각각 다른 갯수의 비트를 표현할 경우, 그 수 중 제일 작은 숫자만 사용합니다.

인덱스 컬러를 가진 디바이스에서는, 룩업 테이블 내 컬러 컴포넌트 당 비트의 갯수가 가장 작은걸 사용합니다.

여기에서 설명하는 기능은, 디스플레이 수준에서 컬러 기능만을 표현합니다. 이 이상의 기능이 필요한 경우, 이후에 지원할지도 모르는 미디어 특성을 RFC 2531 [RFC2531]에서 제공하고 있습니다.

4.9. color-index

‘color-index’ 미디어 특성은, 출력 디바이스의 컬러 참조 테이블의 항목수를 설명합니다. 만약 디바이스에 어떤 컬러 참조 테이블도 없을 경우, 값은 0입니다.

<정수>에 음수는 사용할 수 없습니다.

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

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

4.10. monochrome

‘monochrome’ 미디어 특성은 흑백 프레임 버퍼의 픽셀당 비트수를 나타냅니다. 만약 디바이스가 흑백디바이스가 아니라면, 출력 디바이스값은 0입니다.

<정수>에 음수는 사용할 수 없습니다.

@media all and (monochrome) { … }
@media all and (min-monochrome: 1) { … }

@media all and (min-monochrome: 2) { … }

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

4.11. resolution

‘resolution’ 미디어 특성은 출력 디바이스의 해상도를 설명합니다. 즉 픽셀의 밀도를 나타냅니다. 사각형이 아닌 픽셀을 가진 디바이스에서 쿼리를 실행할 때, ‘min-resolution’ 쿼리에서는 최소밀도를 ‘max-resolution’ 쿼리에서는 최대 밀도를 비교해야만 합니다. ("min-"과 "max-" 접두어를 제외한) ‘resolution’ 쿼리는 사각형이 아닌 픽셀을 가진 디바이스와는 절대로 매치하지 않습니다.

The ‘resolution’ media feature describes the resolution of the output device, i.e. the density of the pixels. When querying devices with non-square pixels, in ‘min-resolution’ queries the least-dense dimension must be compared to the specified value and in ‘max-resolution’ queries the most-dense dimensions must be compared instead. A ‘resolution’ (without a "min-" or "max-" prefix) query never matches a device with non-square pixels.

프린터에서 이는 스크린 해상도(임의의 색 인쇄 도트 해상도)에 적용됩니다.

For printers, this corresponds to the screening resolution (the resolution for printing dots of arbitrary color).

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

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

4.12. scan

The ‘scan’ 미디어 특성은 "tv" 출력 디바이스의 스캐닝 프로세스를 설명합니다.

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

4.13. grid

‘grid’ 미디어 특성은 출력 디바이스가 그리드 혹은 비트맵인지 쿼리를 사용하기 위해 사용합니다. 만약 출력 디바이스가 그리드 베이스(즉, "tty" 터미널, 하나의 정해진 폰트로 보여지는 휴대폰 디스플레이)인 경우 값은 1입니다. 그렇지 않은 경우 0입니다.

(-0을 포함한) 0과 1만이 유효값입니다. 따라서 이 외에는 모두 올바르지 않은 미디어 쿼리입니다.

@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

5. 값

이 스펙문서에서는 두개의 새로운 값을 소개합니다.

<ratio> 값은 양수 (0 및 음수가 아닌) <정수>로 뒤에 옵션적으로 공백문자, 뒤에 사선‘/’, 뒤에 옵션적으로 공백문자, 뒤에 양수 <정수>가 이어집니다.

<resolution> 값은 양수 <number>로, 바로 뒤에 단위(‘dpi’나 ‘dpcm’)가 붙습니다.

이 스펙에서 사용하는 공백, <정수>, <number> 및 다른 값은 CSS2.1.에서 표준으로 정의한 CSS의 다른 파트와 동일합니다, [CSS21]

6. 단위

미디어 쿼리에서 사용하는 단위는 CSS의 다른 파트와 동일합니다. 예를 들어, pixel 유닛은 CSS 픽셀을 나타내며 물리적인 픽셀을 의미하지 않습니다.

미디어 쿼리에서 상대적인 단위는 기본값을 기준으로 합니다. 이는 단위가 선언 결과에 기준을 두지 않는 것을 의미합니다. 예를 들어 HTML에서 ‘em’ 단위는 ‘font-size’의 기본 값에 상대적입니다.

6.1. 해상도

‘dpi’와 ‘dpcm’ 단위는 출력 디바이스의 해상도를 표현합니다. 즉 디바이스 픽셀의 밀도입니다. 해상도 단위는 다음과 같습니다:

dpi

CSS ‘inch’ 당 도트수

dpcm

‘centimeter’ 당 도트수

이 스펙문서에서, 이 단위는 오로지 ‘resolution’ 미디어 특성을 위해 사용됩니다.

Acknowledgments

This specification is the product of the W3C Working Group on Cascading Style Sheets.

Comments from Björn Höhrmann, Christoph Päper, Chris Lilley, Simon Pieters, Rijk van Geijtenbeek, Sigurd Lerstad, Arve Bersvendsen, Susan Lesch, Philipp Hoschka, Roger Gimson, Steven Pemberton, Simon Kissane, Melinda Grant, and L. David Baron improved this specification.

참고 문서

표준 참고 문서

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

다른 참고 문서

[HTML401]

Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224

[HTML5]

Ian Hickson. HTML5. 29 March 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-html5-20120329/

[RFC2531]

G. Klyne; L. McIntyre. Content Feature Schema for Internet Fax. March 1999. Internet RFC 2531. URL: http://www.ietf.org/rfc/rfc2531.txt

[XMLSTYLE]

James Clark; Simon Pieters; Henry S. Thompson Associating Style Sheets with XML documents 1.0 (Second Edition) 28 October 2010. W3C Recommendation. URL: http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/