CSS 객체 모델(CSSOM)

1. 소개

이 문서는 CSS 객체 모델(CSSOM)의 핵심 기능을 공식적으로 규정합니다. CSSOM 사양군의 다른 문서와 기타 CSS 관련 사양에서는 이러한 핵심 기능의 확장을 정의합니다.

CSSOM의 핵심 기능은 작성자가 정의한 스크립트에 기본적인 기능을 제공하여 스타일 관련 상태 정보와 프로세스에 접근하고 이를 조작할 수 있도록 하는 데 중점을 둡니다.

아래에 정의된 기능은 기본적으로 W3C DOM 작업 그룹의 이전 사양, 주로 [DOM]을 기반으로 합니다. 이 문서의 목적은 (1) 더 높은 기술적 구체성을 제공하여 이전 작업을 개선하고 (테스트 가능성과 상호 운용성을 향상하기 위해), (2) 이 맥락에서 더 이상 필수적이라고 간주되지 않는 비교적 널리 구현되지 않은 특정 기능을 사용 중단하거나 제거하며, (3) 이미 널리 구현되었거나 널리 구현될 것으로 예상되는 특정 확장을 새롭게 규정하는 것입니다.

2. 용어

이 사양에서는 다음 문서의 특정 용어를 사용합니다: DOM, HTML, CSS 구문, 인코딩, URL, Fetch, XML 문서와 스타일 시트 연결 및 XML. [DOM] [HTML] [CSS3SYN] [ENCODING] [URL] [FETCH] [XML-STYLESHEET] [XML]

이 사양에서 객체 A에 대해 설명할 때 A가 실제로 인터페이스인 경우, 일반적으로 인터페이스 A를 구현하는 객체를 의미합니다.

설정됨 및 설정되지 않음이라는 용어는 각각 이진 플래그나 변수의 true 및 false 값을 나타냅니다. 이러한 용어는 동사로도 사용되며, 이 경우 각각 어떤 값을 변경하여 true 또는 false로 만드는 것을 의미합니다.

지원되는 스타일링 언어라는 용어는 CSS를 나타냅니다.

참고: 사용자 에이전트에서 다른 스타일링 언어를 지원하게 되면, 이 사양은 필요에 따라 업데이트될 것으로 예상됩니다.

지원되는 CSS 속성이라는 용어는 사용자 에이전트가 구현하는 CSS 속성을 나타내며, 모든 벤더 접두사가 붙은 속성을 포함하지만 사용자 지정 속성은 제외합니다. 지원되는 CSS 속성은 이 사양에서 비교할 목적으로 소문자 형식이어야 합니다.

이 사양에서는 ::before 및 ::after 의사 요소가 박스를 생성하지 않더라도 모든 요소에 존재한다고 가정합니다.

메서드 또는 속성이 다른 메서드나 속성을 호출한다고 명시된 경우, 사용자 에이전트는 해당 속성이나 메서드의 내부 API를 호출해야 하며, 이를 통해 예를 들어 작성자가 ECMAScript에서 사용자 지정 속성이나 함수로 속성 또는 메서드를 재정의하여 동작을 변경할 수 없도록 해야 합니다.

별도로 명시하지 않는 한, 문자열 비교는 대소문자를 구분하는 방식으로 수행합니다.

2.1. 일반적인 직렬화 관용구

문자를 이스케이프한다는 것은 "\" (U+005C) 뒤에 해당 문자를 붙인 문자열을 생성하는 것을 의미합니다.

문자를 코드 포인트로 이스케이프한다는 것은 "\" (U+005C) 뒤에 유니코드 코드 포인트를 16진수에서 코드 포인트를 나타낼 수 있는 범위 0-9 a-f의 가능한 한 가장 적은 자릿수 (U+0030에서 U+0039 및 U+0061에서 U+0066)로 표현하고, 그 뒤에 단일 SPACE (U+0020)를 붙인 문자열을 생성하는 것을 의미합니다.

식별자를 직렬화한다는 것은 식별자의 각 문자에 대해 다음을 적용한 결과를 연결하여 표현되는 문자열을 생성하는 것을 의미합니다:

• 문자가 NULL (U+0000)이면 REPLACEMENT CHARACTER (U+FFFD)입니다.
• 문자가 [\1-\1f] 범위(U+0001에서 U+001F)에 있거나 U+007F이면, 해당 문자를 코드 포인트로 이스케이프합니다.
• 문자가 첫 번째 문자이고 [0-9] 범위(U+0030에서 U+0039)에 있으면, 해당 문자를 코드 포인트로 이스케이프합니다.
• 문자가 두 번째 문자이고 [0-9] 범위(U+0030에서 U+0039)에 있으며 첫 번째 문자가 "-" (U+002D)이면, 해당 문자를 코드 포인트로 이스케이프합니다.
• 문자가 첫 번째 문자이고 "-" (U+002D)이며, 두 번째 문자가 없으면, 해당 이스케이프된 문자입니다.
• 문자가 위의 규칙 중 어느 것에도 해당하지 않고 U+0080 이상이거나, "-" (U+002D) 또는 "_" (U+005F)이거나, [0-9] (U+0030에서 U+0039), [A-Z] (U+0041에서 U+005A), 또는 \[a-z] (U+0061에서 U+007A) 범위 중 하나에 있으면 해당 문자 자체입니다.
• 그렇지 않으면, 해당 이스케이프된 문자입니다.

문자열을 직렬화한다는 것은 '"' (U+0022) 뒤에 주어진 문자열의 각 문자에 아래 규칙을 적용한 결과를 붙이고, 그 뒤에 '"' (U+0022)를 붙인 문자열을 생성하는 것을 의미합니다:

• 문자가 NULL (U+0000)이면 REPLACEMENT CHARACTER (U+FFFD)입니다.
• 문자가 [\1-\1f] 범위(U+0001에서 U+001F)에 있거나 U+007F이면, 해당 문자를 코드 포인트로 이스케이프합니다.
• 문자가 '"' (U+0022) 또는 "\" (U+005C)이면, 해당 이스케이프된 문자입니다.
• 그렇지 않으면, 해당 문자 자체입니다.

참고: 문자열은 항상 '"' (U+0022)를 사용하여 직렬화되므로 "'" (U+0027)는 이스케이프되지 않습니다.

URL을 직렬화한다는 것은 "url(" 뒤에 문자열로서 URL의 직렬화를 붙이고, 그 뒤에 ")"를 붙인 문자열을 생성하는 것을 의미합니다.

LOCAL을 직렬화한다는 것은 "local(" 뒤에 문자열로서 LOCAL의 직렬화를 붙이고, 그 뒤에 ")"를 붙인 문자열을 생성하는 것을 의미합니다.

쉼표로 구분된 목록을 직렬화한다는 것은 목록의 모든 항목을 목록 순서대로 연결하면서 ", ", 즉 COMMA (U+002C) 뒤에 단일 SPACE (U+0020)를 붙인 것으로 구분하는 것을 의미합니다.

공백으로 구분된 목록을 직렬화한다는 것은 목록의 모든 항목을 목록 순서대로 연결하면서 " ", 즉 단일 SPACE (U+0020)로 구분하는 것을 의미합니다.

참고: 위의 규칙에 따라 목록을 직렬화할 때, 첫 번째 항목 앞이나 마지막 항목 뒤에는 불필요한 공백을 삽입하지 않습니다. 별도로 명시하지 않는 한, 빈 목록은 빈 문자열로 직렬화됩니다.

3. CSSOMString

CSSOM 인터페이스의 대부분의 문자열은 CSSOMString 타입을 사용합니다. 각 구현은 이를 USVString 또는 DOMString 중 하나로 정의하도록 선택합니다:

typedef USVString CSSOMString;

또는 다음과 같이 정의할 수도 있습니다:

typedef DOMString CSSOMString;

4. 미디어 쿼리

미디어 쿼리는 [MEDIAQUERIES]에서 정의합니다. 이 절에서는 API와 직렬화 형식을 포함하여 미디어 쿼리와 관련된 다양한 개념을 정의합니다.

4.1. 미디어 쿼리 구문 분석

주어진 문자열 s를 미디어 쿼리 목록으로 미디어 쿼리 목록을 구문 분석하는 것은 미디어 쿼리 사양에 정의되어 있습니다. 그곳에 정의된 알고리즘이 제공하는 미디어 쿼리 목록을 반환합니다.

참고: 최종적으로 "무시"되는 미디어 쿼리는 "not all"이 됩니다.

주어진 문자열 s에 대해 미디어 쿼리를 구문 분석한다는 것은 미디어 쿼리 목록 구문 분석 단계를 따르고, 둘 이상의 미디어 쿼리가 반환되면 null을 반환하고 하나의 미디어 쿼리만 반환되면 그 미디어 쿼리를 반환하는 것을 의미합니다.

참고: 다시 말해, 최종적으로 "무시"되는 미디어 쿼리는 "not all"이 됩니다.

4.2. 미디어 쿼리 직렬화

미디어 쿼리 목록을 직렬화하려면 다음 단계를 실행합니다:

1. 미디어 쿼리 목록이 비어 있으면 빈 문자열을 반환합니다.
2. 미디어 쿼리 목록에 나타나는 것과 동일한 순서로 목록의 각 미디어 쿼리를 직렬화한 다음, 미디어 쿼리 목록을 직렬화합니다.

미디어 쿼리를 직렬화하려면 s를 빈 문자열로 두고 다음 단계를 실행합니다:

1. 미디어 쿼리가 부정형이면 "not" 뒤에 단일 SPACE (U+0020)를 붙여 s에 추가합니다.
2. type을 식별자로 직렬화한 미디어 타입으로 두고, 미디어 쿼리의 해당 값을 ASCII 소문자로 변환합니다.
3. 미디어 쿼리에 미디어 기능이 포함되어 있지 않으면 type을 s에 추가한 다음 s를 반환합니다.
4. type이 "all"이 아니거나 미디어 쿼리가 부정형이면 type 뒤에 단일 SPACE (U+0020), "and", 단일 SPACE (U+0020)를 차례로 붙여 s에 추가합니다.
5. 그런 다음 각 미디어 기능에 대해:
   1. "(" (U+0028) 뒤에 미디어 기능 이름을 붙이고, 이를 ASCII 소문자로 변환하여 s에 추가합니다.
   2. 값이 주어지면 ":" (U+003A) 뒤에 단일 SPACE (U+0020), 직렬화된 미디어 기능 값을 차례로 붙여 s에 추가합니다.
   3. ")" (U+0029)를 s에 추가합니다.
   4. 이것이 마지막 미디어 기능이 아니면 단일 SPACE (U+0020) 뒤에 "and", 단일 SPACE (U+0020)를 차례로 붙여 s에 추가합니다.
6. s를 반환합니다.

not screen and (min-WIDTH:5px) AND (max-width:40px)

not screen and (min-width: 5px) and (max-width: 40px)

all and (color) and (color)

(color) and (color)

4.2.1. 미디어 기능 값 직렬화

미디어 기능은 결국 CSS 값의 관점에서 정의되므로, 이는 아마도 CSS 값 직렬화에 매핑하는 방식으로 처리해야 합니다.

v라는 이름의 미디어 기능 값을 직렬화하려면 아래 표의 첫 번째 열에서 v를 찾고 두 번째 열에 설명된 직렬화 형식을 사용합니다:

다른 사양에서 이 표를 확장할 수 있으며 벤더 접두사가 붙은 미디어 기능에도 사용자 지정 직렬화 형식이 있을 수 있습니다.

4.3. 미디어 쿼리 비교

미디어 쿼리 m1과 m2를 비교한다는 것은 둘 다 직렬화하고 대소문자를 구분하여 일치하면 true를 반환하고 일치하지 않으면 false를 반환하는 것을 의미합니다.

4.4. MediaList 인터페이스

MediaList 인터페이스를 구현하는 객체에는 연관된 미디어 쿼리 컬렉션이 있습니다.

[Exposed=Window]
interface MediaList {
  stringifier attribute [LegacyNullToEmptyString] CSSOMString mediaText;
  readonly attribute unsigned long length;
  getter CSSOMString? item(unsigned long index);
  undefined appendMedium(CSSOMString medium);
  undefined deleteMedium(CSSOMString medium);
};

객체의 지원되는 속성 인덱스는 컬렉션이 나타내는 미디어 쿼리 컬렉션의 미디어 쿼리 개수보다 하나 작은 값까지의 0부터 시작하는 숫자입니다. 이러한 미디어 쿼리가 없으면 지원되는 속성 인덱스도 없습니다.

문자열 text로 MediaList 객체를 생성하려면 다음 단계를 실행합니다:

1. 새 MediaList 객체를 생성합니다.
2. 해당 객체의 mediaText 속성을 text로 설정합니다.
3. 새로 생성된 MediaList 객체를 반환합니다.

mediaText 속성은 가져올 때 직렬화된 미디어 쿼리 컬렉션을 반환해야 합니다. mediaText 속성을 설정할 때는 다음 단계를 실행해야 합니다:

1. 미디어 쿼리 컬렉션을 비웁니다.
2. 주어진 값이 빈 문자열이면 반환합니다.
3. 주어진 값을 구문 분석한 결과인 모든 미디어 쿼리를 미디어 쿼리 컬렉션에 추가합니다.

item(index) 메서드는 미디어 쿼리 컬렉션에서 index가 지정한 미디어 쿼리의 직렬화를 반환해야 하며, index가 미디어 쿼리 컬렉션의 미디어 쿼리 개수 이상이면 null을 반환해야 합니다.

length 속성은 미디어 쿼리 컬렉션에 있는 미디어 쿼리의 개수를 반환해야 합니다.

appendMedium(medium) 메서드는 다음 단계를 실행해야 합니다:

1. m을 주어진 값을 구문 분석한 결과로 둡니다.
2. m이 null이면 반환합니다.
3. 미디어 쿼리 컬렉션의 어떤 미디어 쿼리와 m을 비교한 결과가 true이면 반환합니다.
4. m을 미디어 쿼리 컬렉션에 추가합니다.

deleteMedium(medium) 메서드는 다음 단계를 실행해야 합니다:

1. m을 주어진 값을 구문 분석한 결과로 설정합니다.
2. m이 null이면 반환합니다.
3. 미디어 쿼리 모음에서 해당 미디어 쿼리를 m과 비교한 결과가 true인 모든 미디어 쿼리를 제거합니다. 아무것도 제거되지 않았다면 NotFoundError 예외를 던집니다.

5. 선택자

선택자는 Selectors 사양에서 정의됩니다. 이 절에서는 주로 선택자를 직렬화하는 방법을 정의합니다.

