CSS 계단식(Cascading) 및 상속(Inheritance) 레벨 3

1. 소개

CSS의 기본 설계 원칙 중 하나는 계단식(cascading)입니다. 이는 여러 스타일시트가 문서의 표현에 영향을 줄 수 있도록 허용합니다. 서로 다른 선언이 동일한 요소/속성 조합에 값을 지정하려고 할 때, 이러한 충돌은 반드시 해결되어야 합니다.

반대로, 어떤 선언도 요소/속성 조합에 값을 지정하지 않을 때 문제가 발생합니다. 이 경우, 상속이나 해당 속성의 초기값을 통해 값을 찾게 됩니다.

계단식(cascading)과 기본값 처리(defaulting) 과정은 선언 집합을 입력으로 받아, 각 요소의 각 속성에 대해 지정값(specified value)을 출력합니다.

문서 내 모든 요소의 모든 속성에 대해 지정값을 찾는 규칙은 이 명세에서 설명합니다. 페이지 컨텍스트와 마진 박스 내 지정값을 찾는 규칙은 [css-page-3]에서 설명합니다.

1.1. 모듈 상호작용

이 섹션은 규범적입니다.

이 모듈은 [CSS2] 6장에 정의된 속성 값 할당, 계단식, 상속 규칙을 대체하고 확장합니다.

기타 CSS 모듈은 여기 정의된 일부 구문 및 기능의 정의를 확장할 수 있습니다. 예를 들어, 미디어 쿼리 레벨 4 명세는 이 모듈과 결합할 때 <media-query> 값 타입의 정의를 확장합니다.

2. 스타일시트 가져오기: @import 규칙

@import 규칙은 사용자가 다른 스타일시트에서 스타일 규칙을 가져올 수 있도록 합니다. @import 규칙이 유효한 스타일시트를 참조하는 경우, 사용자 에이전트는 해당 스타일시트의 내용을 @import 규칙 대신 작성된 것처럼 처리해야 합니다. 단, 두 가지 예외가 있습니다:

• 특정 기능이 (@namespace 규칙 등) 명시적으로 특정 스타일시트에만 적용되고, 가져온 스타일시트에는 적용되지 않는 경우, 해당 기능은 가져온 스타일시트에는 적용되지 않습니다.

• 기능이 스타일시트 내 두 개 이상의 구성요소의 상대적 순서에 의존하는 경우 (@namespace 규칙은 @import 외의 다른 규칙이 앞서 있으면 안 됨), 동일한 스타일시트 내 구성요소 사이에서만 적용됩니다.

예를 들어, 가져온 스타일시트의 스타일 규칙 선언은 @import가 위치한 곳에 실제로 작성된 것처럼 계단식과 상호작용합니다.

모든 @import 규칙은 스타일시트에서 모든 다른 유효한 at-규칙 및 스타일 규칙보다 앞에 와야 하며 (@charset은 제외), 그렇지 않으면 @import 규칙은 유효하지 않습니다. @import의 구문은 다음과 같습니다:

@import [ <url> | <string> ] <media-query-list>? ;

<url> 또는 <string>은 가져올 스타일시트의 URL을 제공하며, 선택적인 <media-query-list> (import conditions) 는 적용 조건을 명시합니다.

<string>이 제공된 경우, 해당 값은 동일한 값의 <url>로 해석해야 합니다.

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

2.1. 조건부 @import 규칙

import conditions 를 사용하면 가져오기를 미디어에 따라 다르게 적용할 수 있습니다. import conditions이 없다면, 가져오기는 무조건적으로 적용됩니다. (<media-query-list>에 all을 지정하면 동일하게 동작합니다.) import conditions이 일치하지 않으면, 가져온 스타일시트의 규칙은 적용되지 않습니다. 이는 가져온 스타일시트가 해당 미디어 쿼리를 가진 @media 블록에 감싸진 것과 동일하게 동작합니다.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

