CSS 객체 모델 (CSSOM)

1. 소개

이 문서는 CSS 객체 모델(CSSOM)의 핵심 기능을 공식적으로 명세합니다. CSSOM 계열 명세의 다른 문서들과 기타 CSS 관련 명세들은 이러한 핵심 기능의 확장 기능을 정의합니다.

CSSOM의 핵심 기능은 스타일 관련 상태 정보 및 프로세스에 접근하고 조작할 수 있도록 작성자 정의 스크립트에 기본 기능을 제공하는 데 중점을 두고 있습니다.

아래에 정의된 기능들은 주로 [DOM]를 포함한 W3C DOM 워킹 그룹의 이전 명세를 기반으로 합니다. 본 문서의 목적은 (1) 테스트 가능성과 상호 운용성을 높이기 위해 기술적 구체성을 개선하고, (2) 더 이상 필수적이지 않다고 판단되는 일부 널리 구현되지 않은 기능을 사용 중단하거나 제거하며, (3) 널리 구현되었거나 구현될 것으로 예상되는 확장 기능을 새롭게 명세하는 것입니다.

2. 용어

이 명세는 다음 문서들에서 일부 용어를 사용합니다: DOM, HTML, CSS Syntax, Encoding, URL, Fetch, Associating Style Sheets with XML documents 및 XML. [DOM] [HTML] [CSS3SYN] [ENCODING] [URL] [FETCH] [XML-STYLESHEET] [XML]

이 명세에서 객체 A에 대해 언급할 때, A가 실제로 인터페이스라면 일반적으로 해당 인터페이스를 구현한 객체를 의미합니다.

set과 unset 용어는 이진 플래그나 변수의 true/false 값을 각각 나타냅니다. 이 용어들은 동사로도 사용되며, 이 경우 어떤 값을 각각 true 또는 false로 변경하는 것을 의미합니다.

지원되는 스타일링 언어 용어는 CSS를 의미합니다.

참고: 만약 다른 스타일링 언어가 사용자 에이전트에서 지원되면, 이 명세도 그에 맞게 업데이트될 것입니다.

지원되는 CSS 속성 용어는 사용자 에이전트가 구현한 CSS 속성을 의미하며, 공급업체 프리픽스가 붙은 속성도 포함하지만 사용자 정의 속성은 제외합니다. 지원되는 CSS 속성은 이 명세에서 비교를 위해 반드시 소문자 형태여야 합니다.

이 명세에서 ::before와 ::after 가상 요소는 박스가 생성되지 않더라도 모든 요소에서 존재한다고 가정합니다.

메서드나 속성이 다른 메서드나 속성을 호출한다고 언급된 경우, 사용자 에이전트는 해당 속성 또는 메서드에 대한 내부 API를 실행해야 하며, 작성자가 ECMAScript에서 속성이나 메서드를 사용자 정의 속성이나 함수로 덮어써서 동작을 변경할 수 없도록 해야 합니다.

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

2.1. 공통 직렬화 관용구

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

문자를 코드 포인트로 이스케이프한다는 "\" (U+005C) 뒤에 유니코드 코드 포인트를 0-9, a-f (U+0030~U+0039 및 U+0061~U+0066) 범위의 가장 적은 16진수 자리수로 이어붙이고, 마지막에 한 칸(공백 U+0020)을 붙여 문자열을 생성하는 것을 의미합니다.

식별자를 직렬화한다는 식별자의 각 문자에 대해 아래 규칙대로 이어붙인 문자열을 생성하는 것을 의미합니다:

• 문자가 NULL(U+0000)이면, 대체 문자(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)이면, 대체 문자(U+FFFD)를 사용합니다.
• 문자가 [\1-\1f](U+0001~U+001F) 범위 또는 U+007F이면, 코드 포인트로 이스케이프합니다.
• 문자가 '"'(U+0022) 또는 "\"(U+005C)이면, 이스케이프 문자로 처리합니다.
• 그 외에는 해당 문자 자체를 사용합니다.

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

URL을 직렬화한다는 "url(" 뒤에 해당 URL을 문자열 직렬화 규칙으로 직렬화한 뒤, ")"를 이어붙여 문자열을 생성하는 것을 의미합니다.

LOCAL을 직렬화한다는 "local(" 뒤에 해당 LOCAL을 문자열 직렬화 규칙으로 직렬화한 뒤, ")"를 이어붙여 문자열을 생성하는 것을 의미합니다.

쉼표로 구분된 목록을 직렬화한다는 목록의 모든 항목을 순서대로 ", "(쉼표 U+002C + 공백 U+0020)로 구분하여 이어붙이는 것을 의미합니다.

공백으로 구분된 목록을 직렬화한다 는 목록의 모든 항목을 순서대로 " "(공백 U+0020)로 구분하여 이어붙이는 것을 의미합니다.

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

3. CSSOMString

CSSOM 인터페이스에서 대부분의 문자열은 CSSOMString 타입을 사용합니다. 각 구현체는 이를 USVString 또는 DOMString 중 하나로 정의할 수 있습니다:

typedef USVString CSSOMString;

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

typedef DOMString CSSOMString;

4. 미디어 쿼리

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

4.1. 미디어 쿼리 파싱

미디어 쿼리 목록을 파싱한다는 것은 주어진 문자열 s를 미디어 쿼리 목록으로 변환하는 것으로, Media Queries 명세에서 정의된 알고리즘을 따릅니다. 그 알고리즘에서 반환하는 미디어 쿼리 목록을 반환합니다.

참고: "무시"되는 미디어 쿼리는 "not all"로 변환됩니다.

미디어 쿼리를 파싱한다는 것은 주어진 문자열 s에 대해 미디어 쿼리 목록 파싱 절차를 수행하고, 미디어 쿼리가 여러 개 반환되면 null을 반환하고, 하나만 반환되면 그 미디어 쿼리를 반환한다는 의미입니다.

참고: 역시 "무시"되는 미디어 쿼리는 "not all"로 변환됩니다.

4.2. 미디어 쿼리 직렬화

미디어 쿼리 목록을 직렬화한다는 아래 절차를 수행합니다:

1. 미디어 쿼리 목록이 비어 있다면, 빈 문자열을 반환합니다.
2. 목록의 미디어 쿼리 각각을 직렬화한 뒤, 쉼표로 구분된 목록 직렬화 규칙으로 직렬화하여 반환합니다.

미디어 쿼리를 직렬화한다는 s를 빈 문자열로 두고 아래 절차를 수행합니다:

1. 미디어 쿼리가 부정(negated)이라면 "not" 뒤에 한 칸(공백 U+0020)을 붙여 s에 추가합니다.
2. 식별자 직렬화 규칙으로 미디어 타입을 ASCII 소문자로 변환하여 type에 저장합니다.
3. 미디어 쿼리에 미디어 특성이 없다면, type을 s에 추가하고 반환합니다.
4. type이 "all"이 아니거나 미디어 쿼리가 부정일 경우, type + 공백(U+0020) + "and" + 공백(U+0020)을 s에 추가합니다.
5. 미디어 특성 각각에 대해:
   1. "("(U+0028) 뒤에 미디어 특성 이름을 ASCII 소문자로 변환하여 s에 추가합니다.
   2. 값이 있으면 ":"(U+003A) + 공백(U+0020) + 미디어 특성 값 직렬화를 s에 추가합니다.
   3. ")"(U+0029)를 s에 추가합니다.
   4. 마지막 미디어 특성이 아니라면, 공백(U+0020) + "and" + 공백(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);
};

객체의 지원되는 속성 인덱스는 미디어 쿼리 컬렉션에 포함된 미디어 쿼리의 개수보다 하나 적은 범위의 숫자입니다. 해당 미디어 쿼리가 없다면 지원되는 속성 인덱스도 없습니다.

문자열 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. 미디어 쿼리 컬렉션에 있는 어떤 미디어 쿼리와 비교하여 true가 나오면 반환합니다.
4. m을 미디어 쿼리 컬렉션에 추가합니다.

deleteMedium(medium) 메서드는 아래 절차를 따릅니다:

1. 주어진 값을 파싱한 결과를 m에 저장합니다.
2. m이 null이면 반환합니다.
3. 미디어 쿼리 컬렉션에서 m과 비교해 true가 되는 미디어 쿼리를 모두 제거합니다. 아무것도 제거되지 않았다면 throw NotFoundError 예외를 던집니다.

5. 선택자

선택자는 Selectors 명세에서 정의되어 있습니다. 이 절에서는 주로 직렬화 방법을 정의합니다.

5.1. 선택자 파싱

선택자 그룹을 파싱한다는 값을 Selectors 명세에 정의된 selectors_group 생성식을 사용해 파싱하고, 파싱이 실패하지 않았다면 선택자 그룹을 반환하고, 실패했다면 null을 반환하는 것을 의미합니다.

5.2. 선택자 직렬화

선택자 그룹을 직렬화한다는 그룹의 각 선택자를 직렬화한 뒤, 이 결과들을 쉼표로 구분된 목록 직렬화 규칙으로 직렬화하는 것을 의미합니다.

선택자를 직렬화한다는 s를 빈 문자열로 두고, 아래 절차를 선택자 체인의 각 부분마다 수행하며 마지막에 s를 반환합니다:

1. 만약 복합 선택자에 단순 선택자가 하나만 있고, 그것이 범용 선택자라면, 그 범용 선택자를 직렬화하여 s에 추가합니다.
2. 그 외에는 복합 선택자에 있는 각 단순 선택자 중, 범용 선택자가 아니면서 네임스페이스 접두사가 기본 네임스페이스가 아닌 네임스페이스로 매핑된다면, 그 단순 선택자를 직렬화하여 s에 추가합니다.
3. 선택자 체인의 마지막 부분이 아니라면, 한 칸(공백 U+0020) 뒤에 적절한 결합자 (">", "+", "~", ">>", "||")를 이어붙이고, 결합자가 공백이 아니라면 다시 한 칸(공백 U+0020)을 s에 추가합니다.
4. 체인의 마지막 부분이고, 가상 요소(pseudo-element)가 있다면 "::" 뒤에 가상 요소의 이름을 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에 추가합니다.

가상 클래스(pseudo-class)

인자가 없는 경우 ":"(U+003A) 뒤에 가상 클래스 이름을 s에 추가합니다.

그 외에는 ":"(U+003A) 뒤에 가상 클래스 이름, "("(U+0028), 아래 규칙에 따라 결정된 가상 클래스 인자 값, ")"(U+0029)를 s에 추가합니다.

:lang()

각 인자를 문자열 직렬화 규칙으로 직렬화하고, 쉼표로 구분된 목록 직렬화 규칙으로 직렬화하여 순서를 유지합니다.

:nth-child()

:nth-last-child()

:nth-of-type()

:nth-last-of-type()

값을 serialize an <an+b> value 규칙으로 직렬화합니다.

:not()

값을 선택자 그룹 직렬화 규칙으로 직렬화한 결과를 사용합니다.

6. CSS

6.1. CSS 스타일 시트

CSS 스타일 시트는 CSS 명세에서 정의된 스타일 시트를 나타내는 추상 개념입니다. CSSOM에서는 CSS 스타일 시트가 CSSStyleSheet 객체로 표현됩니다.

CSSStyleSheet(options)

호출 시 options를 받아 생성된 CSSStyleSheet 생성 절차를 실행하고 결과를 반환합니다.

생성된 CSSStyleSheet 생성 CSSStyleSheetInit options를 받아 아래 절차를 실행합니다:

1. 새 CSSStyleSheet 객체 sheet를 생성합니다.
2. sheet의 location을 base URL로 설정합니다. (현재 글로벌 객체의 관련 Document 기준)
3. sheet의 stylesheet base URL을 options의 baseURL 속성 값으로 설정합니다.
4. sheet의 상위 CSS 스타일 시트를 null로 설정합니다.
5. sheet의 소유 노드를 null로 설정합니다.
6. sheet의 소유 CSS 규칙을 null로 설정합니다.
7. sheet의 title을 빈 문자열로 설정합니다.
8. sheet의 alternate flag를 unset 합니다.
9. sheet의 origin-clean flag를 설정합니다.
10. sheet의 constructed flag를 설정합니다.
11. sheet의 생성자 문서를 관련 Document로 설정합니다. (현재 글로벌 객체 기준)
12. media 속성이 문자열이면, 해당 문자열로 MediaList 객체 생성 절차를 실행하여 sheet의 media 값으로 설정합니다. 아니면, 해당 속성으로 미디어 쿼리 목록 직렬화를 실행한 문자열로 MediaList 객체 생성을 실행하여 sheet의 media 값으로 설정합니다.
13. disabled 속성이 true면 sheet의 disabled flag를 설정합니다.
14. sheet를 반환합니다.

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

type

리터럴 문자열 "text/css".

location

생성 시 지정됨. 절대 URL 문자열로, CSS 스타일 시트의 첫 요청 또는, CSS 스타일 시트가 내장된 경우 null. CSS 스타일 시트의 생명주기 동안 변경되지 않음.

상위 CSS 스타일 시트

생성 시 지정됨. CSS 스타일 시트가 CSS 스타일 시트의 상위이거나, 없으면 null.

소유 노드

생성 시 지정됨. CSS 스타일 시트와 연결된 DOM 노드거나, 없으면 null.

소유 CSS 규칙

생성 시 지정됨. CSS 규칙으로, 상위 CSS 스타일 시트에서 CSS 스타일 시트를 포함시킨 규칙이거나, 없으면 null.

media

생성 시 지정됨. MediaList 객체가 CSS 스타일 시트와 연결됨.

이 속성이 문자열로 지정되면, media는 해당 문자열로 MediaList 객체 생성 절차를 실행한 결과로 설정해야 합니다.

이 속성이 소유 노드의 속성으로 지정되면, media는 해당 속성 값으로 MediaList 객체 생성 절차를 실행한 결과로 설정해야 합니다. 속성이 설정, 변경, 제거될 때마다 media의 mediaText 속성도 새로운 속성 값이나 없으면 null로 설정해야 합니다.

참고: media의 mediaText 속성을 변경해도 소유 노드의 해당 속성이 변경되지는 않습니다.

참고: CSS 스타일 시트의 소유 노드가 null이 아니면, 연결된 CSS 스타일 시트가 해당 CSS 스타일 시트이고, CSS 스타일 시트가 추가될 때 해당 노드가 연결됩니다.

title

생성 시 지정됨. CSS 스타일 시트의 타이틀(빈 문자열일 수 있음).

아래 예시에서, title은 첫 번째 스타일 시트에서는 빈 문자열이 아니고, 두 번째와 세 번째 스타일 시트에서는 빈 문자열입니다.

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

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

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

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

참고: HTML에서는 style 요소 명세에 따라 title이 소유 노드의 속성으로 지정되는 것은, 해당 노드가 문서 트리 내에 있을 때에만 적용됩니다.

alternate flag

생성 시 지정됨. set 또는 unset. 기본값은 unset.

아래 CSS 스타일 시트들은 alternate flag가 set되어 있습니다:

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

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

disabled flag

set 또는 unset. 기본값은 unset.

참고: unset이어도 CSS 스타일 시트가 실제 렌더링에 사용된다는 의미는 아닙니다.

CSS 규칙

CSS 스타일 시트에 연결된 CSS 규칙.

origin-clean flag

생성 시 지정됨. set 또는 unset. set이면 API를 통해 CSS 규칙을 읽고 수정할 수 있습니다.

constructed flag

생성 시 지정됨. set 또는 unset. 기본값은 unset. 이 스타일 시트가 IDL 정의 생성자를 호출해서 만들어졌는지 나타냅니다.

수정 금지 플래그

set 또는 unset. 기본값은 unset. set이면 스타일 시트 규칙을 수정할 수 없습니다.

생성자 문서

생성 시 지정됨. Document 객체로, 생성된 스타일 시트와 연결됨. 기본값은 null. constructed flag가 set된 스타일 시트만 null이 아님.