5.1. 선택자 구문 분석

선택자 그룹을 구문 분석한다는 것은 Selectors 사양에 정의된 selectors_group 생성 규칙을 사용하여 값을 구문 분석하고 구문 분석에 실패하지 않았다면 선택자 그룹을 반환하고, 구문 분석에 실패했다면 null을 반환하는 것을 의미합니다.

5.2. 선택자 직렬화

선택자 그룹을 직렬화한다는 것은 선택자 그룹의 각 선택자를 직렬화한 다음 이러한 직렬화 결과의 쉼표로 구분된 목록을 직렬화하는 것을 의미합니다.

선택자를 직렬화하려면 s를 빈 문자열로 두고, 선택자 체인의 각 부분에 대해 아래 단계를 실행한 다음 마지막으로 s를 반환합니다:

1. 복합 선택자에 단순 선택자가 하나만 있고 그것이 전체 선택자라면, 전체 선택자를 직렬화한 결과를 s에 추가합니다.
2. 그렇지 않으면, 복합 선택자의 각 단순 선택자 중 네임스페이스 접두사가 기본 네임스페이스가 아닌 네임스페이스에 매핑되는 전체 선택자가 아닌 경우, 단순 선택자를 직렬화하고 그 결과를 s에 추가합니다.
3. 이것이 선택자 체인의 마지막 부분이 아니라면 단일 SPACE (U+0020) 뒤에 적절한 결합자 ">", "+", "~", ">>", "||"를 붙이고, 결합자가 공백이 아니라면 그 뒤에 다시 단일 SPACE (U+0020)를 붙여 s에 추가합니다.
4. 이것이 선택자 체인의 마지막 부분이고 의사 요소가 있다면 "::" 뒤에 의사 요소의 이름을 붙여 s에 추가합니다.

단순 선택자를 직렬화하려면 s를 빈 문자열로 두고 아래 단계를 실행한 다음 마지막으로 s를 반환합니다:

타입 선택자

전체 선택자

1. 네임스페이스 접두사가 기본 네임스페이스가 아니며 null 네임스페이스(어떤 네임스페이스에도 속하지 않음)도 아닌 네임스페이스에 매핑되면, 네임스페이스 접두사를 식별자로 직렬화한 결과 뒤에 "|" (U+007C)를 붙여 s에 추가합니다.
2. 네임스페이스 접두사가 null 네임스페이스(어떤 네임스페이스에도 속하지 않음)에 매핑되면 "|" (U+007C)를 s에 추가합니다.
3. 이것이 타입 선택자라면 요소 이름을 식별자로 직렬화한 결과를 s에 추가합니다.
4. 이것이 전체 선택자라면 "*" (U+002A)를 s에 추가합니다.

속성 선택자

1. "[" (U+005B)를 s에 추가합니다.
2. 네임스페이스 접두사가 null 네임스페이스(어떤 네임스페이스에도 속하지 않음)가 아닌 네임스페이스에 매핑되면, 네임스페이스 접두사를 식별자로 직렬화한 결과 뒤에 "|" (U+007C)를 붙여 s에 추가합니다.
3. 속성 이름을 식별자로 직렬화한 결과를 s에 추가합니다.
4. 속성 값이 지정되어 있으면, 속성 선택자의 유형에 따라 적절하게 "=", "~=", "|=", "^=", "$=" 또는 "*="를 추가한 뒤 속성 값을 문자열로 직렬화한 결과를 s에 추가합니다.
5. 속성 선택자에 대소문자 구분 플래그가 있으면 " i" (U+0020 U+0069)를 s에 추가합니다.
6. "]" (U+005D)를 s에 추가합니다.

클래스 선택자

"." (U+002E) 뒤에 클래스 이름을 식별자로 직렬화한 결과를 붙여 s에 추가합니다.

ID 선택자

"#" (U+0023) 뒤에 ID를 식별자로 직렬화한 결과를 붙여 s에 추가합니다.

의사 클래스

의사 클래스가 인수를 받지 않으면 ":" (U+003A) 뒤에 의사 클래스의 이름을 붙여 s에 추가합니다.

그렇지 않으면 ":" (U+003A) 뒤에 의사 클래스의 이름, "(" (U+0028), 아래에서 정한 의사 클래스 인수의 값, ")" (U+0029)를 차례로 붙여 s에 추가합니다.

:lang()

각 인수를 문자열로 직렬화한 결과를 상대적 순서를 유지한 채 쉼표로 구분된 목록으로 직렬화한 결과입니다.

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

<an+b> 값을 직렬화하는 규칙을 사용하여 값을 직렬화한 결과입니다.

:not()

선택자 그룹을 직렬화하는 규칙을 사용하여 값을 직렬화한 결과입니다.

6. CSS

6.1. CSS 스타일 시트

CSS 스타일 시트는 CSS 사양에서 정의하는 스타일 시트를 나타내는 추상적인 개념입니다. CSSOM에서 CSS 스타일 시트는 CSSStyleSheet 객체로 표현됩니다.

CSSStyleSheet(options)

호출되면 주어진 options로 구성된 CSSStyleSheet를 생성하는 단계를 실행하고 그 결과를 반환합니다.

주어진 CSSStyleSheetInit options로 구성된 CSSStyleSheet를 생성하려면 다음 단계를 실행합니다:

1. 새 CSSStyleSheet 객체 sheet를 생성합니다.
2. sheet의 위치를 현재 전역 객체의 연결된 Document의 기본 URL로 설정합니다.
3. sheet의 스타일 시트 기본 URL을 options의 baseURL 속성 값으로 설정합니다.
4. sheet의 부모 CSS 스타일 시트를 null로 설정합니다.
5. sheet의 소유자 노드를 null로 설정합니다.
6. sheet의 소유자 CSS 규칙을 null로 설정합니다.
7. sheet의 제목을 빈 문자열로 설정합니다.
8. sheet의 대체 플래그를 설정 해제합니다.
9. sheet의 origin-clean 플래그를 설정합니다.
10. sheet의 constructed 플래그를 설정합니다.
11. sheet의 생성자 문서를 현재 전역 객체의 연결된 Document로 설정합니다.
12. options의 media 속성이 문자열이면, 해당 문자열로 MediaList 객체를 생성하고 이를 sheet의 media로 할당합니다. 그렇지 않으면, 해당 속성으로 미디어 쿼리 목록을 직렬화한 다음 결과 문자열로 MediaList 객체를 생성하고 이를 sheet의 media로 설정합니다.
13. options의 disabled 속성이 true이면, sheet의 disabled 플래그를 설정합니다.
14. sheet를 반환합니다.

CSS 스타일 시트에는 여러 연결된 상태 항목이 있습니다:

타입

리터럴 문자열 "text/css"입니다.

위치

생성될 때 지정됩니다. CSS 스타일 시트의 첫 번째 요청에 대한 절대 URL 문자열이거나, CSS 스타일 시트가 임베드된 경우 null입니다. CSS 스타일 시트의 수명 동안 변경되지 않습니다.

부모 CSS 스타일 시트

생성될 때 지정됩니다. 해당 CSS 스타일 시트의 부모인 CSS 스타일 시트이거나, 연결된 부모가 없으면 null입니다.

소유자 노드

생성될 때 지정됩니다. CSS 스타일 시트와 연결된 DOM 노드이거나, 연결된 DOM 노드가 없으면 null입니다.

소유자 CSS 규칙

생성될 때 지정됩니다. CSS 스타일 시트를 포함하게 만든 부모 CSS 스타일 시트의 CSS 규칙이거나, 연결된 규칙이 없으면 null입니다.

media

생성될 때 지정됩니다. CSS 스타일 시트와 연결된 MediaList 객체입니다.

이 속성이 문자열로 지정된 경우, media는 해당 문자열로 MediaList 객체를 생성하는 단계의 반환값으로 설정해야 합니다.

이 속성이 소유자 노드의 속성으로 지정된 경우, media는 해당 속성의 값으로 MediaList 객체를 생성하는 단계의 반환값으로 설정해야 합니다. 해당 속성이 설정되거나 변경되거나 제거될 때마다 media의 mediaText 속성은 해당 속성의 새 값으로 설정해야 하며, 해당 속성이 없으면 null로 설정해야 합니다.

참고: media의 mediaText 속성을 변경해도 소유자 노드의 대응하는 속성은 변경되지 않습니다.

참고: CSS 스타일 시트의 소유자 노드가 null이 아닌 경우, 해당 노드는 해당 CSS 스타일 시트가 추가될 때 연결된 CSS 스타일 시트가 문제의 CSS 스타일 시트인 노드입니다.

제목

생성될 때 지정됩니다. CSS 스타일 시트의 제목이며, 빈 문자열일 수 있습니다.

다음에서 첫 번째 스타일 시트의 제목은 비어 있지 않지만 두 번째와 세 번째 스타일 시트의 제목은 비어 있습니다.