따라서 사용자 에이전트는 미디어 쿼리가 일치하지 않는 한 미디어 조건이 있는 가져오기를 가져오지 않을 수 있습니다.

import conditions의 평가와 전체 구문은 Media Queries 명세 [MEDIAQ]에서 정의됩니다.

2.2. 스타일시트 가져오기 처리

동일한 스타일시트가 문서에 여러 위치에서 가져오거나 연결되는 경우, 사용자 에이전트는 각 링크를 독립적인 스타일시트로 연결된 것처럼 처리해야 합니다.

참고: 이는 리소스 가져오기와 관련된 요구사항이 아니라, 스타일시트가 CSSOM에 반영되고 이 명세 등에서 사용되는 방식에만 해당합니다. 적절한 캐싱이 이루어진다면, UA가 스타일시트를 한 번만 가져오는 것은 충분히 적절합니다. 여러 번 연결되거나 가져오더라도 말입니다.

가져온 스타일시트의 origin은 이를 가져온 스타일시트의 origin과 동일합니다.

가져온 스타일시트의 환경 인코딩(environment encoding)은 가져온 스타일시트의 인코딩과 동일합니다. [css-syntax-3]

2.3. CSS 스타일시트의 Content-Type

가져온 스타일시트의 처리는 연결된 리소스의 실제 타입에 따라 달라집니다. 리소스에 Content-Type 메타데이터가 없거나, 호스트 문서가 쿼크 모드(quirks mode)이고 가져온 스타일시트와 동일한 출처(same origin)인 경우, 리소스 타입은 text/css입니다. 그렇지 않으면 타입은 Content-Type 메타데이터에서 결정됩니다.

연결된 리소스의 타입이 text/css인 경우, 해당 리소스는 CSS 스타일시트로 해석해야 합니다. 그렇지 않으면 네트워크 오류로 해석해야 합니다.

3. 축약 속성(Shorthand Properties)

일부 속성은 축약 속성입니다. 즉, 하나의 속성으로 여러 속성의 값을 지정할 수 있습니다. 축약 속성은 모든 세부 속성(longhand sub-properties)을 마치 그 자리에 확장된 것처럼 설정합니다.

축약 형태에서 값이 생략된 경우, 별도의 정의가 없는 한, 생략된 각 세부 속성에는 초기값이 할당됩니다.

h1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
}

h1 { font: bold 12pt/14pt Helvetica }

경우에 따라 축약 속성은 별도의 구문이나 세부 속성 값과 직접적으로 대응되지 않는 특별한 키워드를 가질 수 있습니다. (이런 경우, 축약 속성은 값의 확장 방식을 명시적으로 정의합니다.)

또 다른 경우, 속성이 초기화 전용 세부 속성(reset-only sub-property)일 수 있습니다: 다른 세부 속성과 마찬가지로, 축약 속성이 명시되지 않은 경우 초기값으로 초기화되지만, 해당 세부 속성을 다른 값으로 설정하는 구문은 포함하지 않을 수 있습니다. 예를 들어, border 축약 속성은 border-image를 초기값 none으로 초기화하지만, 다른 값으로 설정하는 구문은 없습니다. [css-backgrounds-3]

축약 속성이 CSS 전체 키워드(CSS-wide keywords) [css-values-3]로 지정된 경우, 모든 세부 속성도 해당 키워드로 설정됩니다. 초기화 전용 세부 속성도 포함됩니다. (이들 키워드는 하나의 선언, 심지어 축약 속성에서도 다른 값과 결합할 수 없습니다.)

축약 속성에 !important를 선언하면, 모든 세부 속성에 !important를 선언한 것과 동일합니다.

3.1. 모든 속성 초기화: all 속성

all 속성은 축약 속성으로, 모든 CSS 속성을 초기화합니다. 단, direction과 unicode-bidi는 제외됩니다. 이 속성은 CSS 전체 키워드만 허용합니다. 사용자 정의 속성은 초기화하지 않습니다. [css-variables-1].

