CSS 조건부 규칙 모듈 레벨 3

1. 소개

1.1. 배경

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

[CSS21]은 하나의 조건부 그룹 규칙 유형, 즉 @media 규칙을 정의하며, 그 안에는 스타일 규칙만(다른 @-규칙은 아님) 허용합니다. @media 규칙은 미디어 전용 스타일 시트를 사용할 수 있게 해주며, 이는 @import 및 link와 같은 스타일 시트 연결 기능을 통해서도 제공됩니다. @media 규칙의 내용에 대한 제한 때문에 활용도가 떨어졌습니다. 이러한 제한으로 인해, 미디어 전용 스타일 시트에서 @-규칙을 사용하려는 저자들은 각 미디어마다 별도의 스타일 시트를 사용해야 했습니다.

이 명세는 조건부 그룹 규칙의 내용에 대한 규칙을 확장하여 다른 @-규칙도 허용함으로써, 저자들이 @-규칙이 포함된 CSS 기능과 미디어 전용 스타일 시트를 하나의 스타일 시트에서 결합할 수 있도록 합니다.

이 명세는 또한 저자와 사용자의 요구를 반영하여 추가적인 조건부 그룹 규칙 유형인 @supports를 정의합니다.

@supports 규칙은 CSS 속성과 값에 대한 구현 지원 여부에 따라 CSS를 조건부로 적용할 수 있게 해줍니다. 이 규칙 덕분에 저자들은 새로운 CSS 기능을 더 쉽게 사용할 수 있고, 해당 기능을 지원하지 않는 구현에 대해 적절한 폴백을 제공할 수 있습니다. 이는 새로운 레이아웃 메커니즘을 제공하는 CSS 기능이나, 관련 스타일 집합이 속성 지원 여부에 따라 조건부로 적용되어야 하는 경우에 특히 중요합니다.

1.2. 모듈 상호작용

이 모듈은 @media 규칙 기능을 [CSS21] 7.2.1절에서 정의된 내용에 따라 대체하고 확장하며, [MEDIAQUERIES-4] 1절에서 비규범적으로 이루어졌던 수정을 통합합니다.

2. 조건부 그룹 규칙의 처리

이 명세는 여러 CSS at-규칙을 정의하며, 이들은 조건부 그룹 규칙이라 불립니다. 이 규칙들은 조건과 여러 CSS 규칙 그룹을 연결합니다. 각기 다른 규칙은 다양한 유형의 조건을 검사할 수 있지만, 조건이 참일 때와 거짓일 때 그 내용이 어떻게 사용되는지에 대한 공통 동작을 공유합니다.

@media print {
  /* 인쇄 시 내비게이션 컨트롤 숨기기 */
  #navigation { display: none }
}

각 조건부 그룹 규칙에는 조건이 있으며, 이 조건은 언제든지 참 또는 거짓으로 평가됩니다. 조건이 참일 때 CSS 프로세서는 반드시 그룹 규칙 내부의 규칙을 그룹 규칙 위치에 있는 것처럼 적용해야 하며, 조건이 거짓이면 CSS 프로세서는 그룹 규칙 내부의 어떤 규칙도 적용해서는 안 됩니다. 조건의 현재 상태는 CSS 오브젝트 모델(CSSOM)에 영향을 미치지 않으며, 그룹 규칙의 내용은 항상 그룹 규칙 내에 남아 있습니다.

즉, 여러 조건부 그룹 규칙이 중첩된 경우, 두 규칙 모두의 조건이 참일 때에만 내부의 규칙이 적용됩니다.

@media print { /* rule (1) */
  /* 인쇄 시 내비게이션 컨트롤 숨기기 */
  #navigation { display: none }
  @media (max-width: 12cm) { /* rule (2) */
    /* 좁은 페이지에 인쇄할 때 노트를 흐름에 남김 */
    .note { float: none }
  }
}

조건부 그룹 규칙의 조건이 변경되면, CSS 프로세서는 해당 규칙이 이제 적용되는지 혹은 더 이상 적용되지 않는지를 반드시 반영해야 하며, 단, 계산된 값의 효과가 그 값의 수명 이후에도 남아 있는 속성(예: [CSS3-TRANSITIONS] 및 [CSS3-ANIMATIONS]의 일부 속성 등)의 경우는 예외입니다.