스타일 시트 base URL

스타일 시트 내 상대 URL을 해석할 때 사용할 base URL. 기본값은 null. constructed flag가 set된 스타일 시트만 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 속성은 type을 반환해야 합니다.

href 속성은 location을 반환해야 합니다.

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

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

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

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

disabled 속성은 가져올 때 disabled flag가 set이면 true, 아니면 false를 반환해야 합니다. 설정할 때 disabled 속성이 true면 disabled flag를 set, 그렇지 않으면 disabled flag를 unset 해야 합니다.

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 속성은 owner CSS rule을 반환해야 합니다. 만약 null이 아닌 값이 반환된 적이 있다면, 이후에도 항상 동일한 값을 반환해야 합니다.

cssRules 속성은 다음 절차를 따라야 합니다:

1. origin-clean flag가 unset인 경우, throw를 실행하여 SecurityError 예외를 던집니다.
2. CSSRuleList 객체(읽기 전용, 라이브 상태)를 반환하며, CSS 규칙들을 나타냅니다.

   참고: 반환된 CSSRuleList 객체는 읽기 전용이지만(클라이언트 스크립트 관점에서), 라이브 상태로 인해 값이 변경될 수 있습니다. 예를 들어, insertRule() 또는 deleteRule() 메서드 호출로 객체가 변이될 수 있습니다.

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

1. origin-clean flag가 unset인 경우, throw를 실행하여 SecurityError 예외를 던집니다.
2. disallow modification flag가 set이면, NotAllowedError DOMException을 throw합니다.
3. parsed rule을 parse a rule을 rule에 대해 호출한 결과로 설정합니다.
4. parsed rule이 구문 오류면 그 값을 반환합니다.
5. parsed rule이 @import 규칙이고, constructed flag가 set이면, SyntaxError DOMException을 throw합니다.
6. insert a CSS rule rule을 CSS 규칙들의 index 위치에 삽입하는 결과를 반환합니다.

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

1. origin-clean flag가 unset이면, throw를 실행하여 SecurityError 예외를 던집니다.
2. disallow modification flag가 set이면, NotAllowedError DOMException을 throw합니다.
3. Remove a CSS rule을 CSS 규칙들의 index 위치에서 실행합니다.

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

1. promise를 promise로 둡니다.
2. constructed flag가 set되어 있지 않거나, disallow modification flag가 set이면, promise를 NotAllowedError DOMException으로 reject하고 promise를 반환합니다.
3. disallow modification flag를 set합니다.
4. 병렬로, 아래 절차를 실행합니다:
   1. rules를 parse a list of rules를 text에 대해 실행한 결과로 둡니다. rules가 규칙 리스트가 아니면(파싱 중 에러) 빈 리스트로 설정합니다.
   2. rules에 하나 이상의 @import 규칙이 있으면, 해당 규칙들을 제거합니다.
   3. sheet의 CSS 규칙들을 rules로 설정합니다.
   4. sheet의 disallow modification flag를 unset합니다.
   5. promise를 sheet로 resolve합니다.
5. promise를 반환합니다.

replaceSync(text) 메서드는 CSSStyleSheet 객체에 대해 text를 입력으로 CSSStyleSheet의 규칙을 동기적으로 교체 절차를 실행해야 합니다.

CSSStyleSheet의 규칙을 동기적으로 교체는 sheet와 text를 입력으로 아래 절차를 실행합니다:

1. constructed flag가 set되어 있지 않거나, disallow modification flag가 set이면, NotAllowedError DOMException을 throw합니다.
2. rules를 parse a list of rules를 text에 대해 실행한 결과로 둡니다. rules가 규칙 리스트가 아니면(파싱 중 에러) 빈 리스트로 설정합니다.
3. rules에 하나 이상의 @import 규칙이 있으면, 해당 규칙들을 제거합니다.
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. insertRule()를 rule과 index로 호출합니다.
8. -1을 반환합니다.

작성자는 이러한 멤버를 사용하지 않아야 하며, 표준 CSSStyleSheet 인터페이스를 사용하고 교육해야 합니다. 해당 인터페이스는 CSSGroupingRule과 일관됩니다.

6.2. CSS 스타일 시트 컬렉션

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

각 DocumentOrShadowRoot 객체에는 0개 이상의 CSS 스타일 시트 리스트가 있으며, document or shadow root CSS 스타일 시트들이라 합니다. 이 리스트는 다음을 포함하는 순서 있는 리스트입니다:

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

각 DocumentOrShadowRoot 객체에는 0개 이상의 CSS 스타일 시트 리스트가 있으며, final CSS 스타일 시트들이라 합니다. 이 리스트는 다음을 포함하는 순서 있는 리스트입니다:

1. document or shadow root CSS 스타일 시트들
2. DocumentOrShadowRoot의 adoptedStyleSheets의 backing list의 내용(배열 순서)

CSS 스타일 시트 생성 절차는 아래와 같습니다:

1. 새 CSS 스타일 시트 객체를 생성하고, 속성을 지정된 대로 설정합니다.
2. 새로 생성된 CSS 스타일 시트에 대해 add a CSS style sheet 절차를 실행합니다.

   origin-clean flag가 unset인 경우, 사용자의 인트라넷 정보가 노출될 수 있습니다.

CSS 스타일 시트 추가 절차는 아래와 같습니다:

1. CSS 스타일 시트를 document or shadow root CSS 스타일 시트들 리스트의 적절한 위치에 추가합니다. 이하 절차는 disabled flag와 관련된 처리입니다.
2. disabled flag가 set이면 반환합니다.
3. title이 빈 문자열이 아니고, alternate flag가 unset이며, preferred CSS style sheet set name이 빈 문자열이면 change the preferred CSS style sheet set name 절차를 title로 실행합니다.
4. 아래 중 하나라도 true면 disabled flag를 unset하고 반환합니다:
   • title이 빈 문자열인 경우
   • last CSS style sheet set name이 null이고 title이 대소문자 구분으로 preferred CSS style sheet set name과 일치하는 경우
   • title이 대소문자 구분으로 last CSS style sheet set name과 일치하는 경우
5. disabled flag를 set합니다.

CSS 스타일 시트 제거 절차는 아래와 같습니다:

1. CSS 스타일 시트를 document or shadow root CSS 스타일 시트들 리스트에서 제거합니다.
2. CSS 스타일 시트의 상위 CSS 스타일 시트, 소유 노드, owner CSS rule을 null로 설정합니다.

persistent CSS 스타일 시트는 document or shadow root CSS 스타일 시트들 중 title이 빈 문자열이고 alternate flag가 unset인 CSS 스타일 시트입니다.

CSS 스타일 시트 세트는 document or shadow root CSS 스타일 시트들 중 title이 동일하고 빈 문자열이 아닌 CSS 스타일 시트로 구성된 순서 있는 컬렉션입니다.

CSS 스타일 시트 세트 이름은 CSS 스타일 시트 세트가 공유하는 title입니다.

enabled CSS 스타일 시트 세트는 CSS 스타일 시트 세트에 속한 각 CSS 스타일 시트가 disabled flag가 unset인 상태인 세트입니다.

CSS 스타일 시트 세트 활성화 절차는 name name에 대해 아래와 같습니다:

1. name이 빈 문자열이면, CSS 스타일 시트 세트에 포함된 각 CSS 스타일 시트의 disabled flag를 set하고 반환합니다.
2. CSS 스타일 시트 세트 중 CSS 스타일 시트 세트 이름이 name과 대소문자 구분으로 일치하는 각 CSS 스타일 시트의 disabled flag를 unset하고, CSS 스타일 시트 세트의 나머지에 대해선 set합니다.

CSS 스타일 시트 세트 선택은 name name에 대해 아래와 같습니다:

1. enable a CSS style sheet set을 name에 대해 실행합니다.
2. last CSS style sheet set name을 name으로 설정합니다.

last CSS 스타일 시트 세트 이름은 마지막으로 선택된 CSS 스타일 시트 세트를 결정하는 개념입니다. 초기값은 null입니다.