참고: 제외되는 CSS 속성인 direction과 unicode-bidi는 실제로 마크업 수준의 기능입니다. 작성자의 스타일시트에서 설정하지 않아야 합니다. (이 속성들은 CSS 속성으로 존재하는 이유가 UA에서 지원하지 않는 문서 언어를 스타일링하기 위해서입니다.) 작성자는 HTML의 dir 속성과 같은 적절한 마크업을 사용해야 합니다. [css-writing-modes-3]

4. 값 처리

사용자 에이전트가 문서를 파싱하고 문서 트리를 구성하면, 트리의 모든 요소와 해당하는 포맷 구조의 모든 박스에 대해, 해당 미디어 타입에 적용되는 모든 속성에 값을 할당해야 합니다.

CSS 속성의 최종 값은 여러 단계의 계산 결과입니다:

1. 먼저, 요소에 적용된 선언된 값을 모든 속성별로 수집합니다. 각 요소별 각 속성에 대해 선언된 값이 0개 또는 여러 개 있을 수 있습니다.
2. 계단식(cascading)을 통해 계단식 값이 결정됩니다. 각 요소별 각 속성에 대해 최대 1개의 계단식 값만 존재할 수 있습니다.
3. 기본값 처리(defaulting)를 통해 지정값이 결정됩니다. 모든 요소의 모든 속성에 대해 단 하나의 지정값이 존재합니다.
4. 값 의존성 해결을 통해 계산값이 결정됩니다. 모든 요소의 모든 속성에 대해 단 하나의 계산값이 존재합니다.
5. 문서 포맷팅을 통해 사용값이 결정됩니다. 해당 속성이 요소에 적용되는 경우에만 사용값이 존재합니다.
6. 마지막으로, 사용값은 표시 환경의 제약에 따라 실제값으로 변환됩니다. 사용값과 마찬가지로, 해당 속성이 요소에 적용될 때만 실제값이 존재할 수 있습니다.

4.1. 선언값(Declared Values)

각 속성 선언이 요소에 적용될 때 해당 요소에 대한 그 속성의 선언값을 제공합니다. 자세한 내용은 선언 필터링을 참고하세요.

이 값들은 계단식 처리를 통해 하나의 "우승 값"으로 결정됩니다.

4.2. 계단식 값(Cascaded Values)

계단식 값은 계단식 처리 결과를 나타냅니다. 즉, 계단식 처리에서 우선순위가 가장 높은 선언값이 (계단식 결과 출력 output of the cascade에서 가장 먼저 정렬됨) 계단식 값이 됩니다. 계단식 결과 출력이 빈 리스트라면, 계단식 값은 없습니다.

4.3. 지정값(Specified Values)

지정값은 스타일시트 작성자가 해당 요소에 대해 의도한 속성 값입니다. 이는 계단식 값에 기본값 처리(defaulting) 과정을 거친 결과입니다. 모든 요소의 모든 속성에 지정값이 반드시 존재함을 보장합니다.

많은 경우, 지정값은 계단식 값과 동일합니다. 하지만 계단식 값이 전혀 없다면, 지정값은 기본값 처리로 결정됩니다. CSS 전체 키워드가 속성의 계단식 값일 때는 특별하게 처리되며, 해당 키워드에 따라 지정값이 설정됩니다. 자세한 내용은 § 7.3 명시적 기본값 처리를 참고하세요.

4.4. 계산값(Computed Values)

계산값은 속성 정의 테이블의 "계산값" 항목에 정의된 대로 지정값을 해결한 결과입니다. 일반적으로 상속을 준비하기 위해 절대값으로 변환합니다.

참고: 계산값은 상속 시 부모에서 자식으로 전달되는 값입니다. 역사적 이유로, getComputedStyle() 함수가 항상 계산값을 반환하지 않고, 사용값을 반환할 때도 있습니다. [CSSOM] 또한 계산값은 추상 데이터 표현입니다: 정의는 데이터 표현을 반영하며, 데이터 직렬화 방식은 반영하지 않습니다. 예를 들어, 직렬화 규칙에서는 파싱 시 암시되는 일부 값을 생략할 수 있지만, 그 값들도 계산값의 일부입니다.