<style title="papaya whip">
  body { background: #ffefd5; }
</style>

<style title="">
  body { background: orange; }
</style>

<style>
  body { background: brown; }
</style>

이 속성이 소유자 노드의 속성으로 지정된 경우, 제목은 해당 속성의 값으로 설정해야 합니다. 해당 속성이 설정되거나 변경되거나 제거될 때마다 제목은 해당 속성의 새 값으로 설정해야 하며, 해당 속성이 없으면 빈 문자열로 설정해야 합니다.

참고: HTML은 노드가 문서 트리 안에 있는 경우에만 제목을 소유자 노드의 속성으로 지정합니다.

대체 플래그

생성될 때 지정됩니다. 설정되거나 설정 해제됩니다. 기본값은 설정 해제입니다.

다음 CSS 스타일 시트에는 대체 플래그가 설정되어 있습니다:

<?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?>

<link rel="alternate stylesheet" title="x" href="data:text/css,…">

disabled 플래그

설정되거나 설정 해제됩니다. 기본값은 설정 해제입니다.

참고: 설정 해제되어 있더라도 CSS 스타일 시트가 실제로 렌더링에 사용된다는 뜻은 아닙니다.

CSS 규칙

CSS 스타일 시트와 연결된 CSS 규칙입니다.

origin-clean 플래그

생성될 때 지정됩니다. 설정되거나 설정 해제됩니다. 설정되어 있으면 API에서 CSS 규칙을 읽고 수정할 수 있습니다.

constructed 플래그

생성될 때 지정됩니다. 설정되거나 설정 해제됩니다. 기본값은 설정 해제입니다. 이 스타일 시트가 IDL에 정의된 생성자를 호출하여 생성되었는지를 나타냅니다.

수정 금지 플래그

설정되거나 설정 해제됩니다. 기본값은 설정 해제입니다. 설정되어 있으면 스타일 시트의 규칙을 수정할 수 없습니다.

생성자 문서

생성될 때 지정됩니다. 구성된 스타일 시트와 연결된 Document입니다. 기본값은 null입니다. constructed 플래그가 설정된 스타일 시트에 대해서만 null이 아닙니다.

스타일 시트 기본 URL

스타일 시트에서 상대 URL을 해석할 때 사용할 기본 URL입니다. 기본값은 null입니다. constructed 플래그가 설정된 스타일 시트에 대해서만 null이 아닙니다.

6.1.1. StyleSheet 인터페이스

StyleSheet 인터페이스는 추상적인 기본 스타일 시트를 나타냅니다.

[Exposed=Window]
interface StyleSheet {
  readonly attribute CSSOMString type;
  readonly attribute USVString? href;
  readonly attribute (Element or ProcessingInstruction)? ownerNode;
  readonly attribute CSSStyleSheet? parentStyleSheet;
  readonly attribute DOMString? title;
  [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
  attribute boolean disabled;
};

type 속성은 타입을 반환해야 합니다.

href 속성은 위치를 반환해야 합니다.

ownerNode 속성은 소유자 노드를 반환해야 합니다.

parentStyleSheet 속성은 부모 CSS 스타일 시트를 반환해야 합니다.

title 속성은 제목을 반환해야 하며, 제목이 빈 문자열이면 null을 반환해야 합니다.

media 속성은 media를 반환해야 합니다.

disabled 속성은 가져올 때 disabled 플래그가 설정되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환해야 합니다. 설정할 때 disabled 속성은 새 값이 true이면 disabled 플래그를 설정하고, 그렇지 않으면 disabled 플래그를 설정 해제해야 합니다.

6.1.2. CSSStyleSheet 인터페이스

CSSStyleSheet 인터페이스는 CSS 스타일 시트를 나타냅니다.

[Exposed=Window]
interface CSSStyleSheet : StyleSheet {
  constructor(optional CSSStyleSheetInit options = {});

  readonly attribute CSSRule? ownerRule;
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  undefined deleteRule(unsigned long index);

  Promise<CSSStyleSheet> replace(USVString text);
  undefined replaceSync(USVString text);
};

dictionary CSSStyleSheetInit {
  DOMString baseURL = null;
  (MediaList or DOMString) media = "";
  boolean disabled = false;
};

ownerRule 속성은 소유자 CSS 규칙을 반환해야 합니다. null이 아닌 값이 한 번이라도 반환되었다면 이후 각 get 접근에서도 항상 동일한 값을 반환해야 합니다.

cssRules 속성은 다음 단계를 따라야 합니다:

1. origin-clean 플래그가 설정 해제되어 있으면 던집니다: SecurityError 예외를.
2. CSS 규칙을 나타내는 읽기 전용 라이브 CSSRuleList 객체를 반환합니다.

   참고: 반환된 CSSRuleList 객체는 클라이언트 작성 스크립트의 관점에서는 읽기 전용이지만, 라이브 상태이므로 시간이 지나면서 변경될 수 있습니다. 예를 들어 insertRule() 또는 deleteRule() 메서드를 호출하면 반환된 객체에 반영되는 변경이 발생할 수 있습니다.

insertRule(rule, index) 메서드는 다음 단계를 실행해야 합니다:

1. origin-clean 플래그가 설정 해제되어 있으면 던집니다: SecurityError 예외를.
2. 수정 금지 플래그가 설정되어 있으면 NotAllowedError DOMException을 던집니다.
3. parsed rule을 rule로 규칙을 구문 분석한 반환값으로 둡니다.
4. parsed rule이 구문 오류이면 parsed rule을 반환합니다.
5. parsed rule이 @import 규칙이고 constructed 플래그가 설정되어 있으면 SyntaxError DOMException을 던집니다.
6. CSS 규칙의 index 위치에 rule을 CSS 규칙으로 삽입한 결과를 반환합니다.

deleteRule(index) 메서드는 다음 단계를 실행해야 합니다:

1. origin-clean 플래그가 설정 해제되어 있으면 던집니다: SecurityError 예외를.
2. 수정 금지 플래그가 설정되어 있으면 NotAllowedError DOMException을 던집니다.
3. CSS 규칙의 index 위치에서 CSS 규칙을 제거합니다.

replace(text) 메서드는 다음 단계를 실행해야 합니다:

1. promise을 promise로 둡니다.
2. constructed 플래그가 설정되어 있지 않거나 수정 금지 플래그가 설정되어 있으면, promise을 NotAllowedError DOMException으로 거부하고 promise을 반환합니다.
3. 수정 금지 플래그를 설정합니다.
4. 병렬로 다음 단계를 수행합니다:
   1. rules를 text에서 규칙 목록을 구문 분석한 결과로 둡니다. rules가 규칙 목록이 아니면(즉, 구문 분석 중 오류가 발생했다면) rules를 빈 목록으로 설정합니다.
   2. rules에 하나 이상의 @import 규칙이 포함되어 있으면, 해당 규칙을 제거합니다.
   3. sheet의 CSS 규칙을 rules로 설정합니다.
   4. sheet의 수정 금지 플래그를 설정 해제합니다.
   5. promise을 sheet로 이행합니다.
5. promise을 반환합니다.

replaceSync(text) 메서드는 주어진 text로 이 CSSStyleSheet에 대해 CSSStyleSheet의 규칙을 동기적으로 교체하는 단계를 실행해야 합니다.

주어진 text로 sheet의 CSSStyleSheet 규칙을 동기적으로 교체하려면 다음 단계를 실행합니다:

1. constructed 플래그가 설정되어 있지 않거나 수정 금지 플래그가 설정되어 있으면 NotAllowedError DOMException을 던집니다.
2. rules를 text에서 규칙 목록을 구문 분석한 결과로 둡니다. rules가 규칙 목록이 아니면(즉, 구문 분석 중 오류가 발생했다면) rules를 빈 목록으로 설정합니다.
3. rules에 하나 이상의 @import 규칙이 포함되어 있으면, rules에서 해당 규칙을 제거합니다.
4. sheet의 CSS 규칙을 rules로 설정합니다.

6.1.2.1. 사용 중단된 CSSStyleSheet 멤버

참고: 이러한 멤버는 기존 사이트와의 호환성을 위해 필요합니다.

partial interface CSSStyleSheet {
  [SameObject] readonly attribute CSSRuleList rules;
  long addRule(optional DOMString selector = "undefined", optional DOMString style = "undefined", optional unsigned long index);
  undefined removeRule(optional unsigned long index = 0);
};

rules 속성은 cssRules와 동일한 단계를 따라야 하며 cssRules가 반환할 것과 동일한 객체를 반환해야 합니다.

removeRule(index) 메서드는 deleteRule()과 동일한 단계를 실행해야 합니다.

addRule(selector, block, optionalIndex) 메서드는 다음 단계를 실행해야 합니다:

1. rule을 빈 문자열로 둡니다.
2. selector를 rule에 추가합니다.
3. " { "를 rule에 추가합니다.
4. block이 비어 있지 않으면 block 뒤에 공백을 붙여 rule에 추가합니다.
5. "}"를 rule에 추가합니다.
6. index를 optionalIndex가 제공된 경우 그 값으로, 그렇지 않으면 스타일 시트에 있는 CSS 규칙의 개수로 둡니다.
7. rule과 index를 인수로 하여 insertRule()을 호출합니다.
8. -1을 반환합니다.

작성자는 이러한 멤버를 사용해서는 안 되며, 대신 앞에서 정의한 표준 CSSStyleSheet 인터페이스를 사용하고 가르쳐야 합니다. 이 인터페이스는 CSSGroupingRule과 일관됩니다.

6.2. CSS 스타일 시트 컬렉션

아래에서는 각 DocumentOrShadowRoot 객체와 연결된 다양한 새로운 개념을 정의합니다.

각 DocumentOrShadowRoot에는 0개 이상의 CSS 스타일 시트로 이루어진 연결된 목록이 있으며, 이를 문서 또는 섀도 루트 CSS 스타일 시트라고 합니다. 이는 다음을 포함하는 순서가 있는 목록입니다:

1. HTTP Link 헤더에서 생성된 모든 CSS 스타일 시트를 헤더 순서대로
2. DocumentOrShadowRoot와 연결된 모든 CSS 스타일 시트를 트리 순서대로

각 DocumentOrShadowRoot에는 0개 이상의 CSS 스타일 시트로 이루어진 연결된 목록이 있으며, 이를 최종 CSS 스타일 시트라고 합니다. 이는 다음을 포함하는 순서가 있는 목록입니다:

1. 문서 또는 섀도 루트 CSS 스타일 시트.
2. DocumentOrShadowRoot의 adoptedStyleSheets의 백킹 목록 내용을 배열 순서대로.

CSS 스타일 시트를 생성하려면 다음 단계를 실행합니다:

1. 새 CSS 스타일 시트 객체를 생성하고 지정된 대로 속성을 설정합니다.
2. 그런 다음 새로 생성된 CSS 스타일 시트에 대해 CSS 스타일 시트를 추가하는 단계를 실행합니다.

   origin-clean 플래그가 설정 해제되어 있으면, 사용자의 인트라넷에서 정보를 노출할 수 있습니다.

CSS 스타일 시트를 추가하려면 다음 단계를 실행합니다:

1. CSS 스타일 시트를 문서 또는 섀도 루트 CSS 스타일 시트 목록의 적절한 위치에 추가합니다. 나머지 단계에서는 disabled 플래그를 처리합니다.
2. disabled 플래그가 설정되어 있으면 반환합니다.
3. 제목이 빈 문자열이 아니고, 대체 플래그가 설정 해제되어 있으며, 선호 CSS 스타일 시트 집합 이름이 빈 문자열이면 선호 CSS 스타일 시트 집합 이름을 변경하여 제목으로 설정합니다.
4. 다음 중 하나라도 true이면 disabled 플래그를 설정 해제하고 반환합니다:
   • 제목이 빈 문자열입니다.
   • 마지막 CSS 스타일 시트 집합 이름이 null이고 제목이 대소문자를 구분하여 선호 CSS 스타일 시트 집합 이름과 일치합니다.
   • 제목이 대소문자를 구분하여 마지막 CSS 스타일 시트 집합 이름과 일치합니다.
5. disabled 플래그를 설정합니다.

CSS 스타일 시트를 제거하려면 다음 단계를 실행합니다:

1. CSS 스타일 시트를 문서 또는 섀도 루트 CSS 스타일 시트 목록에서 제거합니다.
2. CSS 스타일 시트의 부모 CSS 스타일 시트, 소유자 노드 및 소유자 CSS 규칙을 null로 설정합니다.

영구 CSS 스타일 시트는 문서 또는 섀도 루트 CSS 스타일 시트 중에서 제목이 빈 문자열이고 대체 플래그가 설정 해제된 CSS 스타일 시트입니다.

CSS 스타일 시트 집합은 문서 또는 섀도 루트 CSS 스타일 시트 중에서 빈 문자열이 아닌 동일한 제목을 가진 하나 이상의 CSS 스타일 시트로 이루어진 순서가 있는 컬렉션입니다.

CSS 스타일 시트 집합 이름은 CSS 스타일 시트 집합이 공통으로 갖는 제목입니다.

활성화된 CSS 스타일 시트 집합은 각 CSS 스타일 시트의 disabled 플래그가 설정 해제된 CSS 스타일 시트 집합입니다.

name이라는 이름의 CSS 스타일 시트 집합을 활성화하려면 다음 단계를 실행합니다:

1. name이 빈 문자열이면 CSS 스타일 시트 집합에 속하는 각 CSS 스타일 시트의 disabled 플래그를 설정하고 반환합니다.
2. 대소문자를 구분하여 name과 일치하는 CSS 스타일 시트 집합 이름을 가진 CSS 스타일 시트 집합의 각 CSS 스타일 시트에 대해 disabled 플래그를 설정 해제하고, 다른 모든 CSS 스타일 시트 중 CSS 스타일 시트 집합에 속하는 것에는 이를 설정합니다.

name이라는 이름의 CSS 스타일 시트 집합을 선택하려면 다음 단계를 실행합니다:

1. name이라는 이름의 CSS 스타일 시트 집합을 활성화합니다.
2. 마지막 CSS 스타일 시트 집합 이름을 name으로 설정합니다.

마지막 CSS 스타일 시트 집합 이름은 어떤 CSS 스타일 시트 집합이 마지막으로 선택되었는지 결정하는 개념입니다. 처음에는 그 값이 null입니다.

선호 CSS 스타일 시트 집합 이름은 어떤 CSS 스타일 시트의 disabled 플래그를 설정 해제해야 하는지 결정하는 개념입니다. 처음에는 그 값이 빈 문자열입니다.

name이라는 이름으로 선호 CSS 스타일 시트 집합 이름을 변경하려면 다음 단계를 실행합니다:

1. current를 선호 CSS 스타일 시트 집합 이름으로 둡니다.
2. 선호 CSS 스타일 시트 집합 이름을 name으로 설정합니다.
3. name이 current와 대소문자를 구분하여 일치하지 않고 마지막 CSS 스타일 시트 집합 이름이 null이면, name이라는 이름의 CSS 스타일 시트 집합을 활성화합니다.

6.2.1. HTTP Default-Style 헤더

HTTP Default-Style 헤더를 사용하여 선호 CSS 스타일 시트 집합 이름을 설정할 수 있으며, 이는 어떤 CSS 스타일 시트 집합이 (처음에) 활성화된 CSS 스타일 시트 집합이 되는지에 영향을 줍니다.

각 HTTP Default-Style 헤더에 대해 헤더 순서대로, 사용자 에이전트는 헤더의 값을 이름으로 사용하여 선호 CSS 스타일 시트 집합 이름을 변경해야 합니다.

6.2.2. StyleSheetList 인터페이스

StyleSheetList 인터페이스는 CSS 스타일 시트의 순서가 있는 컬렉션을 나타냅니다.

[Exposed=Window]
interface StyleSheetList {
  getter CSSStyleSheet? item(unsigned long index);
  readonly attribute unsigned long length;
};

객체의 지원되는 속성 인덱스는 컬렉션이 나타내는 CSS 스타일 시트 개수보다 하나 작은 수까지 0부터 시작하는 숫자입니다. 이러한 CSS 스타일 시트가 없으면 지원되는 속성 인덱스도 없습니다.

item(index) 메서드는 컬렉션의 index번째 CSS 스타일 시트를 반환해야 합니다. 컬렉션에 index번째 객체가 없으면 메서드는 null을 반환해야 합니다.

length 속성은 컬렉션이 나타내는 CSS 스타일 시트의 개수를 반환해야 합니다.

6.2.3. DocumentOrShadowRoot 인터페이스 믹스인 확장

partial interface mixin DocumentOrShadowRoot {
  [SameObject] readonly attribute StyleSheetList styleSheets;
  attribute ObservableArray<CSSStyleSheet> adoptedStyleSheets;
};

styleSheets 속성은 문서 또는 섀도 루트 CSS 스타일 시트를 나타내는 StyleSheetList 컬렉션을 반환해야 합니다.

value와 index가 주어진 adoptedStyleSheets에 대한 인덱스된 값을 설정하는 알고리즘은 다음과 같습니다:

1. value의 constructed 플래그가 설정되어 있지 않거나, 해당 생성자 문서가 이 DocumentOrShadowRoot의 노드 문서와 같지 않으면 "NotAllowedError" DOMException을 던집니다.

6.3. 스타일 시트 연결

이 절에서는 CSS 스타일 시트의 소유자 노드가 구현해야 하는 인터페이스를 정의하고, 링크 관계 유형이 "stylesheet"와 ASCII 대소문자를 구분하지 않고 일치하는 경우의 xml-stylesheet 처리 명령 및 HTTP Link 헤더에 대한 요구 사항을 정의합니다.

6.3.1. CSS 스타일 시트 가져오기

구문 분석된 URL parsed URL, 리퍼러 referrer, 문서 document, 선택적으로 매개변수 집합 parameters(요청 생성에 대한 입력으로 사용됨)가 주어진 상태에서 CSS 스타일 시트를 가져오려면 다음 단계를 따릅니다:

1. origin을 document의 출처로 둡니다.
2. request를 새로운 요청으로 두고, url을 parsed URL, 출처를 origin, 리퍼러를 referrer로 하고, 지정되어 있다면 매개변수 집합 parameters도 사용합니다.
3. response를 request를 가져온 결과로 둡니다.
4. response를 사용할 수 있을 때까지 기다립니다.
5. response가 네트워크 오류이면 오류를 반환합니다.
6. document가 쿼크 모드이고, response가 CORS-same-origin이며, response의 Content-Type 메타데이터가 지원되는 스타일링 언어가 아니면 response의 Content-Type 메타데이터를 text/css로 변경합니다.
7. response가 지원되는 스타일링 언어가 아니면 오류를 반환합니다.
8. response를 반환합니다.

6.3.2. LinkStyle 인터페이스

노드의 연결된 CSS 스타일 시트는 문서 또는 섀도 루트 CSS 스타일 시트 목록에 있는 CSS 스타일 시트 중에서 소유자 노드가 해당 노드인 것입니다. 이 노드는 또한 LinkStyle 인터페이스를 구현해야 합니다.

interface mixin LinkStyle {
  readonly attribute CSSStyleSheet? sheet;
};

sheet 속성은 노드의 연결된 CSS 스타일 시트를 반환해야 하며, 연결된 CSS 스타일 시트가 없으면 null을 반환해야 합니다.

<style type="text/css">
  body { background:lime }
</style>

<style type="text/example-sheets">
  $(body).background := lime
</style>

참고: 노드가 스타일 시트를 참조하는지 여부는 해당 노드의 의미론을 정의하는 사양에서 정의합니다.

6.3.3. 사양에 대한 요구 사항

DOM을 통해 스타일 시트를 연결하는 새로운 방법을 도입하는 사양은 어떤 노드가 LinkStyle 인터페이스를 구현하는지 정의해야 합니다. 그렇게 할 때 CSS 스타일 시트가 언제 생성되는지도 정의해야 합니다.

6.3.4. xml-stylesheet 처리 명령을 구현하는 사용자 에이전트에 대한 요구 사항

ProcessingInstruction includes LinkStyle;

프롤로그는 문서의 자식인 노드 중에서, 문서에 Element 자식이 있는 경우 그 자식보다 뒤에 있지 않은 노드를 의미합니다.

ProcessingInstruction 노드 node가 프롤로그의 일부가 되거나, 더 이상 프롤로그의 일부가 아니게 되거나, 해당 데이터가 변경되면 다음 단계를 실행해야 합니다:

1. 현재 node에 대해 이 알고리즘의 인스턴스가 실행 중이면 해당 인스턴스를 중단하고, 해당되는 경우 연결된 가져오기도 중지합니다.
2. node에 연결된 CSS 스타일 시트가 있으면 이를 제거합니다.
3. node가 xml-stylesheet 처리 명령이 아니면 반환합니다.
4. node에 href 의사 속성이 없으면 반환합니다.
5. title을 title 의사 속성의 값으로 두고, title 의사 속성이 지정되지 않았다면 빈 문자열로 둡니다.
6. 값이 "yes"와 대소문자를 구분하여 일치하는 alternate 의사 속성이 있고 title이 빈 문자열이면 반환합니다.
7. 값이 사용자 에이전트의 지원되는 스타일링 언어가 아닌 type 의사 속성이 있으면 반환해도 됩니다.
8. input URL을 href 의사 속성이 지정한 값으로 둡니다.
9. document를 node의 노드 문서로 둡니다.
10. base URL을 document의 문서 기본 URL로 둡니다.
11. referrer를 document의 주소로 둡니다.
12. parsed URL을 문자열 input URL과 기본 URL base URL로 URL 파서를 호출한 반환값으로 둡니다.
13. parsed URL이 failure이면 반환합니다.
14. response를 구문 분석된 URL parsed URL, 리퍼러 referrer, 문서 document로 CSS 스타일 시트를 가져온 결과로 둡니다.
15. response가 오류이면 반환합니다.
16. 다음 속성을 사용하여 CSS 스타일 시트를 생성합니다:

    위치

    parsed URL로 URL 직렬 변환기를 호출한 결과입니다.

    부모 CSS 스타일 시트

    null.

    소유자 노드

    node.

    소유자 CSS 규칙

    null.

    media

    media 의사 속성이 있으면 그 값이고, 그렇지 않으면 빈 문자열입니다.

    제목

    title.

    대체 플래그

    alternate 의사 속성 값이 "yes"와 대소문자를 구분하여 일치하면 설정하고, 그렇지 않으면 설정 해제합니다.

    origin-clean 플래그

    response가 CORS-same-origin이면 설정하고, 그렇지 않으면 설정 해제합니다.

    CSS 환경 인코딩은 다음 단계를 실행한 결과입니다:

    1. 요소에 charset 의사 속성이 있으면, 해당 의사 속성 값에서 인코딩을 가져옵니다. 성공하면 결과 인코딩을 반환하고 이 단계를 중단합니다.
    2. 그렇지 않으면 문서의 문자 인코딩을 반환합니다. [DOM]

이 절의 규칙을 사용하여 xml-stylesheet 처리 명령이 참조하는 스타일 시트는, XML 파서의 Document 맥락에서 ProcessingInstruction 노드가 해당 Document의 파서에 의해 생성되었고, 파서가 노드를 생성했을 때 스타일 시트가 활성화되어 있었으며, 마지막으로 이벤트 루프가 1단계에 도달했을 때 노드가 해당 Document 안에 있었고, 사용자 에이전트가 아직 해당 스타일 시트의 로딩을 포기하지 않았다면 스크립트를 차단하는 스타일 시트라고 합니다. 사용자 에이전트는 언제든지 이러한 스타일 시트를 포기할 수 있습니다.

6.3.5. HTTP Link 헤더를 구현하는 사용자 에이전트에 대한 요구 사항

링크 관계 유형 중 하나가 "stylesheet"와 ASCII 대소문자를 구분하지 않고 일치하는 각 HTTP Link 헤더에 대해 다음 단계를 실행해야 합니다:

1. title을 모든 title 매개변수 중 첫 번째 것의 값으로 둡니다. 이러한 매개변수가 없으면 빈 문자열로 둡니다.
2. (다른) 링크 관계 유형 중 하나가 "alternate"와 ASCII 대소문자를 구분하지 않고 일치하고 title이 빈 문자열이면 반환합니다.
3. input URL을 지정된 값으로 둡니다.

   더 구체적으로 명시해야 합니다.

4. base URL을 문서의 문서 기본 URL로 둡니다.

   이 시점에 문서가 있습니까?

5. referrer를 문서의 주소로 둡니다.
6. origin을 문서의 출처로 둡니다.
7. parsed URL을 문자열 input URL과 기본 URL base URL로 URL 파서를 호출한 반환값으로 둡니다.
8. parsed URL이 failure이면 반환합니다.
9. response를 구문 분석된 URL parsed URL, 리퍼러 referrer, 문서로서 해당 문서를 사용하여 CSS 스타일 시트를 가져온 결과로 둡니다.

   HTML 파서가 아직 쿼크/비쿼크 여부를 결정하지 않았다면 어떻게 합니까?

10. 다음 속성을 사용하여 CSS 스타일 시트를 생성합니다:

    위치

    parsed URL로 URL 직렬 변환기를 호출한 결과입니다.

    소유자 노드

    null.

    부모 CSS 스타일 시트

    null.

    소유자 CSS 규칙

    null.

    media

    첫 번째 media 매개변수의 값입니다.

    제목

    title.

    대체 플래그

    이 HTTP Link 헤더에 지정된 링크 관계 유형 중 하나가 "alternate"와 ASCII 대소문자를 구분하지 않고 일치하면 설정하고, 그렇지 않으면 false입니다.

    origin-clean 플래그

    response가 CORS-same-origin이면 설정하고, 그렇지 않으면 설정 해제합니다.

이 절의 규칙을 사용하여 HTTP Link 헤더가 참조하는 스타일 시트는 생성될 때 스타일 시트가 활성화되어 있었고, 사용자 에이전트가 아직 해당 스타일 시트를 포기하지 않았다면 스크립트를 차단하는 스타일 시트라고 합니다. 사용자 에이전트는 언제든지 이러한 스타일 시트를 포기할 수 있습니다.

6.4. CSS 규칙

CSS 규칙은 CSS 사양에서 정의된 규칙을 나타내는 추상적인 개념입니다. CSS 규칙은 CSSRule 인터페이스의 하위 클래스를 구현하는 객체로 표현되며, 다음과 같은 연결된 상태 항목을 가집니다:

타입

특정 유형의 규칙과 연결된 음이 아닌 정수입니다. 이 항목은 규칙이 생성될 때 초기화되며 변경할 수 없습니다.

텍스트

스타일 시트에서 직접 사용하기에 적합한 규칙의 텍스트 표현입니다. 이 항목은 규칙이 생성될 때 초기화되며 변경할 수 있습니다.

부모 CSS 규칙

이를 둘러싸는 CSS 규칙에 대한 참조 또는 null입니다. 규칙이 생성될 때 이를 둘러싸는 규칙이 있으면 이 항목은 해당 규칙으로 초기화되고, 그렇지 않으면 null입니다. null로 변경할 수 있습니다.

부모 CSS 스타일 시트

부모 CSS 스타일 시트에 대한 참조 또는 null입니다. 이 항목은 규칙이 생성될 때 연결된 스타일 시트를 참조하도록 초기화됩니다. null로 변경할 수 있습니다.

자식 CSS 규칙

자식 CSS 규칙의 목록입니다. 이 목록은 변경할 수 있습니다.

위 상태 외에도 각 CSS 규칙은 해당 타입에 따라 다른 상태와 연결될 수 있습니다.

문자열 string에서 CSS 규칙을 구문 분석하려면 다음 단계를 실행합니다:

1. rule을 string으로 규칙을 구문 분석한 반환값으로 둡니다.
2. rule이 구문 오류이면 rule을 반환합니다.
3. parsed rule을 적절한 CSS 사양에 따라 rule을 구문 분석하고, 무시한다고 명시된 부분을 제거한 결과로 둡니다. 스타일 규칙 전체가 제거되면 구문 오류를 반환합니다.
4. parsed rule을 반환합니다.

CSS 규칙을 직렬화하려면 CSS 규칙의 타입에 따라 다음 중 하나를 수행합니다:

CSSStyleRule

다음 단계의 결과를 반환합니다:

1. 처음에 s를 규칙과 연결된 선택자에 대해 선택자 그룹을 직렬화한 결과 뒤에 문자열 " {", 즉 단일 SPACE (U+0020) 뒤에 LEFT CURLY BRACKET (U+007B)을 붙인 것으로 둡니다.
2. decls를 규칙과 연결된 선언에 대해 CSS 선언 블록을 직렬화한 결과로 두고, 그러한 선언이 없으면 null로 둡니다.
3. rules를 규칙의 cssRules 목록의 각 규칙에 대해 CSS 규칙을 직렬화한 결과로 두고, 그러한 규칙이 없으면 null로 둡니다.
4. decls와 rules가 모두 null이면 " }"를 s에 추가하고(즉, 단일 SPACE (U+0020) 뒤에 RIGHT CURLY BRACKET (U+007D)을 붙임) s를 반환합니다.
5. rules가 null이면:
   1. 단일 SPACE (U+0020)를 s에 추가합니다.
   2. decls를 s에 추가합니다.
   3. " }"를 s에 추가합니다(즉, 단일 SPACE (U+0020) 뒤에 RIGHT CURLY BRACKET (U+007D)을 붙임).
   4. s를 반환합니다.
6. 그렇지 않으면:
   1. decls가 null이 아니면 이를 rules 앞에 붙입니다.
   2. rules의 각 rule에 대해:
      1. 줄바꿈 뒤에 두 개의 공백을 붙여 s에 추가합니다.
      2. rule을 s에 추가합니다.
   3. 줄바꿈 뒤에 RIGHT CURLY BRACKET (U+007D)을 붙여 s에 추가합니다.
   4. s를 반환합니다.

CSSImportRule

다음을 연결한 결과입니다:

1. 문자열 "@import" 뒤에 단일 SPACE (U+0020)를 붙입니다.
2. 규칙의 위치에 대해 URL을 직렬화한 결과입니다.
3. 규칙과 연결된 미디어 목록이 비어 있지 않으면 단일 SPACE (U+0020) 뒤에 미디어 목록에 대해 미디어 쿼리 목록을 직렬화한 결과를 붙입니다.
4. 문자열 ";", 즉 SEMICOLON (U+003B)입니다.

@import url("import.css");

@import url("print.css") print;

CSSMediaRule

다음을 연결한 결과입니다:

1. 문자열 "@media" 뒤에 단일 SPACE (U+0020)를 붙입니다.
2. 규칙의 미디어 쿼리 목록에 대해 미디어 쿼리 목록을 직렬화한 결과입니다.
3. 단일 SPACE (U+0020) 뒤에 문자열 "{", 즉 LEFT CURLY BRACKET (U+007B)을 붙이고, 그 뒤에 줄바꿈을 붙입니다.
4. 규칙의 cssRules 목록의 각 규칙에 대해 CSS 규칙을 직렬화한 결과를 줄바꿈으로 구분하고 두 개의 공백만큼 들여씁니다.
5. 줄바꿈 뒤에 문자열 "}", 즉 RIGHT CURLY BRACKET (U+007D)을 붙입니다.

CSSFontFaceRule

다음을 연결한 결과입니다:

1. 문자열 "@font-face {" 뒤에 단일 SPACE (U+0020)를 붙입니다.
2. 문자열 "font-family:" 뒤에 단일 SPACE (U+0020)를 붙입니다.
3. 규칙의 글꼴 패밀리 이름에 대해 문자열을 직렬화한 결과입니다.
4. 문자열 ";", 즉 SEMICOLON (U+003B)입니다.
5. 규칙과 연결된 소스 목록이 비어 있지 않으면 다음 하위 단계를 따릅니다:
   1. 단일 SPACE (U+0020) 뒤에 문자열 "src:", 다시 단일 SPACE (U+0020)를 붙입니다.
   2. 소스 목록의 각 소스에 대해 URL을 직렬화하거나 LOCAL을 직렬화한 결과에 쉼표로 구분된 목록을 직렬화하는 것을 호출한 결과입니다.
   3. 문자열 ";", 즉 SEMICOLON (U+003B)입니다.
6. 규칙과 연결된 unicode-range 설명자가 있으면, 단일 SPACE (U+0020) 뒤에 문자열 "unicode-range:", 단일 SPACE (U+0020), <'unicode-range'>를 직렬화한 결과, 문자열 ";", 즉 SEMICOLON (U+003B)을 차례로 붙입니다.
7. 규칙과 연결된 font-variant 설명자가 있으면, 단일 SPACE (U+0020) 뒤에 문자열 "font-variant:", 단일 SPACE (U+0020), <'font-variant'>를 직렬화한 결과, 문자열 ";", 즉 SEMICOLON (U+003B)을 차례로 붙입니다.
8. 규칙과 연결된 font-feature-settings 설명자가 있으면, 단일 SPACE (U+0020) 뒤에 문자열 "font-feature-settings:", 단일 SPACE (U+0020), <'font-feature-settings'>를 직렬화한 결과, 문자열 ";", 즉 SEMICOLON (U+003B)을 차례로 붙입니다.
9. 규칙과 연결된 font-stretch 설명자가 있으면, 단일 SPACE (U+0020) 뒤에 문자열 "font-stretch:", 단일 SPACE (U+0020), <'font-stretch'>를 직렬화한 결과, 문자열 ";", 즉 SEMICOLON (U+003B)을 차례로 붙입니다.
10. 규칙과 연결된 font-weight 설명자가 있으면, 단일 SPACE (U+0020) 뒤에 문자열 "font-weight:", 단일 SPACE (U+0020), <'font-weight'>를 직렬화한 결과, 문자열 ";", 즉 SEMICOLON (U+003B)을 차례로 붙입니다.
11. 규칙과 연결된 font-style 설명자가 있으면, 단일 SPACE (U+0020) 뒤에 문자열 "font-style:", 단일 SPACE (U+0020), <'font-style'>를 직렬화한 결과, 문자열 ";", 즉 SEMICOLON (U+003B)을 차례로 붙입니다.
12. 단일 SPACE (U+0020) 뒤에 문자열 "}", 즉 RIGHT CURLY BRACKET (U+007D)을 붙입니다.

CSSFontFaceRule 설명자의 값이 직렬화되는 방법을 정의해야 합니다.

CSSPageRule

CSSPageRule이 직렬화되는 방법을 정의해야 합니다.

CSSNamespaceRule

리터럴 문자열 "@namespace" 뒤에 단일 SPACE (U+0020), prefix 속성(있는 경우)을 식별자로 직렬화한 결과, 접두사가 있는 경우 단일 SPACE (U+0020), namespaceURI 속성을 URL로 직렬화한 결과, 문자 ";" (U+003B)을 차례로 붙입니다.

CSSKeyframesRule

다음을 연결한 결과입니다:

1. 리터럴 문자열 "@keyframes" 뒤에 단일 SPACE (U+0020)를 붙입니다.
2. name 속성을 식별자로 직렬화한 결과입니다.
3. 규칙의 cssRules 목록의 각 규칙에 대해 CSS 규칙을 직렬화한 결과를 줄바꿈으로 구분하고 두 개의 공백만큼 들여씁니다.
4. 줄바꿈 뒤에 문자열 "}", 즉 RIGHT CURLY BRACKET (U+007D)을 붙입니다.

CSSKeyframeRule

다음을 연결한 결과입니다:

1. keyText.
2. 문자열 " { ", 즉 단일 SPACE (U+0020) 뒤에 LEFT CURLY BRACKET (U+007B)을 붙입니다.
3. 규칙과 연결된 선언에 대해 CSS 선언 블록을 직렬화한 결과입니다.
4. 규칙에 하나 이상의 선언이 연결되어 있으면 문자열 " ", 즉 단일 SPACE (U+0020)입니다.
5. 문자열 "}", RIGHT CURLY BRACKET (U+007D)입니다.

"두 개의 공백만큼 들여쓰기" 부분은 브라우저와 일치하지만 추가 작업이 필요합니다. #5494를 참조하십시오.

CSS 규칙 목록 list의 인덱스 index 위치에 rule을 CSS 규칙으로 삽입하려면 다음 단계를 따릅니다:

1. length를 list에 있는 항목 수로 설정합니다.
2. index가 length보다 크면 IndexSizeError 예외를 던집니다.
3. new rule을 인수 rule에 대해 CSS 규칙 구문 분석을 수행한 결과로 설정합니다.
4. new rule이 구문 오류이면 SyntaxError 예외를 던집니다.
5. CSS에서 지정한 제약 조건으로 인해 new rule을 list의 0부터 시작하는 위치 index에 삽입할 수 없다면 HierarchyRequestError 예외를 던집니다. [CSS21]

   참고: 예를 들어, CSS 스타일 시트에는 스타일 규칙 뒤에 @import at-규칙이 올 수 없습니다.

6. new rule이 @namespace at-규칙이고, list에 @import at-규칙과 @namespace at-규칙 이외의 항목이 하나라도 포함되어 있으면 InvalidStateError 예외를 던집니다.
7. new rule을 list의 0부터 시작하는 위치 index에 삽입합니다.
8. index를 반환합니다.

CSS 규칙 목록 list의 인덱스 index 위치에서 CSS 규칙을 제거하려면 다음 단계를 따릅니다:

1. length를 list에 있는 항목 수로 설정합니다.
2. index가 length보다 크거나 같으면 IndexSizeError 예외를 던집니다.
3. old rule을 list의 index번째 항목으로 설정합니다.
4. old rule이 @namespace at-규칙이고, list에 @import at-규칙과 @namespace at-규칙 이외의 항목이 하나라도 포함되어 있으면 InvalidStateError 예외를 던집니다.
5. list의 0부터 시작하는 위치 index에서 규칙 old rule을 제거합니다.
6. old rule의 부모 CSS 규칙과 부모 CSS 스타일 시트를 null로 설정합니다.

6.4.1. CSSRuleList 인터페이스

CSSRuleList 인터페이스는 CSS 스타일 규칙의 순서가 있는 컬렉션을 나타냅니다.

[Exposed=Window]
interface CSSRuleList {
  getter CSSRule? item(unsigned long index);
  readonly attribute unsigned long length;
};

객체의 지원되는 속성 인덱스는 컬렉션이 나타내는 CSSRule 객체 수보다 하나 작은 값까지의 0부터 시작하는 숫자입니다. 이러한 CSSRule 객체가 없으면, 지원되는 속성 인덱스도 없습니다.

item(index) 메서드는 컬렉션의 index번째 CSSRule 객체를 반환해야 합니다. 컬렉션에 index번째 객체가 없으면 메서드는 null을 반환해야 합니다.

length 속성은 컬렉션이 나타내는 CSSRule 객체의 수를 반환해야 합니다.

6.4.2. CSSRule 인터페이스

CSSRule 인터페이스는 추상적인 기본 CSS 스타일 규칙을 나타냅니다. 서로 다른 각 CSS 스타일 규칙 유형은 이 인터페이스를 상속하는 서로 다른 인터페이스로 표현됩니다.

[Exposed=Window]
interface CSSRule {
  attribute CSSOMString cssText;
  readonly attribute CSSRule? parentRule;
  readonly attribute CSSStyleSheet? parentStyleSheet;

  // 다음 속성과 상수는 역사적 호환성을 위한 것입니다
  readonly attribute unsigned short type;
  const unsigned short STYLE_RULE = 1;
  const unsigned short CHARSET_RULE = 2;
  const unsigned short IMPORT_RULE = 3;
  const unsigned short MEDIA_RULE = 4;
  const unsigned short FONT_FACE_RULE = 5;
  const unsigned short PAGE_RULE = 6;
  const unsigned short MARGIN_RULE = 9;
  const unsigned short NAMESPACE_RULE = 10;
};

cssText 속성은 CSS 규칙의 직렬화를 반환해야 합니다. cssText 속성을 설정할 때는 아무것도 하지 않아야 합니다.

parentRule 속성은 부모 CSS 규칙을 반환해야 합니다.

참고: 예를 들어 @media는 규칙을 포함할 수 있으며, 이 경우 parentRule은 null이 아니게 됩니다. 이를 둘러싸는 규칙이 없는 경우에는 parentRule이 null이 됩니다.

parentStyleSheet 속성은 부모 CSS 스타일 시트를 반환해야 합니다.

참고: null이 반환되는 유일한 경우는 규칙이 제거된 경우입니다.

참고: LinkStyle 인터페이스를 구현하는 Node를 Document 인스턴스에서 제거하더라도 그 자체만으로 CSSRule이 참조하는 CSSStyleSheet에 접근할 수 없게 되는 것은 아닙니다.

type 속성은 사용 중단되었습니다. 이 속성은 다음과 같이 정수를 반환해야 합니다:

객체가 CSSStyleRule인 경우

1을 반환합니다.

객체가 CSSImportRule인 경우

3을 반환합니다.

객체가 CSSMediaRule인 경우

4를 반환합니다.

객체가 CSSFontFaceRule인 경우

5를 반환합니다.

객체가 CSSPageRule인 경우

6을 반환합니다.

객체가 CSSKeyframesRule인 경우

7을 반환합니다.

객체가 CSSKeyframeRule인 경우

8을 반환합니다.

객체가 CSSMarginRule인 경우

9를 반환합니다.

객체가 CSSNamespaceRule인 경우

10을 반환합니다.

객체가 CSSCounterStyleRule인 경우

11을 반환합니다.

객체가 CSSSupportsRule인 경우

12를 반환합니다.

객체가 CSSFontFeatureValuesRule인 경우

14를 반환합니다.

객체가 CSSViewportRule인 경우

15를 반환합니다.

그렇지 않으면

0을 반환합니다.

참고: 정수 열거형과 여러 상수를 사용하여 정수를 식별하는 방식은 더 이상 Web API에서 사용되지 않는 레거시 설계 방식입니다. 대신 주어진 객체가 어떤 유형의 규칙인지 확인하려면 rule.constructor.name을 확인하는 것이 권장되며, 이는 "CSSStyleRule"과 같은 문자열을 반환합니다.

6.4.3. CSSStyleRule 인터페이스

CSSStyleRule 인터페이스는 스타일 규칙을 나타냅니다.

[Exposed=Window]
interface CSSStyleRule : CSSRule {
  attribute CSSOMString selectorText;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

selectorText 속성은 가져올 때 연결된 선택자 그룹을 직렬화한 결과를 반환해야 합니다. selectorText 속성을 설정할 때는 다음 단계를 실행해야 합니다:

1. 주어진 값에 대해 선택자 그룹을 구문 분석하는 알고리즘을 실행합니다.
2. 알고리즘이 null이 아닌 값을 반환하면 연결된 선택자 그룹을 반환된 값으로 교체합니다.
3. 그렇지 않고 알고리즘이 null 값을 반환하면 아무것도 하지 않습니다.

style 속성은 스타일 규칙에 대해 다음 속성을 가진 CSSStyleDeclaration 객체를 반환해야 합니다:

계산됨 플래그

설정 해제됨.

선언

규칙에 선언된 선언을 지정된 순서대로 나열한 것입니다.

부모 CSS 규칙

컨텍스트 객체입니다.

소유자 노드

Null.

선언의 지정된 순서는 지정된 순서와 동일하지만, 단축 속성을 정규 순서의 상세 속성으로 확장합니다. 속성이 두 번 이상 지정된 경우(단축 속성 확장 후) 캐스케이딩 순서가 가장 높은 것만 지정된 것과 동일한 상대적 위치에 나타내야 합니다. [CSS3CASCADE]

6.4.4. CSSImportRule 인터페이스

CSSImportRule 인터페이스는 @import at-규칙을 나타냅니다.

[Exposed=Window]
interface CSSImportRule : CSSRule {
  readonly attribute USVString href;
  [SameObject, PutForwards=mediaText] readonly attribute MediaList media;
  [SameObject] readonly attribute CSSStyleSheet styleSheet;
};

href 속성은 @import at-규칙에 지정된 URL을 반환해야 합니다.

참고: 해석된 URL을 얻으려면 연결된 CSS 스타일 시트의 href 속성을 사용합니다.

media 속성은 연결된 CSS 스타일 시트의 media 속성 값을 반환해야 합니다.

styleSheet 속성은 연결된 CSS 스타일 시트를 반환해야 합니다.

참고: @import at-규칙에는 항상 연결된 CSS 스타일 시트가 있습니다.

6.4.5. CSSGroupingRule 인터페이스

CSSGroupingRule 인터페이스는 내부에 다른 규칙이 중첩된 at-규칙을 나타냅니다.

[Exposed=Window]
interface CSSGroupingRule : CSSRule {
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  undefined deleteRule(unsigned long index);
};

cssRules 속성은 자식 CSS 규칙에 대한 CSSRuleList 객체를 반환해야 합니다.

insertRule(rule, index) 메서드는 자식 CSS 규칙의 index 위치에 rule을 CSS 규칙으로 삽입한 결과를 반환해야 합니다.

deleteRule(index) 메서드는 자식 CSS 규칙의 index 위치에서 CSS 규칙을 제거해야 합니다.

6.4.6. CSSMediaRule 인터페이스

CSSMediaRule 인터페이스는 CSS 조건부 규칙에서 정의됩니다. [CSS3-CONDITIONAL]

6.4.7. CSSPageRule 인터페이스

CSSPageRule 인터페이스는 @page at-규칙을 나타냅니다.

CSS 페이지 선택자 목록을 구문 분석하고 CSS 페이지 선택자 목록을 직렬화하는 규칙을 정의해야 합니다.

[Exposed=Window]
interface CSSPageRule : CSSGroupingRule {
           attribute CSSOMString selectorText;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

selectorText 속성은 가져올 때 연결된 CSS 페이지 선택자 목록을 직렬화한 결과를 반환해야 합니다. selectorText 속성을 설정할 때는 다음 단계를 실행해야 합니다:

1. 주어진 값에 대해 CSS 페이지 선택자 목록을 구문 분석하는 알고리즘을 실행합니다.
2. 알고리즘이 null이 아닌 값을 반환하면 연결된 CSS 페이지 선택자 목록을 반환된 값으로 교체합니다.
3. 그렇지 않고 알고리즘이 null 값을 반환하면 아무것도 하지 않습니다.

style 속성은 @page at-규칙에 대해 다음 속성을 가진 CSSStyleDeclaration 객체를 반환해야 합니다:

계산됨 플래그

설정 해제됨.

선언

규칙에 선언된 선언을 지정된 순서대로 나열한 것입니다.

부모 CSS 규칙

컨텍스트 객체입니다.

소유자 노드

Null.

6.4.8. CSSMarginRule 인터페이스

CSSMarginRule 인터페이스는 @page at-규칙 내부의 여백 at-규칙(예: @top-left)을 나타냅니다. [CSS3PAGE]

[Exposed=Window]
interface CSSMarginRule : CSSRule {
  readonly attribute CSSOMString name;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

name 속성은 여백 at-규칙의 이름을 반환해야 합니다. @ 문자는 이름에 포함되지 않습니다. [CSS3SYN]

style 속성은 여백 at-규칙에 대해 다음 속성을 가진 CSSStyleDeclaration 객체를 반환해야 합니다:

계산됨 플래그

설정 해제됨.

선언

규칙에 선언된 선언을 지정된 순서대로 나열한 것입니다.

부모 CSS 규칙

컨텍스트 객체입니다.

소유자 노드

Null.

6.4.9. CSSNamespaceRule 인터페이스

CSSNamespaceRule 인터페이스는 @namespace at-규칙을 나타냅니다.

[Exposed=Window]
interface CSSNamespaceRule : CSSRule {
  readonly attribute CSSOMString namespaceURI;
  readonly attribute CSSOMString prefix;
};

namespaceURI 속성은 @namespace at-규칙의 네임스페이스를 반환해야 합니다.

prefix 속성은 @namespace at-규칙의 접두사를 반환해야 하며, 접두사가 없으면 빈 문자열을 반환해야 합니다.

6.5. CSS 선언

CSS 선언은 DOM에서 객체로 노출되지 않는 추상적인 개념입니다. CSS 선언에는 다음과 같은 연결된 속성이 있습니다:

속성 이름

선언의 속성 이름입니다.

값

컴포넌트 값 목록으로 표현된 선언의 값입니다.

important 플래그

설정되거나 설정 해제됩니다. 변경할 수 있습니다.

대소문자 구분 플래그

속성 이름이 해당 사양에 따라 대소문자를 구분하도록 정의되어 있으면 설정하고, 그렇지 않으면 설정 해제합니다.

6.6. CSS 선언 블록

CSS 선언 블록은 CSS 속성과 연결된 값의 순서가 있는 컬렉션이며, CSS 선언이라고도 합니다. DOM에서 CSS 선언 블록은 CSSStyleDeclaration 객체입니다. CSS 선언 블록에는 다음과 같은 연결된 속성이 있습니다:

계산됨 플래그

객체가 지정된 스타일이 아니라 계산된 스타일 선언인 경우 설정됩니다. 별도로 명시하지 않는 한 설정 해제됩니다.

선언

객체와 연결된 CSS 선언입니다.

부모 CSS 규칙

CSS 선언 블록과 연결된 CSS 규칙이 있으면 해당 규칙이고, 그렇지 않으면 null입니다.

소유자 노드

CSS 선언 블록과 연결된 Element가 있으면 해당 요소이고, 그렇지 않으면 null입니다.

업데이트 중 플래그

기본값은 설정 해제입니다. CSS 선언 블록이 소유자 노드의 style 속성을 업데이트할 때 설정됩니다.

문자열 string에서 CSS 선언 블록을 구문 분석하려면 다음 단계를 따릅니다:

1. declarations를 string으로 선언 목록을 구문 분석한 반환값으로 둡니다.
2. parsed declarations를 새로운 빈 목록으로 둡니다.
3. declarations의 각 항목 declaration에 대해 다음 하위 단계를 따릅니다:
   1. parsed declaration을 적절한 CSS 사양에 따라 declaration을 구문 분석하고 무시한다고 명시된 부분을 제거한 결과로 둡니다. 선언 전체가 제거되면 parsed declaration을 null로 둡니다.
   2. parsed declaration이 null이 아니면 이를 parsed declarations에 추가합니다.
4. parsed declarations를 반환합니다.

속성 이름 property, 값 value, 선택적으로 설정된 important 플래그를 사용하여 CSS 선언을 직렬화하려면 다음 단계를 따릅니다:

1. s를 빈 문자열로 둡니다.
2. property를 s에 추가합니다.
3. ": " (U+003A U+0020)를 s에 추가합니다.
4. value를 s에 추가합니다.
5. important 플래그가 설정되어 있으면 " !important" (U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E U+0074)를 s에 추가합니다.
6. ";" (U+003B)을 s에 추가합니다.
7. s를 반환합니다.

CSS 선언 블록을 직렬화한다는 것은 declaration block에 대해 아래 단계를 실행하는 것을 의미합니다:

1. list를 빈 배열로 둡니다.
2. already serialized를 빈 배열로 둡니다.
3. 선언 루프: declaration block의 선언에 있는 각 CSS 선언 declaration에 대해 다음 하위 단계를 따릅니다:
   1. property를 declaration의 속성 이름으로 둡니다.
   2. property가 already serialized에 있으면 선언 루프라고 표시된 단계로 계속합니다.
   3. property가 하나 이상의 단축 속성에 매핑되면 shorthands를 해당 단축 속성의 배열로 선호 순서대로 둡니다.
   4. 단축 속성 루프: shorthands의 각 shorthand에 대해 다음 하위 단계를 따릅니다:
      1. longhands를 declaration block의 선언에 있는 모든 CSS 선언 중 already serialized에 없고 속성 이름이 shorthands의 단축 속성 중 하나에 매핑되는 것들로 구성된 배열로 둡니다.
      2. shorthand에 매핑되는 모든 속성이 longhands에 존재하지 않으면 단축 속성 루프라고 표시된 단계로 계속합니다.
      3. current longhands를 빈 배열로 둡니다.
      4. longhands의 CSS 선언 중 속성 이름이 shorthand에 매핑되는 모든 항목을 current longhands에 추가합니다.
      5. current longhands의 CSS 선언 중 하나 이상은 important 플래그가 설정되어 있고 하나 이상은 설정 해제되어 있으면 단축 속성 루프라고 표시된 단계로 계속합니다.
      6. declaration block에서 current longhands의 첫 번째와 마지막 상세 속성 사이에 같은 논리 속성 그룹에 속하지만, current longhands의 상세 속성 중 하나와 다른 매핑 논리를 가지며 current longhands에는 없는 선언이 있으면 단축 속성 루프라고 표시된 단계로 계속합니다.
      7. value를 current longhands의 CSS 값을 직렬화한 결과로 둡니다.
      8. value가 빈 문자열이면 단축 속성 루프라고 표시된 단계로 계속합니다.
      9. serialized declaration을 속성 이름 shorthand, 값 value를 사용하고, current longhands의 CSS 선언의 important 플래그가 설정되어 있으면 important 플래그도 설정하여 CSS 선언을 직렬화한 결과로 둡니다.
      10. serialized declaration을 list에 추가합니다.
      11. current longhands의 모든 항목의 속성 이름을 already serialized에 추가합니다.
      12. 선언 루프라고 표시된 단계로 계속합니다.
   5. value를 declaration의 CSS 값을 직렬화한 결과로 둡니다.
   6. serialized declaration을 속성 이름 property, 값 value를 사용하고, declaration의 important 플래그가 설정되어 있으면 important 플래그도 설정하여 CSS 선언을 직렬화한 결과로 둡니다.
   7. serialized declaration을 list에 추가합니다.
   8. property를 already serialized에 추가합니다.
4. list를 " " (U+0020)로 연결한 결과를 반환합니다.

참고: 빈 CSS 선언 블록의 직렬화 결과는 빈 문자열입니다.

참고: 비어 있지 않은 CSS 선언 블록의 직렬화에는 주변 공백이 포함되지 않습니다. 즉, 첫 번째 속성 이름 앞에는 공백이 없으며 마지막 속성 값 뒤의 최종 세미콜론 구분자 뒤에도 공백이 없습니다.

CSS 선언 블록에는 localName, value, namespace가 주어진 소유자 노드에 대해 다음 속성 변경 단계가 있습니다:

1. 계산됨 플래그가 설정되어 있으면 반환합니다.
2. 업데이트 중 플래그가 설정되어 있으면 반환합니다.
3. localName이 "style"이 아니거나 namespace가 null이 아니면 반환합니다.
4. value가 null이면 선언을 비웁니다.
5. 그렇지 않으면 선언을 문자열 value에서 CSS 선언 블록을 구문 분석한 결과로 둡니다.

CSS 선언 블록 객체가 생성되면:

1. owner node를 소유자 노드로 둡니다.
2. owner node가 null이거나 계산됨 플래그가 설정되어 있으면 반환합니다.
3. value를 null, "style", owner node가 주어진 상태에서 속성을 가져온 결과로 둡니다.
4. value가 null이 아니면 선언을 문자열 value에서 CSS 선언 블록을 구문 분석한 결과로 둡니다.

declaration block에 대해 style 속성을 업데이트한다는 것은 아래 단계를 실행하는 것을 의미합니다:

1. 단언: declaration block의 계산됨 플래그는 설정 해제되어 있습니다.
2. owner node를 declaration block의 소유자 노드로 둡니다.
3. owner node가 null이면 반환합니다.
4. declaration block의 업데이트 중 플래그를 설정합니다.
5. "style"과 declaration block을 직렬화한 결과를 사용하여 owner node의 속성 값을 설정합니다.
6. declaration block의 업데이트 중 플래그를 설정 해제합니다.

단축 속성 목록 shorthands의 선호 순서는 다음과 같습니다:

1. shorthands를 사전식으로 정렬합니다.
2. "-" (U+002D)로 시작하는 shorthands의 모든 항목을 상대적 순서를 유지하면서 목록의 마지막으로 이동합니다.
3. "-" (U+002D)로 시작하지만 "-webkit-"로 시작하지 않는 shorthands의 모든 항목을 상대적 순서를 유지하면서 목록의 마지막으로 이동합니다.
4. shorthands를 매핑되는 상세 속성의 수에 따라 정렬하며, 가장 많은 수를 먼저 배치합니다.

6.6.1. CSSStyleDeclaration 인터페이스

CSSStyleDeclaration 인터페이스는 CSS 선언 블록을 나타내며, 여기에는 그 내부 상태도 포함되고, 이 내부 상태는 CSSStyleDeclaration 인스턴스의 출처에 따라 달라집니다.

[Exposed=Window]
interface CSSStyleDeclaration {
  [CEReactions] attribute CSSOMString cssText;
  readonly attribute unsigned long length;
  getter CSSOMString item(unsigned long index);
  CSSOMString getPropertyValue(CSSOMString property);
  CSSOMString getPropertyPriority(CSSOMString property);
  [CEReactions] undefined setProperty(CSSOMString property, [LegacyNullToEmptyString] CSSOMString value, optional [LegacyNullToEmptyString] CSSOMString priority = "");
  [CEReactions] CSSOMString removeProperty(CSSOMString property);
  readonly attribute CSSRule? parentRule;
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString cssFloat;
};

객체의 지원되는 속성 인덱스는 선언에 있는 CSS 선언의 개수보다 하나 작은 수까지 0부터 시작하는 숫자입니다. 이러한 CSS 선언이 없으면 지원되는 속성 인덱스도 없습니다.

cssText 속성을 가져올 때는 다음 단계를 실행해야 합니다:

1. 계산됨 플래그가 설정되어 있으면 빈 문자열을 반환합니다.

2. 선언을 직렬화한 결과를 반환합니다.

cssText 속성을 설정할 때는 다음 단계를 실행해야 합니다:

1. 계산됨 플래그가 설정되어 있으면 NoModificationAllowedError 예외를 던집니다.
2. 선언을 비웁니다.
3. 주어진 값을 구문 분석하고, 반환 값이 빈 목록이 아니면 목록의 항목을 선언에 지정된 순서대로 삽입합니다.
4. 스타일 속성을 업데이트합니다: CSS 선언 블록.

length 속성은 선언에 있는 CSS 선언의 개수를 반환해야 합니다.

item(index) 메서드는 index 위치의 CSS 선언의 속성 이름을 반환해야 합니다.

getPropertyValue(property) 메서드는 다음 단계를 실행해야 합니다:

1. property가 사용자 지정 속성이 아니면 다음 하위 단계를 따릅니다:
   1. property를 property를 ASCII 소문자로 변환한 값으로 둡니다.
   2. property가 단축 속성이면 다음 하위 단계를 따릅니다:
      1. list를 새로운 빈 배열로 둡니다.
      2. property가 매핑되는 각 상세 속성 longhand에 대해 정규 순서대로 다음 하위 단계를 따릅니다:
         1. longhand가 선언에 있는 CSS 선언의 속성 이름과 대소문자를 구분하여 일치하면 declaration을 해당 CSS 선언으로 두고, 그렇지 않으면 null로 둡니다.
         2. declaration이 null이면 빈 문자열을 반환합니다.
         3. declaration을 list에 추가합니다.
      3. list에 있는 모든 선언의 important 플래그가 같으면 list의 직렬화를 반환합니다.
      4. 빈 문자열을 반환합니다.
2. property가 선언에 있는 CSS 선언의 속성 이름과 대소문자를 구분하여 일치하면, 해당 선언의 CSS 값을 직렬화한 결과를 반환합니다.
3. 빈 문자열을 반환합니다.

getPropertyPriority(property) 메서드는 다음 단계를 실행해야 합니다:

1. property가 사용자 지정 속성이 아니면 다음 하위 단계를 따릅니다:
   1. property를 property를 ASCII 소문자로 변환한 값으로 둡니다.
   2. property가 단축 속성이면 다음 하위 단계를 따릅니다:
      1. list를 새로운 배열로 둡니다.
      2. property가 매핑되는 각 상세 속성 longhand에 대해 longhand를 인수로 하여 getPropertyPriority()를 호출한 결과를 list에 추가합니다.
      3. list의 모든 항목이 문자열 "important"이면 문자열 "important"를 반환합니다.
2. property가 선언에 있는 CSS 선언의 속성 이름과 대소문자를 구분하여 일치하고, 해당 선언에 important 플래그가 설정되어 있으면 문자열 "important"를 반환합니다.
3. 빈 문자열을 반환합니다.

setProperty(property, value, priority) 메서드는 다음 단계를 실행해야 합니다:

1. 계산됨 플래그가 설정되어 있으면 NoModificationAllowedError 예외를 던집니다.
2. property가 사용자 정의 속성이 아니면 다음 하위 단계를 따릅니다.
   1. property를 property를 ASCII 소문자로 변환한 값으로 설정합니다.
   2. property가 대소문자를 구분하여 지원되는 CSS 속성과 일치하지 않으면 반환합니다.
3. value가 빈 문자열이면 property를 인수로 하여 removeProperty()를 호출하고 반환합니다.
4. priority가 빈 문자열이 아니고 문자열 "important"와 ASCII 대소문자를 구분하지 않고 일치하지 않으면 반환합니다.
5. component value list를 속성 property에 대해 value를 구문 분석한 결과로 설정합니다.

   참고: value에는 "!important"를 포함할 수 없습니다.

6. component value list가 null이면 반환합니다.
7. updated를 false로 설정합니다.
8. property가 단축 속성이면 property가 매핑되는 각 장축 속성 longhand에 대해 정규 순서대로 다음 하위 단계를 따릅니다.
   1. longhand result를 component value list의 적절한 값으로 longhand CSS 선언을 설정한 결과로 설정합니다. 이때 priority가 빈 문자열이 아니면 important 플래그를 설정하고, 그렇지 않으면 설정하지 않으며, 선언 목록은 선언으로 합니다.
   2. longhand result가 true이면 updated를 true로 설정합니다.
9. 그렇지 않으면 updated를 값 component value list로 property CSS 선언을 설정한 결과로 설정합니다. 이때 priority가 빈 문자열이 아니면 important 플래그를 설정하고, 그렇지 않으면 설정하지 않으며, 선언 목록은 선언으로 합니다.
10. updated가 true이면 스타일 속성을 업데이트합니다: CSS 선언 블록.

선언 목록 declarations에서 값 component value list와 선택적으로 설정된 important 플래그를 사용하여 property의 CSS 선언을 설정하려면, 사용자 에이전트는 단계가 끝난 후 다음 제약 조건이 충족되도록 해야 합니다:

• 속성 이름이 property와 대소문자를 구분하여 일치하는 CSS 선언이 정확히 하나 declarations에 존재해야 합니다. 이러한 선언을 아래에서 target declaration이라고 합니다.
• target declaration의 값은 component value list여야 하며, target declaration의 important 플래그는 important 플래그가 설정되어 있으면 설정되어야 하고, 그렇지 않으면 설정 해제되어야 합니다.
• target declaration이 아닌 모든 CSS 선언은 변경되거나 삽입되거나 declarations에서 제거되어서는 안 됩니다.
• declarations에 property와 같은 논리 속성 그룹에 속하지만 서로 다른 매핑 논리를 가진 CSS 선언이 있고, 그 속성 이름이 그러한 경우 target declaration은 해당 CSS 선언 모두보다 뒤의 인덱스에 있어야 합니다.
• 단계의 결과로 declarations의 직렬화가 변경되었다면 단계는 true를 반환해야 합니다. 그렇지 않으면 false를 반환해도 됩니다.

"관찰 가능한 부수 효과는 declarations 외부에서 발생해서는 안 된다"와 같은 내용을 추가해야 할까요? 현재 제약 조건은 정의되지 않은 동작이 발생할 여지를 남기는 것처럼 보입니다.

참고: CSS 선언을 설정하는 단계는 이 수준의 CSSOM에서는 정의되지 않습니다. 사용자 에이전트는 위의 제약 조건을 충족하는 한 서로 다른 알고리즘을 사용할 수 있습니다.

removeProperty(property) 메서드는 다음 단계를 실행해야 합니다:

1. 계산됨 플래그가 설정되어 있으면 NoModificationAllowedError 예외를 던집니다.
2. property가 사용자 정의 속성이 아니면, property를 property를 ASCII 소문자로 변환한 값으로 설정합니다.
3. value를 property를 인수로 하여 getPropertyValue()를 호출한 반환 값으로 설정합니다.
4. removed를 false로 설정합니다.
5. property가 단축 속성이면 property가 매핑되는 각 장축 속성 longhand에 대해:
   1. longhand가 선언에 있는 CSS 선언의 속성 이름이 아니면 계속합니다.
   2. 해당 CSS 선언을 제거하고 removed를 true로 설정합니다.
6. 그렇지 않고, property가 속성 이름 중 하나와 대소문자를 구분하여 일치하고, 그 속성 이름이 CSS 선언에 있으며 해당 선언이 선언에 포함되어 있으면, 해당 CSS 선언을 제거하고 removed를 true로 설정합니다.
7. removed가 true이면 스타일 속성을 업데이트합니다: CSS 선언 블록.
8. value를 반환합니다.

parentRule 속성은 부모 CSS 규칙을 반환해야 합니다.

cssFloat 속성은 가져올 때 float를 인수로 하여 getPropertyValue()를 호출한 결과를 반환해야 합니다. 설정할 때 속성은 setProperty()를 첫 번째 인수로 float, 두 번째 인수로 주어진 값을 사용하고 세 번째 인수 없이 호출해야 합니다. 발생한 모든 예외는 다시 던져야 합니다.

지원되는 CSS 속성인 각 CSS 속성 property에 대해, 다음 부분 인터페이스가 적용되며 여기서 camel-cased 속성은 property에 대해 CSS 속성을 IDL 속성으로 변환하는 알고리즘을 실행하여 얻습니다.

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString _camel_cased_attribute;
};

camel-cased attribute 속성은 가져올 때 camel-cased attribute에 대해 IDL 속성을 CSS 속성으로 변환하는 알고리즘을 실행한 결과를 인수로 사용하여 getPropertyValue()를 호출한 결과를 반환해야 합니다.

camel-cased attribute 속성을 설정할 때는 camel-cased attribute에 대해 IDL 속성을 CSS 속성으로 변환하는 알고리즘을 실행한 결과를 첫 번째 인수로, 주어진 값을 두 번째 인수로 사용하고 세 번째 인수 없이 setProperty()를 호출해야 합니다. 발생한 모든 예외는 다시 던져야 합니다.

지원되는 CSS 속성이면서 문자열 -webkit-로 시작하는 각 CSS 속성 property에 대해 다음 부분 인터페이스가 적용되며, 여기서 webkit-cased attribute는 lowercase first 플래그를 설정하고 property에 대해 CSS 속성을 IDL 속성으로 변환하는 알고리즘을 실행하여 얻습니다.

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString _webkit_cased_attribute;
};

webkit-cased attribute 속성은 가져올 때 dash prefix 플래그를 설정하고 webkit-cased attribute에 대해 IDL 속성을 CSS 속성으로 변환하는 알고리즘을 실행한 결과를 인수로 사용하여 getPropertyValue()를 호출한 결과를 반환해야 합니다.

webkit-cased attribute 속성을 설정할 때는 webkit-cased attribute에 대해 IDL 속성을 CSS 속성으로 변환하는 알고리즘을 dash prefix 플래그를 설정하여 실행한 결과를 첫 번째 인수로, 주어진 값을 두 번째 인수로 사용하고 세 번째 인수 없이 setProperty()를 호출해야 합니다. 발생한 모든 예외는 다시 던져야 합니다.

지원되는 CSS 속성인 각 CSS 속성 property에 대해, 속성 이름에 "-" (U+002D)이 없는 속성을 제외하고, 다음 부분 인터페이스가 적용되며 여기서 dashed attribute는 property입니다.

partial interface CSSStyleDeclaration {
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString _dashed_attribute;
};

dashed attribute 속성은 가져올 때 dashed attribute를 인수로 사용하여 getPropertyValue()를 호출한 결과를 반환해야 합니다.

dashed attribute 속성을 설정할 때는 dashed attribute를 첫 번째 인수로, 주어진 값을 두 번째 인수로 사용하고 세 번째 인수 없이 setProperty()를 호출해야 합니다. 발생한 모든 예외는 다시 던져야 합니다.

element.style['font-size'];

property에 대한 CSS 속성을 IDL 속성으로 변환하는 알고리즘은, 선택적으로 lowercase first 플래그가 설정된 경우 다음과 같습니다:

1. output을 빈 문자열로 둡니다.
2. uppercase next를 설정 해제된 상태로 둡니다.
3. lowercase first 플래그가 설정되어 있으면 property에서 첫 번째 문자를 제거합니다.
4. property의 각 문자 c에 대해:
   1. c가 "-" (U+002D)이면 uppercase next를 설정합니다.
   2. 그렇지 않고 uppercase next가 설정되어 있으면 uppercase next를 설정 해제하고 c를 ASCII 대문자로 변환하여 output에 추가합니다.
   3. 그렇지 않으면 c를 output에 추가합니다.
5. output을 반환합니다.

attribute에 대한 IDL 속성을 CSS 속성으로 변환하는 알고리즘은, 선택적으로 dash prefix 플래그가 설정된 경우 다음과 같습니다:

1. output을 빈 문자열로 둡니다.
2. dash prefix 플래그가 설정되어 있으면 "-" (U+002D)를 output에 추가합니다.
3. attribute의 각 문자 c에 대해:
   1. c가 U+0041에서 U+005A 범위(ASCII 대문자)에 있으면 "-" (U+002D) 뒤에 c를 ASCII 소문자로 변환한 값을 붙여 output에 추가합니다.
   2. 그렇지 않으면 c를 output에 추가합니다.
4. output을 반환합니다.

6.7. CSS 값

6.7.1. CSS 값 구문 분석

주어진 property에 대해 value를 CSS 값으로 구문 분석한다는 것은 다음 단계를 따르는 것을 의미합니다:

1. list를 value에서 컴포넌트 값 목록을 구문 분석하여 반환된 값으로 둡니다.
2. list를 CSS 사양의 속성 property에 대한 문법과 대조합니다.
3. 위 단계가 실패하면 null을 반환합니다.
4. list를 반환합니다.

참고: "!important" 선언은 속성 값 공간의 일부가 아니므로 CSS 값 구문 분석이 null을 반환하게 됩니다.

6.7.2. CSS 값 직렬화

CSS 선언 declaration 또는 상세 CSS 선언 목록 list의 CSS 값을 직렬화하려면 다음 규칙을 따릅니다:

1. 이 알고리즘이 목록 list와 함께 호출된 경우:

   1. shorthand를 list의 모든 상세 속성에 정확히 매핑되는 선호 순서상 첫 번째 단축 속성으로 둡니다.

   2. 그러한 단축 속성이 없거나 shorthand가 list의 모든 속성 값을 정확히 나타낼 수 없으면 빈 문자열을 반환합니다.

   3. 그렇지 않으면 list의 선언들의 결합된 값을 나타내는 값을 가진 속성 shorthand의 가상 선언에서 CSS 값을 직렬화합니다.

2. declaration의 값을 CSS 컴포넌트 값 components의 목록으로 표현합니다. 이 목록은 속성 문법에 따라 구문 분석될 때 해당 값을 나타내야 합니다. 또한:

   • 특정 컴포넌트 값이 값의 의미를 변경하지 않고 어떤 순서로든 나타날 수 있다면 (값 구문에서 일반적으로 이중 세로줄 ||로 표현되는 패턴), 컴포넌트 값을 속성 정의 표에 제시된 컴포넌트 값의 정규 순서를 사용하도록 재정렬합니다.

   • 값의 의미를 변경하지 않고 컴포넌트 값을 생략하거나 더 짧은 표현으로 대체할 수 있다면 생략하거나 대체합니다.

   • 위 구문 변환 중 하나라도 이전 버전과의 호환성이 더 낮아진다면 수행하지 않습니다.

   참고: 여기에서 설명하는 규칙은 직렬화의 일반적인 원칙을 개괄합니다. 레거시 이유로 일부 속성은 다른 방식으로 직렬화되며, 리소스 부족으로 인해 여기서는 의도적으로 정의하지 않습니다. 자세한 내용은 가까운 리버스 엔지니어에게 문의하십시오.

3. components에서 모든 <whitespace-token>을 제거합니다.

4. components의 각 컴포넌트 값을 CSS 컴포넌트 값을 직렬화한 결과로 교체합니다.

5. components의 항목을 하나의 문자열로 연결하면서, 두 번째 항목이 "," (U+002C COMMA)가 아닌 경우 각 항목 쌍 사이에 " " (U+0020 SPACE)을 삽입합니다. 그 결과를 반환합니다.

CSS 컴포넌트 값을 직렬화하는 방법은 컴포넌트에 따라 다음과 같습니다:

키워드

키워드를 ASCII 소문자로 변환합니다.

<angle>

<number>에 따라 직렬화한 <number> 컴포넌트 뒤에 해당 사양에서 정의한 정규 형식의 단위를 붙입니다.

지정된 값과 계산된 값/해결된 값을 구분해야 할 것입니다.

<color>

<color>가 해결된 값의 컴포넌트이면 CSS Color 4 § 4.6 <color> 값 해결을 참조하십시오.

<color>가 계산된 값의 컴포넌트이면 CSS Color 4 § 4.7 <color> 값 직렬화를 참조하십시오.

<color>가 지정된 값의 컴포넌트이면 다음과 같이 색상을 반환합니다:

1. 색상이 작성자에 의해 명시적으로 지정된 경우 원래 작성자가 지정한 색상 값을 반환합니다.
2. 그렇지 않으면 색상이 계산된 값의 컴포넌트인 경우 반환되는 값을 반환합니다.

작성자가 지정한 값도 계산된 값과 마찬가지로 대소문자를 정규화해야 할까요? 아니면 원래의 대소문자를 보존해야 할까요?

<alphavalue>

값이 내부적으로 0 이상 255 이하의 정수(즉, 8비트 부호 없는 정수)로 표현되는 경우, 다음 단계를 따릅니다:

1. alpha를 주어진 정수로 둡니다.
2. 0 이상 100 이하의 정수 중 2.55를 곱하고 가장 가까운 정수로 반올림했을 때(두 값이 동일하게 가까우면 올림) alpha와 같아지는 값이 있으면, rounded를 해당 정수를 100으로 나눈 값으로 둡니다.
3. 그렇지 않으면 rounded를 alpha를 0.255로 나눈 뒤 가장 가까운 정수로 반올림하고(두 값이 동일하게 가까우면 올림), 다시 1000으로 나눈 값으로 둡니다.
4. rounded를 <number>로 직렬화한 결과를 반환합니다.

그렇지 않으면 주어진 값을 <number>로 직렬화한 결과를 반환합니다.

<counter>

다음 알고리즘의 반환값입니다:

1. s를 빈 문자열로 둡니다.
2. <counter>에 CSS 컴포넌트 값이 세 개 있으면 문자열 "counters("를 s에 추가합니다.
3. <counter>에 CSS 컴포넌트 값이 두 개 있으면 문자열 "counter("를 s에 추가합니다.
4. list를 <counter>에 속하는 CSS 컴포넌트 값 목록으로 두되, 마지막 CSS 컴포넌트 값이 "decimal"이면 이를 생략합니다.
5. list의 각 항목을 해당 항목에 대해 CSS 컴포넌트 값을 직렬화한 결과로 둡니다.
6. list에 대해 쉼표로 구분된 목록을 직렬화한 결과를 s에 추가합니다.
7. ")" (U+0029)를 s에 추가합니다.
8. s를 반환합니다.

<frequency>

<number>에 따라 직렬화한 <number> 컴포넌트 뒤에 해당 사양에서 정의한 정규 형식의 단위를 붙입니다.

지정된 값과 계산된 값/해결된 값을 구분해야 할 것입니다.

<identifier>

식별자를 식별자로 직렬화합니다.

<integer>

숫자 0-9(U+0030에서 U+0039)를 사용하여 가능한 가장 짧은 형식으로 표현한 10진 정수이며, 음수이면 앞에 "-" (U+002D)를 붙입니다.

<length>

<number>에 따라 직렬화한 <number> 컴포넌트 뒤에 해당 사양에서 정의한 정규 형식의 단위를 붙입니다.

지정된 값과 계산된 값/해결된 값을 구분해야 할 것입니다.

<number>

숫자 0-9(U+0030에서 U+0039)를 사용하여 가능한 가장 짧은 형식으로 표현한 10진수이며, 소수 부분이 있으면 "."로 구분하고, 필요한 경우 소수점 이하 6자리를 넘지 않도록 값을 반올림하며, 음수이면 앞에 "-" (U+002D)를 붙입니다.

참고: 과학적 표기법은 사용하지 않습니다.

<percentage>

<number>에 따라 직렬화한 <number> 컴포넌트 뒤에 리터럴 문자열 "%" (U+0025)를 붙입니다.

<resolution>

CSS 픽셀당 도트 수로 나타낸 해상도를 <number>에 따라 직렬화한 뒤 리터럴 문자열 "dppx"를 붙입니다.

<ratio>

분자를 <number>에 따라 직렬화하고 리터럴 문자열 " / "를 붙인 뒤 분모를 <number>에 따라 직렬화합니다.

<shape>

다음 알고리즘의 반환값입니다:

1. s를 문자열 "rect("로 둡니다.
2. list를 <shape>에 속하는 CSS 컴포넌트 값의 목록으로 둡니다.
3. list의 각 항목을 해당 항목의 CSS 컴포넌트 값을 직렬화한 결과로 둡니다.
4. list에 대해 쉼표로 구분된 목록을 직렬화한 결과를 s에 추가합니다.
5. ")" (U+0029)를 s에 추가합니다.
6. s를 반환합니다.

<string>

<family-name>

<specific-voice>

문자열을 문자열로 직렬화합니다.

<time>

초 단위 시간을 <number>에 따라 직렬화한 뒤 리터럴 문자열 "s"를 붙입니다.

<url>

절대 URL 문자열을 URL로 직렬화합니다.

이는 지정된 <url> 값과 계산된 값을 구분해야 합니다. #3195를 참조하십시오.

<absolute-size>, <border-width>, <border-style>, <bottom>, <generic-family>, <generic-voice>, <left>, <margin-width>, <padding-width>, <relative-size>, <right>, 및 <top>은 이 사양에서 매크로로 간주됩니다. 이들은 모두 위에서 설명한 컴포넌트의 인스턴스를 나타냅니다.

한 가지 방안은 위 정의를 CSS 컴포넌트를 정의하는 초안으로 이동하여 CSS3/CSS4 타임라인의 어느 시점에 이 절을 제거하는 것입니다.

6.7.2.1. 예제

다음은 지정된 값에 대한 변환 전후 결과의 몇 가지 예입니다. 변환 전 열은 작성자가 스타일 시트에 작성한 내용일 수 있으며, 변환 후 열은 DOM을 질의했을 때 반환되는 내용을 보여줍니다.

7. CSS 선언 블록에 대한 DOM 접근

7.1. ElementCSSInlineStyle 믹스인

ElementCSSInlineStyle 믹스인은 요소의 인라인 스타일 속성에 접근할 수 있도록 합니다.

interface mixin ElementCSSInlineStyle {
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

style 속성은 CSS 선언 블록 객체를 반환해야 하며, 해당 객체의 계산됨 플래그는 설정 해제되어 있고, 부모 CSS 규칙은 null이며, 소유자 노드는 컨텍스트 객체입니다.

사용자 에이전트가 HTML을 지원하면 다음 IDL이 적용됩니다: [HTML]

HTMLElement includes ElementCSSInlineStyle;

사용자 에이전트가 SVG를 지원하면 다음 IDL이 적용됩니다: [SVG11]

SVGElement includes ElementCSSInlineStyle;

사용자 에이전트가 MathML을 지원하면 다음 IDL이 적용됩니다: [MathML-Core]

MathMLElement includes ElementCSSInlineStyle;

7.2. Window 인터페이스 확장

partial interface Window {
  [NewObject] CSSStyleDeclaration getComputedStyle(Element elt, optional CSSOMString? pseudoElt);
};

getComputedStyle(elt, pseudoElt) 메서드는 다음 단계를 실행해야 합니다:

1. doc를 elt의 노드 문서로 둡니다.
2. obj를 elt로 둡니다.
3. pseudoElt가 제공되었고 빈 문자열이 아니면:
   1. 구문 분석합니다: pseudoElt를 <pseudo-element-selector>로 구문 분석하고, type을 그 결과로 설정합니다.
   2. type이 실패이거나, ::slotted() 또는 ::part() 의사 요소이면 TypeError 예외를 던집니다.
   3. 그렇지 않으면 obj를 elt의 주어진 의사 요소로 설정합니다.

   참고: CSS2 의사 요소는 이중 콜론 버전과 단일 콜론 버전 모두와 일치해야 합니다. 즉, :before와 ::before가 모두 위 조건과 일치해야 합니다.

4. decls를 CSS 선언의 빈 목록으로 둡니다.
5. elt가 연결되어 있고, 플랫 트리의 일부이며, 그 섀도 포함 루트에 브라우징 컨텍스트가 있고, 그 브라우징 컨텍스트에 브라우징 컨텍스트 컨테이너가 없거나, 해당 브라우징 컨텍스트 컨테이너가 렌더링되고 있으면, decls를 지원되는 CSS 속성인 모든 상세 속성을 사전식 순서로 나열한 목록으로 설정하며, 값은 doc와 연결된 스타일 규칙을 사용하여 obj에 대해 계산된 해결된 값으로 합니다. 또한 obj에 대한 계산된 값이 보장된 무효 값이 아닌 모든 사용자 지정 속성을 decls에 추가합니다.

   단축 속성을 처리하는 UA가 있으며, 모든 UA는 overflow처럼 이전에는 상세 속성이었던 단축 속성을 처리합니다. #2529를 참조하십시오.

   사용자 지정 속성의 순서는 현재 정의되어 있지 않습니다. #4947을 참조하십시오.

6. 다음 속성을 가진 라이브 CSS 선언 블록을 반환합니다:

   계산됨 플래그

   설정됨.

   선언

   decls.

   부모 CSS 규칙

   Null.

   소유자 노드

   obj.

getComputedStyle() 메서드는 origin-clean 플래그가 설정 해제된 CSS 스타일 시트의 정보를 노출합니다.

getComputedStyle()이 유용한 직렬화를 제공해야 할까요? #1033을 참조하십시오.

8. 유틸리티 API

8.1. CSS.escape() 메서드

CSS 네임스페이스에는 다른 곳에 속하지 않는 유용한 CSS 관련 함수가 들어 있습니다.

[Exposed=Window]
namespace CSS {
  CSSOMString escape(CSSOMString ident);
};

이는 이전에 정적 메서드만 포함하는 IDL 인터페이스로 규정되었습니다. IDL 네임스페이스로 전환하는 것은 *거의* 동일하므로 호환성 문제는 없을 것으로 예상됩니다. 문제가 발견되면 이 변경을 되돌리는 방안을 검토할 수 있도록 보고해 주십시오.

escape(ident) 연산은 ident를 식별자로 직렬화한 결과를 반환해야 합니다.

var element = document.querySelector('#' + CSS.escape(id) + ' > img');

var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');

CSS 네임스페이스에 대한 연산을 정의하고 어떤 상태를 저장하려는 사양은 그 상태를 현재 전역 객체의 연결된 Document에 저장해야 합니다.

9. 해결된 값

getComputedStyle()은 역사적으로 요소 또는 의사 요소의 "계산된 값"을 반환하도록 정의되었습니다. 그러나 "계산된 값"의 개념은 CSS 개정판 사이에서 변경된 반면 getComputedStyle()의 구현은 이미 배포된 스크립트와의 호환성을 위해 동일하게 유지되어야 했습니다. 이 문제를 해결하기 위해 이 사양에서는 해결된 값이라는 개념을 도입합니다.

주어진 상세 속성의 해결된 값은 다음과 같이 결정할 수 있습니다:

background-color

border-block-end-color

border-block-start-color

border-bottom-color

border-inline-end-color

border-inline-start-color

border-left-color

border-right-color

border-top-color

box-shadow

caret-color

color

outline-color

다른 사양에 정의된 color와 같은 해결된 값 특수 사례 속성

해결된 값은 사용된 값입니다.

line-height

계산된 값이 normal이면 해결된 값은 normal이고, 그렇지 않으면 사용된 값입니다.

block-size

height

inline-size

margin-block-end

margin-block-start

margin-bottom

margin-inline-end

margin-inline-start

margin-left

margin-right

margin-top

padding-block-end

padding-block-start

padding-bottom

padding-inline-end

padding-inline-start

padding-left

padding-right

padding-top

width

다른 사양에 정의된 height와 같은 해결된 값 특수 사례 속성

속성이 요소 또는 의사 요소에 적용되고 display 속성의 해결된 값이 none 또는 contents가 아니면 해결된 값은 사용된 값입니다. 그렇지 않으면 해결된 값은 계산된 값입니다.

bottom

left

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

right

top

다른 사양에 정의된 top과 같은 해결된 값 특수 사례 속성

속성이 위치 지정된 요소에 적용되고 display 속성의 해결된 값이 none 또는 contents가 아니며, 속성이 과도하게 제약되지 않았다면 해결된 값은 사용된 값입니다. 그렇지 않으면 해결된 값은 계산된 값입니다.

다른 사양에 정의된 해결된 값 특수 사례 속성

관련 사양에 정의된 대로입니다.

기타 모든 속성

해결된 값은 계산된 값입니다.

10. IANA 고려 사항

10.1. Default-Style

이 절에서는 영구 메시지 헤더 필드 레지스트리에 등록할 헤더 필드를 설명합니다.

헤더 필드 이름

Default-Style

적용 가능한 프로토콜

http

상태

표준

작성자/변경 관리자

W3C

사양 문서

이 문서가 관련 사양입니다.

관련 정보

없음.

11. 변경 내역

이 절에서는 이 사양의 게시본 사이에 이루어진 일부 변경 사항을 기록합니다. 이 절은 모든 변경 사항을 나열하지 않습니다. 버그 수정과 편집상 변경 사항은 일반적으로 나열하지 않습니다.

11.1. 2016년 3월 17일 이후 변경 사항

• <resolution>의 직렬화가 변경되었습니다.

• [CEReactions] IDL 확장 속성이 추가되었습니다.

• 논리 속성에 대한 해결된 값이 추가되었습니다.

• display: contents에 대한 getComputedStyle이 변경되었습니다.

• MediaList.item은 이제 직렬화 결과를 반환합니다.

• MediaList.item은 중요도가 다르면 단축 속성을 직렬화하지 않습니다.

• 다른 사양에서도 해결된 값을 지정할 수 있게 되었습니다.

• insertRule의 index 인수가 이제 선택 사항입니다.

• Stylesheet 및 CSSImportRule의 href 속성이 이제 USVString을 사용합니다.

• CSSOMString이 도입되었습니다.

• CSSMediaRule 및 CSSFontFaceRule의 직렬화가 추가되었습니다.

• style 속성에서 직렬화 후 재구문 분석하는 것을 피하기 위해 CSS 선언 블록에 업데이트 중 플래그가 추가되었습니다.

• 선언 값의 직렬화가 이제 올바르게 정의되었습니다.

• getComputedStyle은 이제 노드 문서의 스타일 규칙을 반환합니다.

• getComputedStyle에 전달된 의사 요소를 알 수 없거나 ::slotted()인 경우 TypeError가 발생합니다.

• CSS가 인터페이스에서 네임스페이스로 변경되었습니다.

• 구현의 관심 부족으로 setPropertyValue 및 setPropertyPriority가 CSSStyleDeclaration에서 제거되었습니다.

• styleSheets IDL 속성이 Document에서 DocumentOrShadowRoot로 이동되었습니다.

• LinkStyle.sheet는 이제 StyleSheet 대신 CSSStyleSheet를 반환합니다.

• 사용 중단된 CSSStyleSheet 멤버가 정의되었습니다.

• CSSRule.type 속성이 사용 중단되었습니다.

• <ratio>의 직렬화가 추가되었습니다.

• CSSStyleDeclaration.cssText는 이제 계산된 스타일에 대해 빈 문자열을 반환합니다.

• 사용자 지정 속성이 getComputedStyle에 포함됩니다.

• MathML IDL이 도입되었습니다.

• CSSKeyframesRule 및 CSSKeyframeRule의 직렬화가 추가되었습니다.

• 미디어 쿼리의 직렬화가 변경되었습니다.

• 해당 단축 속성의 상세 속성 사이에 다른 속성 그룹/매핑 논리를 가진 상세 속성이 있으면 단축 속성을 직렬화하지 않습니다.

• CSSStyleRule 직렬화가 이제 중첩을 고려합니다.

• 구성 가능한 스타일 시트가 도입되었습니다.

11.2. 2013년 12월 5일 이후 변경 사항

• 대체 스타일 시트 API가 제거되었습니다: selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets, Document의 enableStyleSheetsForSet().

• Element의 pseudo() 메서드와 PseudoElement 인터페이스가 제거되었습니다.

• Element의 cascadedStyle, defaultStyle, rawComputedStyle 및 usedStyle IDL 속성이 제거되었습니다.

• CSSRule의 cssText IDL 속성 설정자가 아무 작업도 하지 않도록 변경되었습니다.

• CSSStyleDeclaration에 webkitFoo 형식(소문자 w)의 IDL 속성이 추가되었습니다.

• CSSNamespaceRule이 다시 읽기 전용으로 변경되었습니다.

• insertRule()에서 @charset 처리가 제거되었습니다.

• CSSCharsetRule이 다시 제거되었습니다.

• 식별자와 문자열의 직렬화가 변경되었습니다.

• 선택자 직렬화가 이제 결합자 ">>" 및 "||"와 속성 선택자의 "i" 플래그를 지원합니다.

• :lang()의 직렬화가 변경되었습니다.

• <color> 및 <number>의 직렬화가 변경되었습니다.

• CSSStyleDeclaration의 setProperty()가 변경되었습니다.

11.3. 2011년 7월 12일부터 2013년 12월 5일까지의 변경 사항

• 교차 출처 스타일 시트는 읽거나 변경할 수 없게 되었습니다.
• CSSCharsetRule이 다시 도입되었습니다.
• CSSGroupingRule 및 CSSMarginRule이 도입되었습니다.
• CSSNamespaceRule을 이제 변경할 수 있습니다.
• CSS 선언 블록을 구문 분석하고 직렬화하는 것이 이제 정의되었습니다.
• setProperty(), getPropertyValue() 등에서 이제 단축 속성을 지원합니다.
• setPropertyValue 및 setPropertyPriority가 CSSStyleDeclaration에 추가되었습니다.
• 여러 인터페이스의 style 및 media 속성에 [PutForwards] WebIDL 확장 속성이 지정되었습니다.
• Element의 pseudo() 메서드가 도입되었습니다.
• PseudoElement 인터페이스가 도입되었습니다.
• Element 및 PseudoElement에 cascadedStyle, rawComputedStyle 및 usedStyle 속성이 도입되었습니다.
• CSS.escape() 정적 메서드가 도입되었습니다.

12. 보안 및 개인정보 보호 고려 사항

이 사양에 대해 새로운 보안 또는 개인정보 보호 고려 사항은 보고되지 않았습니다.

13. 감사의 말

편집자들은 이 사양에 기여해 주신 Alexey Feldgendler, Benjamin Poulain, Björn Höhrmann, Boris Zbasky, Brian Kardell, Chris Dumez, Christian Krebs, Daniel Glazman, David Baron, Domenic Denicola, Dominique Hazael-Massieux, fantasai, Hallvord R. M. Steen, Ian Hickson, John Daggett, Lachlan Hunt, Mike Sherov, Myles C. Maxfield, Morten Stenshorne, Ms2ger, Nazım Can Altınova, Øyvind Stenhaug, Peter Sloetjes, Philip Jägenstedt, Philip Taylor, Richard Gibson, Robert O’Callahan, Simon Sapin, Sjoerd Visscher, Sylvain Galineau, Tarquin Wilton-Jones, Xidorn Quan, 그리고 Zack Weinberg에게 감사드립니다.

대체 스타일 시트 API의 초기 버전과 CSS 값의 정규화 (현재는 직렬화) 규칙을 작성한 Ian Hickson에게도 추가로 감사드립니다.