preferred CSS 스타일 시트 세트 이름은 어떤 CSS 스타일 시트의 disabled flag를 unset해야 하는지 결정하는 개념입니다. 초기값은 빈 문자열입니다.

preferred CSS 스타일 시트 세트 이름 변경은 name name에 대해 아래와 같습니다:

1. current를 preferred CSS 스타일 시트 세트 이름으로 둡니다.
2. preferred CSS 스타일 시트 세트 이름을 name으로 설정합니다.
3. name이 current와 대소문자 구분으로 일치하지 않고, last CSS style sheet set name이 null이라면, enable a CSS style sheet set을 name에 대해 실행합니다.

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 스타일 시트 개수보다 하나 적은 범위의 숫자입니다. 해당 CSS 스타일 시트가 없다면 지원되는 속성 인덱스도 없습니다.

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

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

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

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

styleSheets 속성은 document or shadow root CSS 스타일 시트들을 나타내는 StyleSheetList 컬렉션을 반환해야 합니다.

인덱스 값 설정 알고리즘은 adoptedStyleSheets에 대해 value와 index를 입력으로 다음과 같습니다:

1. value의 constructed flag가 set되어 있지 않거나, constructor document가 이 DocumentOrShadowRoot의 node document와 같지 않으면 "NotAllowedError" DOMException을 throw 합니다.

6.3. 스타일 시트 연관

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

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

CSS 스타일 시트 가져오기는 파싱된 URL parsed URL, referrer referrer, document document, 그리고 선택적으로 파라미터 세트 parameters(request 생성에 사용됨)를 입력으로 다음 절차를 따릅니다:

1. origin을 document의 origin으로 둡니다.
2. request를 새 request로 생성하며, url은 parsed URL, origin은 origin, referrer는 referrer, 그리고 파라미터 세트 parameters가 지정된 경우 그 값으로 설정합니다.
3. response를 fetching request의 결과로 둡니다.
4. response가 사용 가능할 때까지 대기합니다.
5. response가 네트워크 오류라면 에러를 반환합니다.
6. document가 쿼크 모드이고, response가 CORS-same-origin이며, response의 Content-Type 메타데이터가 지원되는 스타일링 언어가 아니라면, Content-Type 메타데이터를 text/css로 변경합니다.
7. response가 지원되는 스타일링 언어가 아니면 에러를 반환합니다.
8. response를 반환합니다.

6.3.2. LinkStyle 인터페이스

노드의 연결된 CSS 스타일 시트는 document or shadow root CSS 스타일 시트들 리스트 중 owner node가 해당 노드인 CSS 스타일 시트입니다. 이 노드는 LinkStyle 인터페이스도 구현해야 합니다.

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

sheet 속성은 해당 노드의 연결된 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;

prolog는 문서의 자식이면서, Element 자식 뒤에 따르는 노드가 아닌 노드를 의미합니다(있는 경우).

ProcessingInstruction 노드 node가 prolog에 속하게 되거나, 더 이상 prolog에 속하지 않게 되거나, data가 변경되면 다음 절차를 실행해야 합니다:

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

    location

    URL serializer를 parsed URL로 호출한 결과

    상위 CSS 스타일 시트

    null

    소유 노드

    node

    owner CSS rule

    null

    media

    media 의사 속성 값이 있으면 그 값, 없으면 빈 문자열

    title

    title

    alternate flag

    alternate 의사 속성 값이 "yes"와 대소문자 구분으로 일치하면 set, 아니면 unset

    origin-clean flag

    response가 CORS-same-origin이면 set, 아니면 unset

    CSS environment encoding은 아래 절차를 실행한 결과입니다:

    1. 요소에 charset 의사 속성이 있으면, 해당 값으로 get an encoding을 실행합니다. 성공하면 결과 인코딩을 반환하고 이 절차를 중단합니다.
    2. 그 외에는 문서의 문자 인코딩을 반환합니다. [DOM]

xml-stylesheet 처리 명령을 통해 참조된 스타일 시트가, Document의 XML 파서 맥락에서, 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을 문서의 문서 base URL로 둡니다.

   이 시점에 문서가 존재하는가?

5. referrer를 문서의 주소로 둡니다.
6. origin을 문서의 origin으로 둡니다.
7. parsed URL을 URL 파서를 input URL과 base URL로 호출한 결과로 둡니다.
8. parsed URL이 실패면 반환합니다.
9. response를 fetch a CSS style sheet를 parsed URL, referrer, 문서(document)를 인자로 호출한 결과로 둡니다.

   HTML 파서가 quirks 모드/비quirks 모드 결정을 아직 하지 않았다면?

10. CSS 스타일 시트 생성을 아래 속성으로 실행합니다:

    location

    URL serializer를 parsed URL로 호출한 결과

    owner node

    null

    상위 CSS 스타일 시트

    null

    owner CSS rule

    null

    media

    첫 번째 media 파라미터의 값

    title

    title

    alternate flag

    이 HTTP Link 헤더의 지정된 링크 관계 타입 중 하나가 "alternate"와 ASCII 대소문자 구분없이 일치하면 set, 아니면 false

    origin-clean flag

    response가 CORS-same-origin이면 set, 아니면 unset

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

6.4. CSS 규칙

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

type

특정 규칙 타입에 할당된 음이 아닌 정수입니다. 규칙 생성 시 초기화되며 변경될 수 없습니다.

text

스타일 시트에 직접 사용할 수 있는 규칙의 텍스트 표현입니다. 규칙 생성 시 초기화되며, 변경될 수 있습니다.

상위 CSS 규칙

둘러싸고 있는 CSS 규칙의 참조 또는 null. 규칙 생성 시 둘러싼 규칙이 있으면 해당 규칙으로 초기화되고, 없으면 null입니다. 나중에 null로 변경될 수 있습니다.

상위 CSS 스타일 시트

상위 CSS 스타일 시트 참조 또는 null. 규칙 생성 시 관련 스타일 시트를 참조하도록 초기화됩니다. 나중에 null로 변경될 수 있습니다.

하위 CSS 규칙들

하위 CSS 규칙 리스트. 이 리스트는 변이될 수 있습니다.

위 상태 외에도, 각 CSS 규칙은 자신의 type에 따라 추가 상태를 가질 수 있습니다.

CSS 규칙 파싱은 문자열 string을 입력으로 아래 절차를 실행합니다:

1. rule을 parse a rule를 string에 대해 호출한 결과로 둡니다.
2. rule이 구문 오류면 그 값을 반환합니다.
3. parsed rule을 적절한 CSS 명세에 따라 rule을 파싱한 결과로 둡니다. 무시된 부분은 버립니다. 스타일 규칙 전체가 버려지면 구문 오류를 반환합니다.
4. parsed rule을 반환합니다.

CSS 규칙 직렬화는 CSS 규칙의 type에 따라 아래 중 하나를 수행합니다:

CSSStyleRule

다음 절차 결과를 반환합니다:

1. s를 규칙의 선택자 그룹에 serialize a group of selectors를 실행한 결과로 둔 뒤, " {"(공백 U+0020 + 왼쪽 중괄호 U+007B)를 이어붙입니다.
2. decls를 규칙의 선언 그룹에 serialize a CSS declaration block을 실행한 결과(없으면 null)로 둡니다.
3. rules를 규칙의 cssRules 리스트의 각 규칙에 serialize a CSS rule을 실행한 결과(없으면 null)로 둡니다.
4. decls와 rules가 모두 null이면 " }"(공백 U+0020 + 오른쪽 중괄호 U+007D)를 s에 추가하고 s를 반환합니다.
5. rules가 null이면:
   1. s에 공백(U+0020)을 추가합니다.
   2. decls를 s에 추가합니다.
   3. " }"(공백 U+0020 + 오른쪽 중괄호 U+007D)를 s에 추가합니다.
   4. s를 반환합니다.
6. 그 외:
   1. decls가 null이 아니면 rules 앞에 붙입니다.
   2. rules의 각 rule에 대해:
      1. s에 개행 후 두 칸을 추가합니다.
      2. rule을 s에 추가합니다.
   3. s에 개행 후 오른쪽 중괄호(U+007D)를 추가합니다.
   4. s를 반환합니다.