참고: 일반적으로 계산값은 문서 레이아웃 등 비용이 많이 들거나 병렬화가 어려운 연산(네트워크 요청, 부모 요소 외의 값 조회 등) 없이 지정값을 가능한 한 많이 해결합니다.

계산값은 속성이 적용되지 않아도 존재합니다. 단, 일부 속성은 해당 속성이 요소에 적용되는지 여부에 따라 계산값 결정 방식을 변경할 수 있습니다.

4.5. 사용값(Used Values)

사용값은 계산값을 기반으로 문서 포맷팅에 사용되는 절대 이론값으로 모든 남은 계산을 완료한 결과입니다.

예를 들어, width: auto 선언은 요소의 레이아웃을 모르면 길이로 계산할 수 없으므로 계산값은 auto가 되고, 사용값은 100px 등 절대 길이가 됩니다. [CSS2]

또 다른 예로, <div>는 break-before의 계산값이 auto일 수 있지만, 자식에서 전파되어 사용값 break-before가 page가 될 수 있습니다. [css-break-3]

속성이 이 요소나 박스에 적용되지 않는 경우 (“적용 대상” 항목에 명시됨), 해당 박스나 요소에 직접적인 포맷 효과가 없으므로, 해당 속성의 사용값은 없습니다.

예를 들어, flex 속성은 사용값이 flex 아이템이 아닌 요소에는 없습니다.

참고: “모든 요소에 적용”으로 정의된 속성은 모든 요소와 display 타입에 적용되지만, 모든 가상 요소(pseudo-element) 타입에 반드시 적용되는 것은 아닙니다. 가상 요소는 종종 자체 렌더링 모델이나 기타 제약이 있기 때문입니다. ::before와 ::after 가상 요소는 일반 요소와 거의 동일하게 박스를 생성하므로 “모든 요소에 적용”되는 모든 속성을 허용합니다. 자세한 내용은 [CSS-PSEUDO-4]에서 가상 요소 관련 정보를 확인할 수 있습니다.

4.6. 실제값(Actual Values)

사용값은 원칙적으로 바로 사용할 수 있지만, 사용자 에이전트가 주어진 환경에서 그 값을 사용할 수 없는 경우도 있습니다. 예를 들어, 사용자 에이전트가 정수 픽셀 너비의 테두리만 렌더링할 수 있을 때, 사용값 너비를 근사해야 할 수도 있습니다. 또한, 요소의 폰트 크기는 사용 가능한 폰트나 font-size-adjust 속성 값에 따라 조정이 필요할 수 있습니다. 실제값은 이러한 조정이 이루어진 후의 사용값입니다.

참고: 요소의 실제값을 확인하면 문서의 레이아웃을 많이 알 수 있습니다. 그러나 모든 정보가 실제값에 기록되는 것은 아닙니다. 예를 들어, page-break-after 속성의 실제값은 해당 요소 뒤에 페이지 나누기가 있는지 여부를 반영하지 않습니다. 마찬가지로 orphans의 실제값은 특정 요소에 고아 줄이 몇 개 있는지 반영하지 않습니다. 아래 표의 예시 (j), (k)를 참고하세요.

4.7. 예시(Examples)

5. 선언 필터링(Filtering)

선언값을 찾기 위해, 구현체는 각 요소에 적용되는 모든 선언을 먼저 식별해야 합니다. 선언이 요소에 적용되는 조건은 다음과 같습니다:

• 해당 선언이 현재 문서에 적용되는 스타일시트에 속할 것
• 거짓 조건을 가진 조건부 규칙 [CSS-CONDITIONAL-3]에 의해 제한되지 않을 것
• 해당 선언이 속한 스타일 규칙의 선택자가 요소와 일치할 것 [SELECT]
• 구문적으로 유효할 것: 선언의 속성이 알려진 속성명이고, 선언의 값이 해당 속성의 구문과 일치할 것