3. 조건부 그룹 규칙의 내용

모든 조건부 그룹 규칙은 블록 내에 <rule-list>를 받아들이도록 정의되어 있으며, 스타일 시트의 최상위에서 허용되는 모든 규칙을(별도의 제한이 없는 한) 허용합니다. (예를 들어, @import 규칙은 반드시 스타일 시트의 실제 맨 앞에 있어야 하므로, 다른 규칙 내부에는 올 수 없습니다.)

<rule-list> 내부에 잘못되었거나 알 수 없는 규칙은 무효로 간주하고 무시해야 하지만, 조건부 그룹 규칙 자체를 무효로 만들지는 않습니다.

조건부 그룹 규칙에서 사용되는 네임스페이스 접두사는 반드시 선언되어야 하며, 그렇지 않으면 무효입니다.

@namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
  // do something }

@supports (content: attr(n|tooltip)) {
  // do something }

4. 조건부 그룹 규칙의 위치

조건부 그룹 규칙은 스타일 규칙이 허용되는 곳이면 어디서나 (스타일 시트의 최상위, 그리고 다른 조건부 그룹 규칙 내부 모두) 사용할 수 있습니다. CSS 프로세서는 반드시 이러한 규칙을 위에서 설명한 대로 처리해야 합니다.

스타일 규칙 뒤에 허용되지 않는 어떤 at-규칙 (예: @charset, @import, @namespace 규칙) 은 조건부 그룹 규칙 뒤에도 허용되지 않으며, 그러한 위치에 있으면 무효가 됩니다.

5. 미디어 전용 스타일 시트: @media 규칙

@media 규칙은 조건부 그룹 규칙이며, 조건은 미디어 쿼리입니다. 구문은 다음과 같습니다:

@media <media-query-list> {
  <rule-list>
}

이는 @media라는 at-키워드 뒤에 (비어 있을 수도 있는) 미디어 쿼리 목록 ([MEDIAQUERIES-4]에서 정의됨)이 오고, 임의의 규칙이 포함된 블록이 뒤따릅니다. 이 규칙의 조건은 미디어 쿼리의 결과입니다.

@media screen and (min-width: 35em),
       print and (min-width: 40em) {
  #section_navigation { float: left; width: 10em; }
}

6. 기능 쿼리: @supports 규칙

@supports 규칙은 조건부 그룹 규칙으로, 조건은 사용자 에이전트가 CSS property:value 쌍을 지원하는지 여부를 검사합니다. 저자는 이를 사용하여 새로운 기능이 사용 가능할 때는 그 기능을 사용하고 지원되지 않을 때는 자연스럽게 폴백되도록 스타일 시트를 작성할 수 있습니다. 이러한 쿼리를 CSS 기능 쿼리 또는 (비공식적으로) supports 쿼리라고 부릅니다.

참고: CSS에는 지원되지 않는 속성이나 값을 무시하는 것과 같이 자연스럽게 폴백되는 기존 메커니즘이 있으나, 많은 스타일 집합이 특정 기능 지원 여부와 연계되어야 할 때(예를 들어 새로운 레이아웃 시스템 기능 사용 시)에는 이러한 메커니즘만으로는 충분하지 않을 수 있습니다.

@supports 규칙의 조건 구문은 <media-condition> ([MEDIAQUERIES-4]에서 정의됨)과 유사하지만, "unknown" 값 논리는 없습니다:

• 부정(negation)이 필요한 이유는 새로운 기능 스타일과 폴백 스타일을 (at-규칙 구문의 전방 호환 문법 규칙 내에서) 서로 분리할 수 있게 해주어, 서로를 오버라이드하지 않도록 하기 위함입니다.

• 논리곱(and)이 필요한 이유는 여러 필수 기능을 동시에 검사할 수 있게 하기 위함입니다.

• 논리합(or)은 한 세트의 스타일에 여러 대체 기능(특히 일부 대안이 공급업체 접두어 속성/값인 경우)이 있을 때 필요합니다.

따라서 @supports 규칙의 구문은 property:value 쌍, 임의의 논리곱(and), 논리합(or), 부정(not)을 검사할 수 있게 허용합니다.

@supports 규칙의 구문은 다음과 같습니다:

@supports <supports-condition> {
  <rule-list>
}

<supports-condition>의 정의는 다음과 같습니다:

<supports-condition> = not <supports-in-parens>
                     | <supports-in-parens> [ and <supports-in-parens> ]*
                     | <supports-in-parens> [ or <supports-in-parens> ]*
<supports-in-parens> = ( <supports-condition> ) | <supports-feature> | <general-enclosed>
<supports-feature> = <supports-decl>
<supports-decl> = ( <declaration> )

위 문법은 전방 호환성을 위해 의도적으로 매우 느슨하게 되어 있으며, <general-enclosed> 생산식이 향후 확장성을 크게 허용하기 때문입니다. 위의 문법에 따라 구문 분석되지 않는(<general-enclosed> 생산식 포함) 어떤 @supports 규칙도 무효입니다. 스타일 시트는 반드시 이러한 규칙을 사용하지 않아야 하며, 프로세서는 반드시 해당 규칙(내용 전체 포함)을 무시해야 합니다.

이러한 각 문법 용어는 다음과 같이 불리언 결과와 연결되어 있습니다:

<supports-condition>

<supports-in-parens>

결과는 자식 하위식의 결과와 같습니다.

not <supports-in-parens>

결과는 <supports-in-parens> 용어의 부정입니다.

테스트

Not은 supports 조건을 부정합니다.

• at-supports-009.html (실시간 테스트) (소스)
• at-supports-010.html (실시간 테스트) (소스)
• css-supports-016.xht (실시간 테스트) (소스)

---

Not 뒤에는 반드시 공백이 와야 합니다.

• at-supports-014.html (실시간 테스트) (소스)
• css-supports-038.xht (실시간 테스트) (소스)

---

Not은 괄호가 필요합니다.

• css-supports-017.xht (실시간 테스트) (소스)
• css-supports-018.xht (실시간 테스트) (소스)

---

<supports-in-parens> [ and <supports-in-parens> ]*

모든 <supports-in-parens> 자식 용어가 참이면 결과는 참이고, 아니면 거짓입니다.

테스트

And 조건은 연결된 모든 조건이 참일 때만 참입니다.

• at-supports-007.html (실시간 테스트) (소스)
• at-supports-010.html (실시간 테스트) (소스)
• at-supports-012.html (실시간 테스트) (소스)
• css-supports-008.xht (실시간 테스트) (소스)
• css-supports-009.xht (실시간 테스트) (소스)
• css-supports-010.xht (실시간 테스트) (소스)
• css-supports-012.xht (실시간 테스트) (소스)

---

And는 괄호가 필요합니다.

• css-supports-019.xht (실시간 테스트) (소스)

---

<supports-in-parens> [ or <supports-in-parens> ]*

모든 <supports-in-parens> 자식 용어가 거짓이면 결과는 거짓이고, 그렇지 않으면 참입니다.

테스트

Or 조건은 연결된 조건 중 하나라도 참이면 참입니다.

• at-supports-008.html (실시간 테스트) (소스)
• at-supports-010.html (실시간 테스트) (소스)
• at-supports-013.html (실시간 테스트) (소스)
• css-supports-006.xht (실시간 테스트) (소스)
• css-supports-007.xht (실시간 테스트) (소스)
• css-supports-011.xht (실시간 테스트) (소스)
• css-supports-021.xht (실시간 테스트) (소스)

---

Or 뒤에는 반드시 공백이 와야 합니다.

• at-supports-043.html (실시간 테스트) (소스)
• css-supports-039.xht (실시간 테스트) (소스)

---

Or는 괄호가 필요합니다.

• css-supports-029.xht (실시간 테스트) (소스)
• css-supports-030.xht (실시간 테스트) (소스)

---

<supports-decl>

UA가 괄호 안의 선언을 지원하면 결과는 참입니다.

테스트

Supports 조건은 선언이 지원될 때만 참입니다.

• at-supports-001.html (실시간 테스트) (소스)
• at-supports-017.html (실시간 테스트) (소스)
• at-supports-018.html (실시간 테스트) (소스)
• css-supports-001.xht (실시간 테스트) (소스)

---

선언에는 세미콜론을 포함할 수 없습니다.

• at-supports-038.html (실시간 테스트) (소스)
• at-supports-039.html (실시간 테스트) (소스)

---

선언 값은 비어 있을 수 있습니다.

• css-supports-022.xht (실시간 테스트) (소스)

---

선언에는 잘못된 !토큰을 포함할 수 없습니다.

• css-supports-043.xht (실시간 테스트) (소스)
• css-supports-044.xht (실시간 테스트) (소스)
• css-supports-045.xht (실시간 테스트) (소스)

---

<general-enclosed>

결과는 거짓입니다.

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

테스트

인식되지 않지만 문법적으로 유효한 조건은 거짓이며, 무효가 아닙니다.

• at-supports-015.html (실시간 테스트) (소스)
• at-supports-046.html (실시간 테스트) (소스)
• css-supports-023.xht (실시간 테스트) (소스)
• css-supports-031.xht (실시간 테스트) (소스)
• css-supports-032.xht (실시간 테스트) (소스)
• css-supports-033.xht (실시간 테스트) (소스)
• css-supports-034.xht (실시간 테스트) (소스)
• css-supports-036.xht (실시간 테스트) (소스)
• css-supports-040.xht (실시간 테스트) (소스)
• css-supports-041.xht (실시간 테스트) (소스)
• css-supports-042.xht (실시간 테스트) (소스)
• css-supports-046.xht (실시간 테스트) (소스)

---

대괄호/괄호는 반드시 균형을 이루어야 합니다.

• css-supports-035.xht (실시간 테스트) (소스)

---

@supports 규칙의 조건은 그 프리루드 내 <supports-condition>의 결과입니다.

@supports ( display: flex ) {
  body, #navigation, #content { display: flex; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

@supports not ( display: flex ) {
  body { width: 100%; height: 100%; background: white; color: black; }
  #navigation { width: 25%; }
  #article { width: 75%; }
}

.noticebox {
  border: 1px solid black;
  padding: 1px;
}
@supports ( box-shadow: 0 0 2px black inset ) or
          ( -moz-box-shadow: 0 0 2px black inset ) or
          ( -webkit-box-shadow: 0 0 2px black inset ) or
          ( -o-box-shadow: 0 0 2px black inset ) {
  .noticebox {
    -moz-box-shadow: 0 0 2px black inset;
    -webkit-box-shadow: 0 0 2px black inset;
    -o-box-shadow: 0 0 2px black inset;
    box-shadow: 0 0 2px black inset; /* unprefixed last */
    /* 위 @supports 규칙을 오버라이드 */
    border: none;
    padding: 2px;
  }
}

and와 or 사이 혼동을 방지하기 위해, 구문에서는 and와 or 모두를 명시적으로 작성해야 합니다(예를 들어, 쉼표나 공백으로 대체하지 않음). 마찬가지로, 우선순위 규칙으로 인한 혼동을 방지하기 위해 and, or, not 연산자를 괄호 없이 혼합하는 것은 허용되지 않습니다.

@supports (transition-property: color) or
          (animation-name: foo) and
          (transform: rotate(10deg)) {
  /* ... */
}

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  /* ... */
}

@supports (transition-property: color) or
          ((animation-name: foo) and
           (transform: rotate(10deg))) {
  /* ... */
}

테스트되는 선언이 식 내에 유일한 경우에는 항상 괄호 안에 있어야 합니다.

@supports display: flex {
  /* ... */
}

@supports (display: flex) {
  /* ... */
}

구문은 필요하지 않은 경우에도 괄호를 추가로 허용합니다. 이 유연성은 저자(예: 식의 일부를 주석 처리할 때)와 저작 도구 모두에 유용할 수 있습니다.

@supports ((display: flex)) {
  /* ... */
}

테스트되는 선언에 !important가 뒤따르는 것은 허용되지만, 선언의 유효성에는 영향을 주지 않습니다.

@supports (display: flex !important) {
  /* ... */
}

6.1. 지원의 정의

미래 호환성을 위해, [CSS21] 섹션 4.1.8 (선언 및 속성)은 잘못된 속성과 값 처리 규칙을 정의합니다. CSS 프로세서가 명세를 구현하지 않거나 부분적으로만 구현하는 경우, 구현하지 않았거나 사용 가능한 수준의 지원이 없는 값의 일부에 대해 이 규칙에 따라 잘못된 속성과 값으로 간주하여 반드시 선언 전체를 파싱 오류로 버려야 합니다.

CSS 프로세서가 지원한다고 간주되는 선언(속성과 값으로 구성)은 해당 선언을 스타일 규칙 내에서 파싱 오류로 버리지 않고 받아들이는 경우입니다. 프로세서가 주어진 속성과 값 모두를 사용 가능한 수준으로 구현하지 않았다면, 절대 해당 선언을 받아들이거나 지원한다고 주장해서는 안 됩니다.

참고: 사용자의 환경설정으로 지원이 사실상 비활성화된 속성이나 값도 이 정의에서는 여전히 지원되는 것으로 간주합니다. 예를 들어, 사용자가 색상을 재정의하는 고대비 모드를 활성화했더라도, CSS 프로세서는 color 속성을 지원하는 것으로 간주하며 color 속성 선언이 실제로는 효과가 없을 수 있습니다. 반면, 실험적 CSS 기능의 지원을 활성화/비활성화하는 개발자 설정은 이 지원 정의에 영향을 미칩니다.

이러한 규칙(및 그 등가성)은 저자가 폴백을 사용할 수 있도록 해주며(나중에 선언으로 재정의되거나, 본 명세의 @supports 규칙이 제공하는 새로운 기능 등), 구현된 기능에 대해 올바르게 동작합니다. 이는 특히 복합 값에 적용되며, 구현은 값의 모든 부분을 구현해야 선언을 지원한다고 간주할 수 있습니다(스타일 규칙 내 또는 @supports 규칙의 선언 조건에서).

7. API

7.1. CSSRule 인터페이스 확장

CSSRule 인터페이스는 아래와 같이 확장됩니다:

partial interface CSSRule {
    const unsigned short SUPPORTS_RULE = 12;
};

7.2. CSSConditionRule 인터페이스

CSSConditionRule 인터페이스는 조건과 구문 블록으로 구성된 모든 “조건부” at-규칙을 나타냅니다.

[Exposed=Window]
interface CSSConditionRule : CSSGroupingRule {
    readonly attribute CSSOMString conditionText;
};

conditionText (타입: CSSOMString)

conditionText 속성은 규칙의 조건을 나타냅니다. 이 조건이 무엇을 하는지는 CSSConditionRule의 파생 인터페이스마다 다르므로, 파생 인터페이스는 이 속성에 대해 다른 동작을 명시할 수 있습니다 (예: 아래의 CSSMediaRule 참조). 별도의 규칙별 동작이 없는 경우, 아래 규칙이 적용됩니다:

conditionText 속성은 get 시, 연관된 조건을 직렬화한 결과를 반환해야 합니다.

테스트

.conditionText는 조건의 직렬화를 반환합니다.

---

7.3. CSSMediaRule 인터페이스

CSSMediaRule 인터페이스는 @media at-규칙을 나타냅니다:

[Exposed=Window]
interface CSSMediaRule : CSSConditionRule {
    [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
    readonly attribute boolean matches;
};

media (타입: MediaList, 읽기전용)

media 속성은 @media at-규칙으로 지정된 미디어 쿼리 목록에 대한 MediaList 객체를 반환해야 합니다.

테스트

.media는 @media 조건과 일치하는 MediaList를 반환합니다.

---

matches (타입: boolean, 읽기전용)

matches 속성은 규칙이 문서에 연결된 스타일 시트 내에 있고 그 Window가 이 규칙의 media 미디어 쿼리와 일치하면 true를 반환하고, 아니면 false를 반환합니다.

테스트

.matches는 미디어 쿼리와 일치하면 boolean을 반환합니다.

---

conditionText (타입: CSSOMString) (CSSConditionRule의 속성에 대한 CSSMediaRule 전용 정의)

conditionText 속성(CSSConditionRule 상위 규칙에서 정의됨)은 get 시, 해당 규칙의 media.mediaText 값을 반환해야 합니다.

테스트

CSSMediaRule.conditionText의 값은 media.mediaText의 값과 일치합니다.

---

7.4. CSSSupportsRule 인터페이스

CSSSupportsRule 인터페이스는 @supports 규칙을 나타냅니다.

[Exposed=Window]
interface CSSSupportsRule : CSSConditionRule {
  readonly attribute boolean matches;
};

matches (타입: boolean, 읽기전용)

matches 속성은 conditionText에 표현된 CSS 기능 쿼리의 평가 결과를 반환합니다.

테스트

CSSSupportsRule.matches는 기능 쿼리와 일치하면 true를 반환합니다.

---

conditionText (타입: CSSOMString) (CSSConditionRule의 속성에 대한 CSSSupportsRule 전용 정의)

conditionText 속성(CSSConditionRule 상위 규칙에서 정의됨)은 get 시, 논리적 단순화 없이 지정된 조건을 반환해야 하며, 반환된 조건은 본 명세를 준수하는 어떤 구현(미래의 <general-enclosed> 확장까지 포함)에서도 지정된 조건과 동일한 결과로 평가되어야 합니다. 즉, 토큰 스트림 단순화(공백을 하나의 공백으로 줄이거나, 선택적임이 알려진 경우 공백 생략 등)는 허용되나, 논리적 단순화(불필요한 괄호 제거, 결과 평가에 기반한 단순화 등)는 허용되지 않습니다.

테스트

CSSSupportsRule.conditionText는 토큰화 단순화가 될 수 있습니다.

---

CSSSupportsRule.conditionText는 다른 단순화가 허용되지 않습니다.

---

7.5. CSS 네임스페이스 및 supports() 함수

CSS 네임스페이스는 다른 곳에 속하지 않는 유용한 CSS 관련 함수를 포함합니다.

partial namespace CSS {
  boolean supports(CSSOMString property, CSSOMString value);
  boolean supports(CSSOMString conditionText);
};

supports(CSSOMString property, CSSOMString value), 반환값 boolean

supports(property, value) 메서드는 property와 value 두 인수로 호출될 때:

1. property가 UA가 지원하는 모든 CSS 속성과 ASCII 대소문자 구분 없이 일치하거나, 사용자 정의 속성 이름 문자열이며, value가 해당 속성의 문법에 맞게 파싱된다면, true를 반환합니다.

2. 그렇지 않으면 false를 반환합니다.

참고: 속성 이름에는 CSS 이스케이프나 공백 처리가 적용되지 않으므로, CSS.supports(" width", "5px") 는 false를 반환합니다(선행 공백이 있으면 속성 이름이 아니기 때문).

참고: !important 플래그는 속성 문법의 일부가 아니며, value가 무효로 파싱되게 하므로, element.style.setProperty()의 value 인수와 마찬가지로 동작합니다.

테스트

CSS.supports(arg1, arg2)는 arg1 속성에 대해 arg2 값 지원 여부를 평가합니다.

---

supports(CSSOMString conditionText), 반환값 boolean

supports(conditionText) 메서드는 conditionText 인수로 호출될 때:

1. conditionText가 파싱 및 <supports-condition>으로 평가되어 true가 반환된다면, true를 반환합니다.

2. 그렇지 않고 conditionText를 괄호로 감싸서 파싱 및 <supports-condition>으로 평가했을 때 true가 반환된다면, true를 반환합니다.

3. 그 외에는 false를 반환합니다.

conditionText 인수의 모든 네임스페이스는 document.querySelector("a|b")처럼 무효로 간주됩니다.

테스트

CSS.supports(arg1)는 지원 조건 arg1을 평가합니다.

---

CSS.supports(arg1)는 괄호를 암시합니다.

• supports-conditionText.html (live test) (source)

---

보안 고려사항

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

개인정보 보호 고려사항

이 명세의 다양한 기능은 주로 @media 규칙과 연관되어 있지만, 일부는 @supports 규칙과도 관련이 있으며, 사용자의 하드웨어, 소프트웨어 및 그 설정과 상태에 대한 정보를 웹 콘텐츠에 제공합니다. 대부분의 정보는 이 명세의 기능이 아닌 [MEDIAQUERIES-4]의 기능을 통해 제공됩니다. 그러나 @supports 규칙은 사용자의 소프트웨어 및 비표준 설정(특정 기능의 활성화/비활성화)에 대한 추가적인 세부 정보를 제공할 수 있습니다.

이 정보의 대부분은 다른 API를 통해서도 결정할 수 있습니다. 하지만, 이 명세의 기능도 웹에서 이러한 정보를 노출하는 방법 중 하나입니다.

이 정보는 집합적으로 사용될 경우 사용자의 지문(fingerprinting) 정확도를 높이는 데 사용될 수 있습니다.

8. 변경사항

다음(편집 이외의) 변경사항이 2022년 1월 13일자 후보 권고 스냅샷 이후 이 명세에 반영되었습니다:

• supports()가 잘못된 사용자 정의 속성 값에 대해 반드시 false를 반환해야 함을 명확히 함
• Web IDL에서 "bool"을 "boolean"으로 수정
• 프로세서가 속성과 값을 모두 지원해야 함을 명확히 함 (이슈 8795)
• @media와 @supports에 .matches 추가 (이슈 4240)
• 파싱 알고리즘 및 블록 생산식 이름을 최신화
• readonly CSSMediaRule.conditionText를 설정하는 절차 제거 (PR 8796)
• conditionText를 읽기 전용으로 만듦

다음(편집 이외의) 변경사항이 2020년 12월 8일자 후보 권고 스냅샷 이후 이 명세에 반영되었습니다:

• 속성 선언을 무시하는 것은 스타일 규칙에만 적용되고 at-규칙에는 적용되지 않음을 명확히 함
• !important는 속성 문법의 일부가 아님을 명확히 함
• 보안과 개인정보 보호를 분리된 절로 분할
• CSS 기능 쿼리와 supports 쿼리 용어를 정의해, @supports 규칙의 조건부 구문을 가리키게 하여 교차 참조를 용이하게 함
• CSS 기능 쿼리의 불린 논리에서 "unknown" 값을 제거하고, 인식되지 않는 구문은 "false"로 정의 (이슈 6175)
• 조건부 그룹 규칙의 위치를 명확화 (이슈 5697)

  조건부 그룹 규칙은 스타일 규칙이 허용되는 모든 곳에서 ( 스타일 시트의 최상위에서, 그리고 내부에서 다른 조건부 그룹 규칙 내부에서도 ) . CSS 프로세서는 위에서 설명한 대로 이러한 규칙을 처리해야 합니다.

  스타일 규칙 뒤에 허용되지 않는 at- 규칙(예: @charset, @import, @namespace)은 조건부 그룹 규칙 뒤에도 허용되지 않으며, 따라서 스타일 시트는 조건부 그룹 규칙 뒤에 이러한 규칙을 두어서는 안 되며, CSS 프로세서는 이를 무시해야 합니다. 그러한 위치에 있으면 무효입니다.

다음(편집 이외의) 변경사항이 2013년 4월 4일자 후보 권고 이후 이 명세에 반영되었습니다:

• conditionText 내의 네임스페이스는 무효임을 명확히 함
• 새로운 에디터 추가
• parse를 명시적으로 호출하도록 변경("문법과 일치" 대신)
• CSSGroupingRule 중복 정의 제거(CSSOM에서 이미 정의됨)
• supports() 텍스트를 알고리즘 형태로 재작성하여, supports(prop, val) 형태에서 등록된 사용자 정의 속성 구문을 인식하는 것을 더 명확히 표현
• @supports selector 정의를 css-conditional-4로 이동
• @supports는 더 이상 at risk가 아님
• CSS 2.1 문법 대신 CSS Syntax 문법 사용으로 변경
• CSS Interface에서 WebIDL 호환 CSS 네임스페이스로 변경
• and, or, not 키워드 주위 공백 필수 요구사항을 제거 (Media Queries와의 일관성 및 일부 CSS minifier와의 호환성 때문). 단, 이러한 키워드 뒤에는 여전히 공백(또는 주석)이 필요함(공백이 없으면 함수 토큰으로 토큰화됨).
• supports() 메서드에 대해 간단한 선언의 경우 괄호를 암시적으로 허용 (@import 규칙의 supports() 함수와 일관성)
• IDL 코드의 누락된 세미콜론 수정
• 다른 모듈 변경에 따라 링크, 용어, 예제 코드 업데이트
• 맞춤법 및 문법 오류 수정
• 개인정보 및 보안 고려사항 절 추가

감사의 글

아래 분들의 아이디어와 피드백에 감사드립니다. Tab Atkins, Arthur Barstow, Ben Callahan, Tantek Çelik, Alex Danilo, Elika Etemad, Pascal Germroth, Björn Höhrmann, Paul Irish, Brad Kemper, Anne van Kesteren, Vitor Menezes, Alex Mogilevsky, Chris Moschini, James Nurthen, Simon Pieters, Florian Rivoal, Simon Sapin, Nicholas Shanks, Ben Ward, Zack Weinberg, Estelle Weyl, Boris Zbarsky, 그리고 www-style 커뮤니티의 모든 분들.