CSSImportRule

아래를 이어붙인 결과:

1. "@import" 다음에 공백(U+0020)
2. 규칙의 location에 serialize a URL을 실행한 결과
3. 규칙의 media list가 비어 있지 않으면, 공백(U+0020) 뒤에 serialize a media query list를 media list에 실행한 결과
4. ";"(세미콜론 U+003B)

@import url("import.css");

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

CSSMediaRule

아래를 이어붙인 결과:

1. "@media" 다음에 공백(U+0020)
2. 규칙의 media query list에 serialize a media query list를 실행한 결과
3. 공백(U+0020) + "{"(왼쪽 중괄호 U+007B) + 개행
4. 규칙의 cssRules 리스트의 각 규칙에 serialize a CSS rule을 실행한 결과(개행 + 두 칸 들여쓰기)로 이어붙임
5. 개행 + "}"(오른쪽 중괄호 U+007D)

CSSFontFaceRule

아래를 이어붙인 결과:

1. "@font-face {" 다음에 공백(U+0020)
2. "font-family:" 다음에 공백(U+0020)
3. 규칙의 font family name에 serialize a string을 실행한 결과
4. ";"(세미콜론 U+003B)
5. 규칙의 source list가 비어 있지 않으면:
   1. 공백(U+0020) + "src:" + 공백(U+0020)
   2. source list의 각 source에 serialize a URL 또는 serialize a LOCAL을 실행한 결과를 serialize a comma-separated list로 직렬화
   3. ";"(세미콜론 U+003B)
6. 규칙에 unicode-range descriptor가 있으면, 공백(U+0020) + "unicode-range:" + 공백(U+0020) + <'unicode-range'> 직렬화 결과 + ";"(세미콜론 U+003B)
7. 규칙에 font-variant descriptor가 있으면, 공백(U+0020) + "font-variant:" + 공백(U+0020) + <'font-variant'> 직렬화 결과 + ";"(세미콜론 U+003B)
8. 규칙에 font-feature-settings descriptor가 있으면, 공백(U+0020) + "font-feature-settings:" + 공백(U+0020) + <'font-feature-settings'> 직렬화 결과 + ";"(세미콜론 U+003B)
9. 규칙에 font-stretch descriptor가 있으면, 공백(U+0020) + "font-stretch:" + 공백(U+0020) + <'font-stretch'> 직렬화 결과 + ";"(세미콜론 U+003B)
10. 규칙에 font-weight descriptor가 있으면, 공백(U+0020) + "font-weight:" + 공백(U+0020) + <'font-weight'> 직렬화 결과 + ";"(세미콜론 U+003B)
11. 규칙에 font-style descriptor가 있으면, 공백(U+0020) + "font-style:" + 공백(U+0020) + <'font-style'> 직렬화 결과 + ";"(세미콜론 U+003B)
12. 공백(U+0020) + "}"(오른쪽 중괄호 U+007D)

CSSFontFaceRule descriptor 값 직렬화 방법 정의 필요

CSSPageRule

CSSPageRule 직렬화 방법 정의 필요

CSSNamespaceRule

"@namespace" 다음에 공백(U+0020), prefix 속성이 있으면 식별자 직렬화 결과 + 공백(U+0020), 그리고 namespaceURI 속성에 serialize as URL을 실행한 결과 + ";"(세미콜론 U+003B)

CSSKeyframesRule

아래를 이어붙인 결과:

1. "@keyframes" + 공백(U+0020)
2. name 속성에 식별자 직렬화를 실행한 결과
3. 규칙의 cssRules 리스트의 각 규칙에 serialize a CSS rule을 실행한 결과(개행 + 두 칸 들여쓰기)로 이어붙임
4. 개행 + "}"(오른쪽 중괄호 U+007D)

CSSKeyframeRule

아래를 이어붙인 결과:

1. keyText
2. " { "(공백 U+0020 + 왼쪽 중괄호 U+007B)
3. 규칙의 선언 그룹에 serialize a CSS declaration block을 실행한 결과
4. 규칙이 하나 이상의 선언과 연결되어 있으면 " "(공백 U+0020)
5. "}"(오른쪽 중괄호 U+007D)

"두 칸 들여쓰기" 규칙은 브라우저와 일치하지만 개선 필요, #5494 참고

CSS 규칙 삽입은 CSS 규칙 리스트 list의 index 위치에 rule을 삽입할 때 아래 절차를 따릅니다:

1. length를 list의 항목 개수로 둡니다.
2. index가 length보다 크면 throw IndexSizeError 예외를 던집니다.
3. new rule을 인자 rule에 parse a CSS rule을 실행한 결과로 둡니다.
4. new rule이 구문 오류면 throw SyntaxError 예외를 던집니다.
5. new rule이 CSS 명세에서 지정한 제약으로 인해 list의 0번 인덱스 위치 index에 삽입될 수 없다면, throw HierarchyRequestError 예외를 던집니다. [CSS21]

   참고: 예를 들어, CSS 스타일 시트에는 스타일 규칙 이후에 @import at-rule을 포함할 수 없습니다.

6. new rule이 @namespace at-rule이고 list에 @import at-rule, @namespace at-rule 외의 것이 있으면 throw InvalidStateError 예외를 던집니다.
7. new rule을 list의 0번 인덱스 위치 index에 삽입합니다.
8. index를 반환합니다.

CSS 규칙 제거는 CSS 규칙 리스트 list의 index 위치에서 규칙을 제거할 때 아래 절차를 따릅니다:

1. length를 list의 항목 개수로 둡니다.
2. index가 length보다 크거나 같으면 throw IndexSizeError 예외를 던집니다.
3. old rule을 list의 index번째 항목으로 둡니다.
4. old rule이 @namespace at-rule이고 list에 @import at-rule, @namespace at-rule 외의 것이 있으면 throw InvalidStateError 예외를 던집니다.
5. 규칙 old rule을 list의 0번 인덱스 위치 index에서 제거합니다.
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 객체의 개수보다 하나 적은 범위의 숫자입니다. 해당 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;

  // the following attribute and constants are historical
  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을 반환합니다.

참고: 정수 열거와 여러 상수를 사용해 정수 값을 식별하는 관행은 웹 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 객체를 반환해야 하며, 다음과 같은 특성을 가집니다:

계산됨 플래그(computed flag)

설정되지 않음.

선언(declarations)

규칙에 선언된 선언들, 지정된 순서로.

상위 CSS 규칙(parent CSS rule)

컨텍스트 객체(context object).

소유 노드(owner node)

Null.