적용되는 선언의 값들은 각 요소의 각 속성에 대해 선언값 목록을 형성합니다. 다음 절인 계단식(cascade)이 이 목록들의 우선순위를 결정합니다.

6. 계단식(Cascading)

계단식(cascade)은 주어진 요소의 특정 속성에 대한 선언값의 순서 없는 목록을 받아, 아래에 정의된 선언의 우선순위에 따라 정렬하며, 단일 계단식 값을 출력합니다.

6.1. 계단식 정렬 순서(Cascade Sorting Order)

계단식은 다음 기준에 따라 선언을 정렬하며, 우선순위가 높은 순으로 정렬합니다:

출처 및 중요도(Origin and Importance)

선언의 출처(origin)는 어디에서 왔는지에 기반하며, 중요도(importance)는 !important로 선언되었는지 여부입니다(아래 참조). 다양한 출처의 우선순위는 다음과 같습니다(내림차순):

1. 전이(Transition) 선언 [css-transitions-1]
2. 중요 UA 선언
3. 중요 사용자 선언
4. 중요 작성자 선언
5. 애니메이션 선언 [css-animations-1]
6. 일반 작성자 선언
7. 일반 사용자 선언
8. 일반 UA 선언

이 목록 앞쪽의 출처에서 온 선언이 뒤쪽 출처에서 온 선언보다 우선합니다.

특이성(Specificity)

Selectors module [SELECT]은 선택자의 특이성 계산 방법을 설명합니다. 각 선언은 자신이 속한 스타일 규칙과 동일한 특이성을 가집니다. 이 단계에서는, 스타일 규칙에 속하지 않은 선언 (style 속성의 내용 등) 은 모든 선택자보다 높은 특이성을 가진 것으로 간주합니다. 특이성이 가장 높은 선언이 우승합니다.

등장 순서(Order of Appearance)

문서상 마지막 선언이 우승합니다. 이때:

• 가져온(imported) 스타일시트의 선언은 해당 @import 규칙 대신 스타일시트가 삽입된 것처럼 순서를 결정합니다.
• 원본 문서에서 독립적으로 연결된 스타일시트의 선언은, 호스트 문서 언어에서 결정된 연결 순서대로 연결된 것처럼 처리합니다.
• style 속성의 선언은 해당 요소가 문서상 등장하는 순서대로 정렬하며, 모든 스타일시트 뒤에 위치합니다.

계단식 결과 출력(output of the cascade)은 각 요소의 각 속성에 대해 선언값이 정렬된 (비어 있을 수도 있는) 목록입니다.

6.2. 계단식 출처(Cascading Origins)

각 스타일 규칙은 계단식 출처(cascade origin)를 가지며, 이 출처가 계단식에 진입하는 위치를 결정합니다. CSS는 세 가지 기본 출처를 정의합니다:

작성자 출처(Author Origin)

작성자는 문서 언어의 규칙에 따라 원본 문서에 스타일시트를 지정합니다. 예를 들어, HTML에서는 스타일시트를 문서 내에 포함하거나 외부 연결할 수 있습니다.

사용자 출처(User Origin)

사용자는 특정 문서에 대한 스타일 정보를 지정할 수 있습니다. 예를 들어, 사용자는 스타일시트를 포함하는 파일을 지정하거나 사용자 에이전트가 사용자 스타일시트를 생성하는 인터페이스를 제공할 수 있습니다(혹은 그렇게 동작할 수 있습니다).

UA 출처(User-Agent Origin)

규격에 맞는 사용자 에이전트는 기본 스타일시트를 적용해야 합니다(혹은 그렇게 동작해야 합니다). 사용자 에이전트의 기본 스타일시트는 문서 언어의 요소를 일반적인 표현 기대에 맞게 보여야 합니다 (예: 시각적 브라우저에서 HTML의 EM 요소는 이탤릭 폰트로 표현). 자세한 내용은 HTML 사용자 에이전트 스타일시트를 참고하세요. [HTML]

CSS 확장 명세는 다음과 같은 추가 출처를 정의합니다:

애니메이션 출처(Animation Origin)

CSS 애니메이션 [css-animations-1]은 실행 중일 때 효과를 나타내는 "가상" 규칙을 생성합니다.

전이 출처(Transition Origin)

CSS 애니메이션과 마찬가지로, CSS 전이 [css-transitions-1]도 실행 중일 때 효과를 나타내는 "가상" 규칙을 생성합니다.

6.3. 중요한 선언: !important 애노테이션

CSS는 작성자와 사용자 스타일시트 사이의 권한 균형을 유지하려고 시도합니다. 기본적으로, 작성자 스타일시트의 규칙이 사용자 스타일시트의 규칙을 우선하며, 사용자 스타일시트는 사용자 에이전트의 기본 스타일시트보다 우선합니다. 이를 균형 맞추기 위해, 선언에 중요 표시를 할 수 있으며, 이는 계단식에서 우선순위를 높이고 우선순서의 역전을 일으킵니다.

선언이 중요인 경우는, !important 애노테이션이 있는 경우이며, [css-syntax-3]에 정의된 대로, 값의 마지막 두(공백, 주석 제외) 토큰이 구분 토큰 !과 식별자 토큰 important인 경우입니다. 그 외의 모든 선언은 일반(normal) 선언(비-중요)입니다.

[hidden] { display: none !important; }

중요 선언은 일반 선언보다 우선합니다. 작성자와 사용자 스타일시트 모두 중요 선언을 가질 수 있으며, 사용자 출처의 중요 선언이 작성자 출처의 중요 선언을 우선합니다. 이 CSS 기능은 접근성을 향상시키며, 특별한 요구가 있는 사용자(큰 글꼴, 색상 조합 등)에게 표현에 대한 제어권을 제공합니다.

모든 출처의 중요 선언은 애니메이션보다 우선합니다. 이를 통해 작성자는 중요한 경우 애니메이션 값을 덮어쓸 수 있습니다. (애니메이션 값은 일반적으로 다른 모든 규칙을 덮어씁니다.) [css-animations-1]

사용자 에이전트 스타일시트도 중요 선언을 포함할 수 있습니다. 이들은 모든 작성자 및 사용자 선언을 덮어씁니다.

/* 사용자 스타일시트에서 */
p { text-indent: 1em !important }
p { font-style: italic !important }
p { font-size: 18pt }

/* 작성자 스타일시트에서 */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }

6.4. Non-CSS 표현 힌트의 우선순위

UA는 원본 문서의 마크업에서 표현 힌트를 존중할 수 있습니다. 예를 들면 bgcolor 속성이나 s 요소([HTML] 참조) 등이 있습니다. 모든 문서 언어 기반 스타일링은 CSS 규칙으로 변환되어야 하며, UA 출처 규칙으로 계단식에 들어가거나, 작성자 출처 규칙(특이성 0)으로 작성자 스타일시트의 시작에 위치해야 합니다. 문서 언어는 이러한 표현 힌트가 계단식에 UA 출처 또는 작성자 출처로 들어갈지 정의할 수 있으며, 그렇게 정의된 경우 UA는 이에 따라 동작해야 합니다. 예를 들어, [SVG11]은 표현 속성을 작성자 레벨로 매핑합니다.

참고: 계단식에 UA 출처 규칙으로 들어간 표현 힌트는 작성자 출처나 사용자 출처 스타일로 덮어쓸 수 있습니다. 작성자 출처 규칙으로 들어간 표현 힌트는 작성자 출처 스타일로 덮어쓸 수 있지만, 중요하지 않은 사용자 출처 스타일로는 덮어쓸 수 없습니다. 호스트 언어는 이러한 사항을 고려해 표현 힌트의 출처를 선택해야 합니다.

7. 기본값 처리(Defaulting)