지정된 순서(specified order)란 선언의 순서가 지정된 것과 동일하지만, 약식 속성이 정식 속성으로 정규 순서에 따라 확장된 것을 의미합니다. 어떤 속성이 여러 번 지정된 경우(약식 확장 후), 캐스케이딩 순서가 가장 높은 것만이 지정된 상대적 위치에 포함되어야 합니다. [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 규칙(child CSS rules)에 대한 CSSRuleList 객체를 반환해야 합니다.

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

deleteRule(index) 메서드는 CSS 규칙 제거(remove a CSS rule)를 호출하여 자식 CSS 규칙의 index 위치에서 규칙을 제거해야 합니다.

6.4.6. CSSMediaRule 인터페이스

CSSMediaRule 인터페이스는 CSS 조건부 규칙(CSS Conditional Rules)에 정의되어 있습니다. [CSS3-CONDITIONAL]

6.4.7. CSSPageRule 인터페이스

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

CSS 페이지 선택자 목록 파싱(parse a list of CSS page selectors)과 CSS 페이지 선택자 목록 직렬화(serialize a list of CSS page selectors) 규칙을 정의할 필요가 있습니다.

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

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

1. 주어진 값에 대해 CSS 페이지 선택자 목록 파싱(parse a list of CSS page selectors) 알고리즘을 실행합니다.
2. 알고리즘이 null이 아닌 값을 반환하면, 연관된 CSS 페이지 선택자 목록을 반환값으로 대체합니다.
3. 그렇지 않고 알고리즘이 null을 반환하면 아무 동작도 하지 않습니다.

style 속성은 @page at-규칙에 대한 CSSStyleDeclaration 객체를 반환해야 하며, 다음과 같은 특성을 가집니다:

계산됨 플래그(computed flag)

설정되지 않음.

선언(declarations)

규칙에 선언된 선언들, 지정된 순서로.

상위 CSS 규칙(parent CSS rule)

컨텍스트 객체(context object).

소유 노드(owner node)

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 객체를 다음과 같은 특성으로 반환해야 합니다:

계산됨 플래그(computed flag)

설정되지 않음.

선언(declarations)

규칙에 선언된 선언들, 지정된 순서로.

상위 CSS 규칙(parent CSS rule)

컨텍스트 객체(context object).

소유 노드(owner node)

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 선언은 다음의 연관 속성을 가집니다:

속성 이름(property name)

선언의 속성 이름.

값(value)

선언의 값, 컴포넌트 값 리스트로 표현됨.

important 플래그(important flag)

설정되거나 설정되지 않을 수 있으며, 변경될 수 있습니다.

대소문자 구분 플래그(case-sensitive flag}

속성 이름이 해당 명세에 따라 대소문자 구분으로 정의된 경우 설정되고, 그렇지 않으면 설정되지 않습니다.

6.6. CSS 선언 블록

CSS 선언 블록은 CSS 속성과 해당 값들의 순서가 지정된 컬렉션이며, CSS 선언이라고도 부릅니다. DOM에서 CSS 선언 블록은 CSSStyleDeclaration 객체입니다. CSS 선언 블록은 다음과 같은 연관 속성을 가집니다:

계산됨 플래그

객체가 지정된 스타일이 아닌 계산된 스타일 선언인 경우 설정됩니다. 별도의 명시가 없다면 설정되지 않습니다.

선언들

객체와 연관된 CSS 선언들.

상위 CSS 규칙

CSS 규칙 중 CSS 선언 블록과 연관된 규칙이 있으면 해당 규칙, 없으면 null.

소유 노드

Element 중 CSS 선언 블록과 연관된 노드가 있으면 해당 노드, 없으면 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를 반환합니다.

declaration block에 대해 CSS 선언 블록 직렬화를 하려면 아래 단계를 따르세요:

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를 선언들 중 already serialized에 포함되지 않고, 속성 이름이 shorthands 중 하나에 매핑되는 CSS 선언으로 초기화합니다.
      2. shorthand에 매핑되는 모든 속성이 longhands에 없으면 약식 루프로 계속 진행합니다.
      3. current longhands를 빈 배열로 초기화합니다.
      4. longhands 중 shorthand에 매핑되는 CSS 선언을 current longhands에 모두 추가합니다.
      5. current longhands에 important 플래그가 설정된 선언과 설정되지 않은 선언이 모두 있으면 약식 루프로 계속 진행합니다.
      6. current longhands의 첫 번째와 마지막 사이에 같은 논리 속성 그룹에 속하지만 매핑 로직이 다른(그리고 current longhands에 포함되지 않은) 선언이 있으면 약식 루프로 계속 진행합니다.
      7. value를 current longhands에 serialize a CSS value를 실행한 결과로 초기화합니다.
      8. value가 빈 문자열이면 약식 루프로 계속 진행합니다.
      9. serialized declaration을 shorthand, value, important 플래그(설정된 경우)로 CSS 선언 직렬화를 실행한 결과로 초기화합니다.
      10. serialized declaration을 list에 추가합니다.
      11. current longhands의 모든 속성 이름을 already serialized에 추가합니다.
      12. 선언 루프로 계속 진행합니다.
   5. value를 declaration에 serialize a CSS value를 실행한 결과로 초기화합니다.
   6. serialized declaration을 property, value, 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. owner node에 "style"과 declaration block을 직렬화한 결과로 속성 값 설정을 실행합니다.
6. declaration block의 업데이트 플래그를 해제합니다.

shorthands 약식 속성 리스트의 우선순위 순서는 다음과 같습니다:

1. shorthands를 사전순으로 정렬합니다.
2. "-"(U+002D)로 시작하는 모든 항목을 리스트의 끝으로 옮기되, 상대적인 순서는 유지합니다.
3. "-"(U+002D)로 시작하지만 "-webkit-"로 시작하지 않는 모든 항목을 리스트의 끝으로 옮기되, 상대적인 순서는 유지합니다.
4. 각 항목을 매핑되는 롱핸드 속성의 개수로 정렬하되, 개수가 많은 것이 먼저 오도록 합니다.

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;
};

이 객체의 지원되는 속성 인덱스는 declarations에 있는 CSS 선언의 개수보다 하나 적은 범위의 숫자입니다. 해당 CSS 선언이 없으면 지원되는 속성 인덱스도 없습니다.

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

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

2. declarations를 직렬화한 결과를 반환합니다.

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

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

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

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

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

1. property가 커스텀 속성이 아니면, 다음을 수행합니다:
   1. property를 ASCII 소문자로 변환합니다.
   2. property가 약식 속성이면:
      1. list를 빈 배열로 초기화합니다.
      2. property가 매핑하는 각 롱핸드 속성 longhand을 정규 순서대로 반복하며:
         1. longhand가 case-sensitive로 속성 이름과 일치하는 CSS 선언이 declarations에 있으면 declaration으로 참조, 없으면 null.
         2. declaration이 null이면 빈 문자열을 반환합니다.
         3. declaration을 list에 추가합니다.
      3. list의 모든 선언의 important 플래그가 동일하면 list를 직렬화한 값을 반환합니다.
      4. 그렇지 않으면 빈 문자열을 반환합니다.
2. property가 case-sensitive로 속성 이름과 일치하는 CSS 선언이 declarations에 있으면 해당 선언을 직렬화한 값을 반환합니다.
3. 그 외에는 빈 문자열을 반환합니다.

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

1. property가 커스텀 속성이 아니면, 다음을 수행합니다:
   1. property를 ASCII 소문자로 변환합니다.
   2. property가 약식 속성이면:
      1. list를 새 배열로 초기화합니다.
      2. 약식 속성이 매핑하는 각 롱핸드 속성 longhand에 대해 getPropertyPriority()를 실행한 결과를 list에 추가합니다.
      3. list의 모든 항목이 "important"이면 "important"를 반환합니다.
2. property가 case-sensitive로 속성 이름과 일치하는 CSS 선언이 declarations에 있고, 해당 선언의 important 플래그가 설정되어 있으면 "important"를 반환합니다.
3. 그 외에는 빈 문자열을 반환합니다.

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

1. 계산됨 플래그가 설정되어 있으면, NoModificationAllowedError 예외를 던집니다.
2. property가 커스텀 속성이 아니면, 다음을 수행합니다:
   1. property를 ASCII 소문자로 변환합니다.
   2. property가 case-sensitive로 지원되는 CSS 속성과 일치하지 않으면 반환합니다.
3. value가 빈 문자열이면 removeProperty()를 property로 실행하고 반환합니다.
4. priority가 빈 문자열이 아니면서 "important"와 ASCII 대소문자 구분없이 일치하지 않으면 반환합니다.
5. component value list를 property에 대해 파싱한 결과로 초기화합니다.

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

6. component value list가 null이면 반환합니다.
7. updated를 false로 초기화합니다.
8. property가 약식 속성이면, 약식이 매핑하는 각 롱핸드 속성 longhand에 대해 정규 순서대로:
   1. longhand result를 component value list에서 적절한 값을 사용하여 important 플래그를 priority에 따라 설정/해제하고, declarations을 사용하여 CSS 선언 설정을 실행한 결과로 초기화합니다.
   2. longhand result가 true면 updated를 true로 설정합니다.
9. 그 외에는 updated를 component value list, important 플래그, declarations을 사용하여 CSS 선언 설정을 실행한 결과로 초기화합니다.
10. updated가 true면 CSS 선언 블록의 style 속성을 업데이트합니다.