계단식에서 값이 결정되지 않은 경우, 지정값을 다른 방법으로 찾아야 합니다. 상속 속성은 상위 요소에서 상속을 통해 기본값을 가져오며, 그 외의 속성은 초기값을 사용합니다. 작성자는 inherit 또는 initial 키워드를 통해 상속 또는 초기화 요청을 명시적으로 할 수 있습니다.

7.1. 초기값(Initial Values)

모든 속성은 초기값이 있으며, 속성 정의 테이블에 정의되어 있습니다. 해당 속성이 상속 속성이 아니고, 계단식에서 값이 결정되지 않은 경우, 해당 속성의 지정값은 초기값이 됩니다.

7.2. 상속(Inheritance)

상속은 속성 값을 부모 요소에서 자식 요소로 전달합니다. 요소의 속성 상속값은 부모 요소의 해당 속성 계산값입니다. 루트 요소는 부모 요소가 없으므로, 상속값은 해당 속성의 초기값입니다.

가상 요소(pseudo-elements)는 각 가상 요소에 대해 설명된 가상의 태그 시퀀스에 따라 상속합니다. [SELECT]

일부 속성은 상속 속성이며, 속성 정의 테이블에 정의되어 있습니다. 이는 계단식에서 값이 결정되지 않은 경우, 상속에 의해 값이 결정됨을 의미합니다.

속성은 명시적으로 상속될 수도 있습니다. inherit 키워드를 참고하세요.

참고: 상속은 문서 트리를 따르며, 익명 박스에서 중단되지 않고, 박스 트리의 조작에 영향을 받지 않습니다.

7.3. 명시적 기본값 처리(Explicit Defaulting)

여러 CSS 전체 속성 값이 아래에 정의되어 있으며, 속성에 이러한 값을 선언하면 특정 기본값 처리 동작을 명시적으로 지정합니다. CSS Values and Units Level 3 [css-values-3]에 명시된 대로, 모든 CSS 속성은 이 값을 허용합니다.

7.3.1. 속성 초기화: initial 키워드

속성의 계단식 값이 initial 키워드인 경우, 해당 속성의 지정값은 초기값입니다. 초기값.

7.3.2. 명시적 상속: inherit 키워드

속성의 계단식 값이 inherit 키워드인 경우, 해당 속성의 지정값과 계산값은 상속값입니다.

7.3.3. 모든 선언 제거: unset 키워드

속성의 계단식 값이 unset 키워드인 경우, 상속 속성이면 inherit으로 처리하고, 그렇지 않으면 initial로 처리합니다. 이 키워드는 계단식에서 앞서 등장한 모든 선언값을 효과적으로 지우며, 해당 속성(또는 축약의 모든 세부 속성)에 대해 올바르게 상속 또는 초기화를 수행합니다.

8. 변경 사항(Changes)

8.1. 2020년 12월 22일 제안 권고 이후 변경 사항

이 명세에서 2020년 12월 22일 제안 권고 이후 다음 변경이 있었습니다:

• 오타 수정
• W3C 권고안의 상태 및 스타일 변경

8.2. 2018년 8월 28일 후보 권고 이후 변경 사항

이 명세에서 2018년 8월 28일 후보 권고 이후 다음 변경이 있었습니다:

• @import 정렬 요구사항이 유효한 규칙만 고려함을 명확히 함
• 계산값이 직렬화 문자열이 아니라 추상 데이터임을 명확히 함

8.3. 2016년 5월 19일 후보 권고 이후 변경 사항

이 명세에서 2016년 5월 19일 후보 권고 이후 다음과 같은 비사소한 변경이 있었습니다:

• 사용자 정의 속성이 all 축약으로 초기화되지 않음을 명확히 함. (2518)

  all 속성은 축약 속성으로, 모든 CSS 속성을 초기화하지만 direction 및 unicode-bidi는 제외합니다. … 사용자 정의 속성은 [css-variables-1]에 따라 초기화되지 않습니다.