CSS 선언 설정에서 property, component value list, important 플래그(옵션), declarations을 받아, 아래의 제약을 만족해야 합니다:

• property와 case-sensitive로 일치하는 속성 이름을 가진 CSS 선언이 declarations에 정확히 하나 존재해야 하며, 이를 target declaration이라 합니다.
• target declaration의 값은 component value list여야 하며, important 플래그는 important 플래그가 설정된 경우 set, 그렇지 않으면 unset이어야 합니다.
• target declaration이 아닌 CSS 선언은 변경, 삽입, 삭제되어서는 안 됩니다.
• property와 같은 논리 속성 그룹에 속하지만 매핑 로직이 다른 속성 이름을 가진 CSS 선언이 declarations에 있으면, target declaration은 그 선언들 이후의 인덱스에 있어야 합니다.
• 위 단계를 실행한 결과 declarations의 직렬화 값이 변경된 경우 true를 반환해야 하며, 그렇지 않은 경우 false를 반환할 수 있습니다.

"Any observable side effect must not be made outside declarations"와 같은 내용을 추가해야 할까요? 현재 제약은 정의되지 않은 동작에 대한 구멍이 있는 것처럼 들립니다.

참고: CSS 선언 설정의 단계는 CSSOM의 이 레벨에서 정의되지 않았습니다. 사용자 에이전트는 위 제약만 만족한다면 다양한 알고리즘을 사용할 수 있습니다.

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

1. 계산됨 플래그가 설정되어 있으면, NoModificationAllowedError 예외를 던집니다.
2. property가 커스텀 속성이 아니면, property를 ASCII 소문자로 변환합니다.
3. value를 getPropertyValue()를 property로 실행한 반환값으로 초기화합니다.
4. removed를 false로 초기화합니다.
5. property가 약식 속성이면, 약식이 매핑하는 각 롱핸드 속성 longhand에 대해:
   1. longhand가 declarations에 속성 이름으로 포함되어 있지 않으면 계속 진행합니다.
   2. 해당 CSS 선언을 제거하고 removed를 true로 설정합니다.
6. 그 외에는 property가 case-sensitive로 속성 이름과 일치하는 CSS 선언이 declarations에 있으면 해당 CSS 선언을 제거하고 removed를 true로 설정합니다.
7. removed가 true면 CSS 선언 블록의 style 속성을 업데이트합니다.
8. value를 반환합니다.

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

cssFloat 속성을 가져올 때는 getPropertyValue()를 float로 실행한 결과를 반환합니다. 설정할 때는 setProperty()를 첫 번째 인자에 float, 두 번째 인자에 주어진 값을, 세 번째 인자는 생략하고 실행합니다. 예외가 발생하면 그대로 다시 던집니다.

각 지원되는 CSS 속성 property에 대해, camel-cased attribute은 property에 대해 CSS 속성 → IDL 속성 알고리즘을 실행하여 얻습니다.

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

camel-cased attribute 속성을 가져올 때는 getPropertyValue()를 IDL 속성 → CSS 속성 알고리즘을 실행한 결과를 인자로 하여 실행한 결과를 반환합니다.

camel-cased attribute 속성을 설정할 때는 setProperty()를 첫 번째 인자에 IDL 속성 → CSS 속성 알고리즘을 실행한 결과, 두 번째 인자에 주어진 값, 세 번째 인자는 생략하여 실행합니다. 예외가 발생하면 그대로 다시 던집니다.

지원되는 CSS 속성 중 -webkit-으로 시작하는 property에 대해, webkit-cased attribute는 CSS 속성 → IDL 속성 알고리즘을 lowercase first 플래그와 함께 실행하여 얻습니다.

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

webkit-cased attribute 속성을 가져올 때는 getPropertyValue()를 IDL 속성 → CSS 속성 알고리즘을 dash prefix 플래그와 함께 실행한 결과를 인자로 하여 실행한 결과를 반환합니다.

webkit-cased attribute 속성을 설정할 때는 setProperty()를 첫 번째 인자에 IDL 속성 → CSS 속성 알고리즘을 dash prefix 플래그와 함께 실행한 결과, 두 번째 인자에 주어진 값, 세 번째 인자는 생략하여 실행합니다. 예외가 발생하면 그대로 다시 던집니다.

지원되는 CSS 속성 중 속성 이름에 "-"(U+002D)가 포함된 property에 대해 dashed attribute는 property와 동일합니다.

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

dashed attribute 속성을 가져올 때는 getPropertyValue()를 dashed attribute를 인자로 하여 실행한 결과를 반환해야 합니다.

dashed attribute 속성을 설정할 때는 setProperty()를 첫 번째 인자에 dashed attribute, 두 번째 인자에 주어진 값, 세 번째 인자는 생략하여 실행합니다. 예외가 발생하면 그대로 다시 던집니다.

element.style['font-size'];

CSS 속성 → IDL 속성 알고리즘은 property와 lowercase first 플래그(옵션)를 받아 다음과 같이 동작합니다:

1. output을 빈 문자열로 초기화합니다.
2. uppercase next를 해제합니다.
3. lowercase first 플래그가 설정되면 property의 첫 글자를 제거합니다.
4. property의 각 문자 c에 대해:
   1. c가 "-"(U+002D)이면 uppercase next를 설정합니다.
   2. 그 외에 uppercase next가 설정되어 있으면 해제하고 c를 ASCII 대문자로 변환하여 output에 추가합니다.
   3. 그 외에는 c를 output에 추가합니다.
5. output을 반환합니다.

IDL 속성 → CSS 속성 알고리즘은 attribute와 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 값 파싱

CSS 값 파싱은 주어진 property에 대해 value를 다음 단계로 처리하는 것을 의미합니다:

1. list를 컴포넌트 값 목록 파싱을 value에 대해 실행한 결과로 초기화합니다.
2. list를 CSS 명세에서 property의 문법과 매칭합니다.
3. 위 단계가 실패하면 null을 반환합니다.
4. list를 반환합니다.

참고: "!important" 선언은 속성 값 영역에 포함되지 않으므로 CSS 값 파싱에서 null을 반환하게 됩니다.

6.7.2. CSS 값 직렬화

CSS 값 직렬화은 CSS 선언 declaration 또는 롱핸드 CSS 선언 목록 list에 대해 다음 규칙을 따릅니다:

1. 이 알고리즘이 list list로 호출된 경우:

   1. shorthand를 우선순위 순서로 롱핸드 속성을 모두 정확히 매핑하는 첫 번째 약식 속성으로 설정합니다.

   2. 해당 약식 속성이 없거나 shorthand가 list의 모든 속성 값을 정확히 표현할 수 없으면 빈 문자열을 반환합니다.

   3. 그렇지 않으면 shorthand 속성에 list의 선언 값이 결합된 가상의 선언을 만들어 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>가 계산값의 컴포넌트인 경우 CSS Color 4 § 4.7 색 값 직렬화 참조.

<color>가 지정값의 컴포넌트인 경우, 색을 다음과 같이 반환합니다:

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

작성자가 지정한 값도 계산값처럼 소문자로 normalize해야 할까요? 아니면 원래 대소문자를 유지해야 할까요?

<alphavalue>

값이 0~255 사이의 정수(즉, 8비트 부호 없는 정수)로 내부 표현된 경우:

1. alpha를 주어진 정수로 설정합니다.
2. 0~100 사이의 정수 중 alpha와 2.55를 곱해 가장 가까운 정수(동일하게 가까우면 올림)와 일치하는 값이 있으면, 해당 값을 100으로 나눈 값을 rounded로 설정합니다.
3. 그 외에는 alpha를 0.255로 나눈 후 가장 가까운 정수(동일하게 가까우면 올림)로 반올림하고, 1000으로 나눈 값을 rounded로 설정합니다.
4. rounded를 <number>로 직렬화한 결과를 반환합니다.

그 외에는 주어진 값을 <number>로 직렬화한 결과를 반환합니다.

<counter>

다음 알고리즘의 반환값을 사용합니다:

1. s를 빈 문자열로 초기화합니다.
2. <counter>가 컴포넌트 값 3개면 "counters("를 s에 추가합니다.
3. 2개면 "counter("를 s에 추가합니다.
4. list를 <counter>의 컴포넌트 값 목록으로 설정하되, 마지막 값이 "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>의 컴포넌트 값 목록으로 설정합니다.
3. list의 각 항목에 CSS 컴포넌트 값 직렬화를 실행합니다.
4. 쉼표 구분 목록 직렬화를 list에 실행한 결과를 s에 추가합니다.
5. ")"(U+0029)를 s에 추가합니다.
6. s를 반환합니다.

<string>

<family-name>

<specific-voice>

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

<time>

시간을 초 단위로 <number> 직렬화 규칙에 따라 직렬화한 후, 뒤에 "s"를 붙여 반환합니다.

<url>

absolute-URL string을 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. 예시

여기 지정값에 대한 변환 전/후 결과 예시가 있습니다. Before 열은 저자가 스타일 시트에 작성한 값이고, After 열은 DOM에서 쿼리할 때 반환되는 값입니다.

7. DOM에서 CSS 선언 블록 접근

7.1. ElementCSSInlineStyle 믹스인(Mixin)

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를 CSS 문법에 따라 파싱하여 <pseudo-element-selector>로 변환하고, type으로 저장합니다.
   2. type이 실패이거나 ::slotted() 또는 ::part() 가상 요소이면 TypeError 예외를 던집니다.
   3. 그 외에는 obj를 elt의 해당 가상 요소로 설정합니다.

   참고: CSS2 가상 요소는 double/single colon 버전 모두 일치해야 합니다. 즉, :before와 ::before 모두 일치합니다.

4. decls를 빈 CSS 선언 리스트로 초기화합니다.
5. elt가 연결된 상태이고, flat tree의 일부이며, 그 shadow-including root가 browsing context를 가지고 있고, browsing context container가 없거나, browsing context container가 렌더링 중이면, decls에 지원되는 CSS 속성 중 모든 롱핸드 속성을 사전순으로 값과 함께 추가하며, 값은 obj에 doc의 스타일 규칙을 적용해 계산한 resolved value입니다. 추가로 decls에 커스텀 속성의 obj에 대한 computed value가 guaranteed-invalid value가 아닌 속성도 추가합니다.

   일부 UA는 약식 속성도 처리하며, 모든 UA가 overflow처럼 롱핸드였던 약식 속성도 처리합니다. #2529 참조.

   커스텀 속성의 순서는 현재 정의되지 않았습니다. #4947 참조.

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

   계산됨 플래그

   설정됨.

   선언들

   decls.

   상위 CSS 규칙

   null.

   소유 노드

   obj.

getComputedStyle() 메서드는 CSS 스타일 시트의 origin-clean flag가 해제된 정보도 노출할 수 있습니다.

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() 는 과거에는 요소 또는 가상 요소의 "계산된 값(computed value)"을 반환한다고 정의되었습니다. 하지만 "계산된 값"의 개념은 CSS가 개정될 때마다 달라졌고, getComputedStyle() 구현은 배포된 스크립트와의 호환성을 위해 동일하게 유지되어야 했습니다. 이 문제를 해결하기 위해 본 명세는 해석된 값(resolved value) 개념을 도입합니다.

주어진 롱핸드 속성의 해석된 값은 다음과 같이 결정할 수 있습니다:

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

A color와 같은 해석된 값 특수 속성(resolved value special case property)이 다른 명세에 정의된 경우

해석된 값은 사용된 값(used value)입니다.

line-height

해석된 값은 normal인 경우 계산된 값(computed value)이 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

A height와 같은 해석된 값 특수 속성(resolved value special case property)이 다른 명세에 정의된 경우

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

bottom

left

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

right

top

A top과 같은 해석된 값 특수 속성(resolved value special case property)이 다른 명세에 정의된 경우

속성이 포지셔닝된 요소에 적용되고, display 속성의 해석된 값이 none 또는 contents가 아니고, 속성이 과도하게 제한되어 있지 않으면 해석된 값은 사용된 값이고, 그렇지 않으면 해석된 값은 계산된 값입니다.

A 해석된 값 특수 속성(resolved value special case property)이 다른 명세에 정의된 경우

관련 명세에서 정의된 대로.

그 밖의 모든 속성

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

10. IANA 고찰

10.1. Default-Style

이 섹션은 Permanent Message Header Field Registry에 등록을 위한 헤더 필드를 설명합니다.

헤더 필드 이름

Default-Style

적용 프로토콜

http

상태

standard

작성자/변경 관리자

W3C

명세 문서

이 문서가 관련 명세입니다.

관련 정보

없음

11. 변경 이력

이 섹션은 이 명세의 발행 사이에 있었던 일부 변경사항을 기록합니다. 이 섹션은 모두를 포함하지 않습니다. 버그 수정 및 편집 변경은 일반적으로 나열하지 않습니다.

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

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

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

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

• getComputedStyle의 display: contents가 변경되었습니다.

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

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

• 다른 명세가 해석된 값을 지정할 수 있게 허용합니다.

• insertRule의 index 인자가 이제 optional입니다.

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

• CSSOMString이 도입되었습니다.

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

• 업데이트 플래그가 CSS 선언 블록에 추가되어 style 속성 직렬화 및 재파싱을 방지합니다.

• 선언 값의 직렬화가 이제 제대로 정의되었습니다.

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

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

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

• setPropertyValue와 setPropertyPriority는 구현에서 관심 부족으로 CSSStyleDeclaration 에서 삭제되었습니다.

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

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

• Deprecated CSSStyleSheet 멤버가 정의되었습니다.

• CSSRule.type 속성이 더 이상 권장되지 않습니다.

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

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

• 커스텀 속성이 getComputedStyle에 포함됩니다.

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

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

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

• 약식 속성의 롱핸드 사이에 다른 속성 그룹/매핑 로직이 있으면 해당 약식은 직렬화되지 않습니다.

• CSSStyleRule 직렬화는 이제 중첩 구조를 인식합니다.

• 생성 가능한 스타일시트(Constructable stylesheets)가 도입되었습니다.

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

• 대체 스타일시트용 API가 삭제됨: selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets, enableStyleSheetsForSet() (Document에서).

• pseudo() 메서드(Element 및 PseudoElement 인터페이스)가 삭제됨.

• cascadedStyle, defaultStyle, rawComputedStyle, usedStyle IDL 속성(Element에서)이 삭제됨.

• cssText IDL 속성 setter (CSSRule에서)는 아무 동작도 하지 않도록 변경됨.

• CSSStyleDeclaration에 webkitFoo (소문자 w) 형태의 IDL 속성이 추가됨.

• CSSNamespaceRule 속성이 다시 readonly로 변경됨.

• @charset 처리가 insertRule()에서 삭제됨.

• CSSCharsetRule이 다시 삭제됨.

• 식별자와 문자열 직렬화 방식이 변경됨.

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

• :lang() 직렬화 방식이 변경됨.

• <color> 및 <number>의 직렬화가 변경됨.

• setProperty() (CSSStyleDeclaration에서)가 변경됨.

11.3. 2011년 7월 12일 ~ 2013년 12월 5일 변경사항

• 교차 출처 스타일시트는 읽거나 변경할 수 없음.
• CSSCharsetRule이 다시 도입됨.
• CSSGroupingRule과 CSSMarginRule이 도입됨.
• CSSNamespaceRule이 이제 변경 가능(mutable)함.
• CSS 선언 블록 파싱 및 직렬화가 정의됨.
• 약식 속성이 이제 setProperty(), getPropertyValue() 등에서 지원됨.
• setPropertyValue 및 setPropertyPriority가 CSSStyleDeclaration에 추가됨.
• 여러 인터페이스의 style 및 media 속성에 [PutForwards] WebIDL 확장 속성이 추가됨.
• pseudo() 메서드(Element에서)가 도입됨.
• PseudoElement 인터페이스가 도입됨.
• cascadedStyle, rawComputedStyle, usedStyle 속성이 Element 및 PseudoElement에 도입됨.
• 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에게도 추가 감사를 표합니다.