• 스타일시트 가져오기에서 단순히 내용 삽입과 다른 두 예외를 명확히 명시함.

  @import 규칙이 유효한 스타일시트를 참조한다면, UA는 해당 스타일시트의 내용을 @import 규칙 대신 두 가지 예외와 함께 작성된 것처럼 처리해야 합니다.

  • 특정 기능(@namespace 규칙 등)이 명시적으로 특정 스타일시트에만 적용되고 가져온 스타일시트에는 적용되지 않을 경우, 해당 기능은 가져온 스타일시트에 적용되지 않음
  • 기능이 스타일시트 내 둘 이상의 구성요소의 상대적 순서에 의존할 경우 (@charset은 앞에 다른 내용이 오면 안 됨 등), 동일한 스타일시트 내에서만 적용됨

• HTML에서 해당 기능이 제거되어 범위 스타일시트 관련 언급을 삭제함.
• 더 이상 사용되지 않는 “override” 출처 언급 삭제 (원래 DOM Level 2 Style에서 정의됨, 이후 폐기됨)

코멘트 처리 현황을 확인할 수 있습니다.

8.4. 2013년 10월 3일 후보 권고 이후 변경 사항

이 명세는 2013년 10월 3일 후보 권고 이후 다음과 같은 변경이 있었습니다:

• 가져온 스타일시트의 environment encoding 정의.

  가져온 스타일시트의 environment encoding은 이를 가져온 스타일시트의 인코딩과 동일합니다. [css-syntax-3]

• !important 규칙의 구문에 대해 [css-syntax-3] 참조.

  선언이 중요인 경우는 !important 애노테이션이 있는 경우이며, [css-syntax-3]에서 정의됨 .

• reset-only sub-properties 설명 및 CSS-wide keyword 값이 축약 선언에서 이들에도 적용됨을 명확히 함.

  경우에 따라 속성이 reset-only sub-property일 수 있습니다: 다른 세부 속성과 마찬가지로, 축약 속성이 명시되지 않은 경우 초기값으로 초기화되지만, 해당 세부 속성을 다른 값으로 설정하는 구문은 포함하지 않을 수 있습니다. 예를 들어, border 축약 속성은 border-image를 초기값 none으로 초기화하지만, 다른 값으로 설정하는 구문은 없습니다. [css-backgrounds-3]

  축약 속성이 CSS 전체 키워드 [css-values-3]로 지정된 경우, 모든 세부 속성이 해당 키워드로 설정됩니다, reset-only sub-properties도 포함 . (이들 키워드는 하나의 선언, 심지어 축약 속성에서도 다른 값과 결합할 수 없습니다.)

코멘트 처리 현황을 확인할 수 있습니다.

8.5. 레벨 2 이후 추가 사항

레벨 2 이후 추가된 기능은 다음과 같습니다:

• all 축약 속성
• initial 키워드
• unset 키워드
• 계단식(cascade)에 애니메이션과 전이(transition)를 포함

감사의 글

David Baron, Simon Sapin, 그리고 Boris Zbarsky는 이 명세에 기여했습니다.

개인정보 및 보안 고려사항

• 계단식 과정은 동일 출처와 교차 출처 스타일시트를 구분하지 않으므로, 교차 출처 스타일시트의 내용을 문서에 적용된 계산된 스타일을 통해 유추할 수 있습니다.

• 사용자 설정과 UA 기본값은 스타일 규칙 적용을 통해 노출되며, 계단식 과정에서 문서에 적용된 계산된 스타일을 통해 유추될 수 있습니다.

• @import 규칙은 교차 출처 스타일시트 로딩에 CORS 프로토콜을 적용하지 않으므로, 자유롭게 가져와 적용할 수 있습니다.

• @import 규칙은 Content-Type 메타데이터가 없는 리소스(또는 호스트 문서가 쿼크 모드일 때의 모든 동일 출처 파일)를 text/css로 간주하므로, 임의 파일을 페이지에 가져와 CSS로 해석할 수 있고, 이에 따라 문서에 적용된 계산된 스타일을 통해 민감한 데이터가 유추될 수 있습니다.