CSS 계단식 스타일과 상속 레벨 4

1. 소개

CSS는 문서의 렌더링을 지시하는 속성이라고 하는 한정된 매개변수 집합을 정의합니다. 각각의 속성은 이름(예: color, font-size, 또는 border-style), 값 공간(예: <color>, <length-percentage>, [ solid | dashed | dotted | … ]), 그리고 문서 렌더링에서 정의된 동작을 가집니다. 속성 값은 속성 선언을 통해 문서의 다양한 부분에 할당되며, 선언된 값(예: red, 12pt, dotted)이 관련된 요소 또는 박스에 할당됩니다.

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

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

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

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

1.1. 모듈 상호작용

이 섹션은 규범적입니다.

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

다른 CSS 모듈들은 여기서 정의된 일부 문법 및 기능의 정의를 확장할 수 있습니다. 예를 들어, Media Queries Level 4 명세는 이 모듈과 결합될 때, 본 명세에서 사용되는 <media-query> 값 유형의 정의를 확장합니다.

본 명세의 목적상, 텍스트 노드는 관련 요소의 요소 자식으로 간주되며, 전체 속성 집합을 가집니다. 셀렉터로 타겟팅할 수 없으므로 모든 계산값은 기본값 처리로 할당됩니다.

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

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

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

• 특정 기능이 스타일 시트 내에서 두 개 이상의 구조의 상대적인 순서에 의존하는 경우 (@namespace 규칙이 @import를 제외한 다른 규칙 이전에 나와야 한다는 요구 등), 해당 순서는 같은 스타일 시트 내의 구조에만 적용됩니다.

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

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

@import [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

<url> 또는 <string>은 가져올 스타일 시트의 URL을 지정합니다. 선택적으로 [<supports-condition>|<declaration>] 및 <media-query-list> (통틀어 가져오기 조건) 해당 규칙의 적용 조건을 명시합니다.

@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);

<string>이 제공된 경우, 동일한 값을 가진 <url>로 해석해야 합니다.

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

2.1. 조건부 @import 규칙

가져오기 조건을 통해 가져오기가 미디어 또는 기능 지원 여부에 따라 달라질 수 있습니다. 가져오기 조건이 없다면, 가져오기는 무조건적으로 적용됩니다. (all을 <media-query-list>로 지정하면 동일한 효과가 있습니다.) 가져오기 조건이 일치하지 않으면, 가져온 스타일 시트의 규칙은 적용되지 않으며, 이는 가져온 스타일 시트가 @media 및/또는 @supports 블록으로 감싸진 것과 동일하게 동작합니다.

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

따라서 사용자 에이전트는 가져오기 조건이 일치하지 않는 한 조건부 가져오기를 가져오지 않을 수 있습니다. 추가로, <supports-condition>이 가져온 스타일 시트의 적용을 막는 경우, UA는 반드시 스타일 시트를 가져오지 않아야 하며(다른 링크로 로드되는 경우는 예외), import 규칙의 CSSImportRule.styleSheet 값에 반드시 null을 반환해야 합니다 (다른 링크로 로드된 경우에도).

@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
  ...
}

가져오기 조건은 <media-query-list>로 주어지며, 이는 미디어 쿼리 리스트로 파싱 및 해석됩니다. 그리고 <supports-condition>은 [[supports query]]로 파싱 및 해석됩니다. <supports-condition> 대신 <declaration>이 주어진 경우, 이는 <supports-condition>처럼 괄호가 추가된 것으로 해석되며, supports 조건으로 취급해야 합니다.

@import "mystyle.css" supports(display: flex);
@import "mystyle.css" supports((display: flex));

가져오기 조건의 평가 및 전체 문법은 Media Queries [MEDIAQ] 및 CSS Conditional Rules [CSS-CONDITIONAL-3] 명세에서 정의됩니다.

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

같은 스타일시트가 문서에 여러 곳에서 import되거나 링크될 경우, 사용자 에이전트는 각 링크를 독립적인 스타일시트로 취급하여 처리해야 합니다.

참고: 이는 리소스 가져오기(resource fetching)에 대한 요구사항이 아니라, CSSOM에서 스타일시트가 어떻게 반영되고 본 명세와 같은 곳에서 어떻게 사용되는지에 관한 것입니다. 적절한 캐싱이 이루어진다면, UA가 스타일시트를 한 번만 가져오더라도, 여러 번 링크 또는 import된 경우에도 문제 없습니다.

가져온 스타일시트의 계단식 원천(cascade origin)은 그것을 가져온 스타일시트의 계단식 원천입니다.

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

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

가져온 스타일시트의 처리 방식은 연결된 리소스의 실제 타입에 따라 달라집니다:

• 리소스에 Content-Type 메타데이터가 없으면, 타입은 text/css로 간주됩니다.

• 호스트 문서가 quirks mode에 있고, 호스트 문서의 원본이 링크된 리소스 response의 URL과 동일 출처(same origin)이면, 타입은 text/css로 간주됩니다.

• 그 외의 경우는 Content-Type 메타데이터에서 타입을 결정합니다.

링크된 리소스의 타입이 text/css라면, CSS 스타일시트로 해석해야 합니다. 아니라면, 네트워크 오류로 해석해야 합니다.

3. 축약 속성

일부 속성은 축약 속성으로, 하나의 속성으로 여러 속성의 값을 지정할 수 있습니다. 축약 속성은 모든 하위 속성(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-values-3] 중 하나로 지정되면, 모든 하위 속성을 해당 키워드로 설정하며, 초기화 전용 하위 속성(reset-only sub-properties)도 포함합니다. (이 키워드는 한 선언에서 다른 값과 조합할 수 없습니다. 축약에서도 마찬가지입니다.)

축약 속성에 !important를 선언하는 것은 모든 하위 속성에 !important를 선언하는 것과 동일합니다.

3.1. 속성 별칭

속성은 지원된 후 이름이 변경되는 경우가 있습니다. 예를 들어, 공급업체 접두사가 붙은 속성이 표준화되는 경우 등입니다. 호환성 문제로 인해 기존 이름도 계속 지원되어야 하지만, 새로운 이름이 더 권장됩니다. 이를 위해 CSS는 옛 문법을 새 문법으로 “별칭(aliasing)”하는 두 가지 방법을 정의합니다.

레거시 이름 별칭(legacy name aliases)

이전 속성의 값 문법이 새 속성과 동일하다면, 두 이름은 대소문자 변환과 동등한 수준의 연산으로 별칭됩니다: 파싱 시, 이전 속성은 새로운 속성으로 변환됩니다. 이 변환은 CSSOM에서도 적용되며, 문자열 인자와 속성 접근자 모두에 해당합니다: 이전 속성 이름에 대한 요청은 자동으로 새 속성 이름에 전달됩니다.

예를 들어 old-name이 레거시 이름 별칭으로 new-name의 별칭이라면, getComputedStyle(el).oldName은 newName 속성의 계산 스타일을 반환하고, el.style.setPropertyValue("old-name", "value") 는 new-name 속성에 "value"를 설정합니다.

레거시 축약(legacy shorthands)

이전 속성이 새 속성과 별도의 문법을 가진 경우, 두 이름은 축약 메커니즘을 통해 별칭됩니다. 이러한 축약은 레거시 축약으로 정의되며, 사용이 권장되지 않습니다(deprecated). 동작은 일반 축약과 동일하지만, CSSOM은 선언을 직렬화할 때 이를 사용하지 않습니다. [CSSOM]

예를 들어 page-break-* 속성은 break-* 속성의 레거시 축약입니다 (자세한 내용은 CSS Fragmentation 3 § 3.4 Page Break Aliases: the page-break-before, page-break-after, and page-break-inside properties 참조).

page-break-before: always를 설정하면, 파싱 시 break-before: page로 확장됩니다. 마찬가지로 break-before: page가 설정된 경우, getComputedStyle(el).pageBreakBefore를 호출하면 "always"를 반환합니다. 하지만 스타일 블록을 직렬화할 때 (자세한 내용은 CSSOM 1 § 6.7.2 Serializing CSS Values 참조), page-break-before 속성은 직렬화에 절대 선택되지 않고, 명시 여부와 상관없이 break-before가 항상 선택됩니다. break-before가 항상 사용됩니다.

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

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

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

4. 값 처리

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

특정 요소나 박스에 대해 CSS 속성의 최종 값은 다단계 계산의 결과입니다:

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

연결되지 않은 요소나 문서의 평면화된 요소 트리의 일부가 아닌 요소는 CSS 값 처리에 관여하지 않으며, 선언값, 계단식값, 지정값, 계산값, 사용값, 실제값을 가지지 않습니다. style 선언이 할당되어 있어도 (예: style 속성으로) 처리되지 않습니다.

4.1. 선언값

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

이 값들은 계단식 처리를 거쳐 단일 “최종값”으로 결정됩니다.

4.1.1. 값 별칭

일부 속성 값은 레거시 값 별칭을 가집니다: 파싱 시 레거시 문법이 새로운 문법으로 변환되어, 파싱 입력과 다른 선언값이 됩니다. 이러한 별칭은 레거시 호환성 요구사항을 처리하는 데 주로 사용되며, 예를 들어 벤더 프리픽스 값을 표준 값으로 변환할 때 활용됩니다.

4.2. 계단식값

계단식값은 계단식 처리의 결과로, 계단식에서 우선순위가 가장 높은 선언값입니다 (계단식 출력에서 가장 앞에 정렬됨). 계단식 출력이 빈 리스트라면, 계단식값은 없습니다.

4.3. 지정값

지정값은 스타일시트 작성자가 해당 요소에 대해 의도한 특정 속성의 값입니다. 계단식값을 기본값 처리 과정에 넣어 모든 요소의 모든 속성에 지정값이 반드시 존재하도록 보장합니다.

많은 경우에 지정값은 계단식값과 같습니다. 하지만 계단식값이 없다면, 지정값은 기본값 처리를 통해 결정됩니다. CSS 공통 키워드가 속성의 계단식값일 경우에는 해당 키워드가 요구하는 대로 지정값을 설정합니다. 자세한 내용은 § 7.3 명시적 기본값 처리를 참조하세요.

4.4. 계산값

계산값은 속성 정의 테이블의 “계산값” 라인에서 정의된 대로 지정값을 해석한 결과로, 일반적으로 상속 준비를 위해 절대값화(absolutizing) 됩니다. 상속을 위해 준비됩니다.

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

참고: 일반적으로 계산값은 지정값을 최대한 해석하지만, 문서 레이아웃이나 추가 네트워크 요청 등 비용이 크거나 병렬처리하기 어려운 연산은 하지 않습니다. 요소와 부모에서만 값을 가져옵니다.

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

4.5. 사용값

사용값은 계산값을 받아, 남은 계산을 완료해서 문서 포맷팅에 사용될 절대 이론값으로 만드는 결과입니다.

예를 들어, width: auto는 요소의 레이아웃을 알기 전에는 길이로 해석할 수 없으므로, 계산값은 auto이고, 사용값은 100px과 같은 절대 길이입니다. [CSS2]

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

속성이 해당 요소나 박스 타입에 적용되지 않으면 해당 속성에 대해 사용값이 없습니다.

예를 들어, flex 속성은 사용값을 플렉스 아이템이 아닌 요소에는 가지지 않습니다.

4.5.1. 적용 가능한 속성

속성이 해당 요소나 박스 타입에 적용되면—“Applies to” 라인에 명시됨—해당 박스나 요소에 직접적으로 영향을 줍니다.

참고: 적용되지 않는 속성도 간접적으로 포맷팅에 영향을 줄 수 있습니다. 예를 들어 계산값이 다른 적용되는 속성의 계산에 영향을 줄 수 있습니다. 또한 계산값은 항상 존재하므로, 자손으로 상속되어 영향을 미칠 수 있습니다.

참고: “모든 요소에 적용”이라고 정의된 속성은 모든 요소와 display 타입에 적용되지만, 모든 가상 요소 타입에는 반드시 적용되는 것은 아닙니다. 가상 요소는 특수한 렌더링 모델이나 제약이 있을 수 있기 때문입니다. 하지만 ::before와 ::after 가상 요소는 일반 요소와 거의 동일하게 박스를 생성하므로, “모든 요소에 적용”되는 속성을 받아들입니다. 가상 요소에 대한 정보는 [CSS-PSEUDO-4]를 참고하세요.

4.6. 실제값

사용값은 원칙적으로 바로 사용될 수 있지만, 사용자 에이전트가 특정 환경에서 해당 값을 사용할 수 없을 수도 있습니다. 예를 들어, 사용자 에이전트가 테두리의 너비를 정수 픽셀 단위로만 렌더링할 수 있다면, 사용값을 근사값으로 변환해야 할 수 있습니다. 또한, 요소의 글꼴 크기는 사용 가능한 폰트나 font-size-adjust 속성 값에 따라 조정이 필요할 수 있습니다. 실제값은 이런 조정이 끝난 후의 사용값입니다.

참고: 요소의 실제값을 조사하면 문서 레이아웃에 대한 많은 정보를 알 수 있습니다. 하지만 모든 정보가 실제값에 기록되지는 않습니다. 예를 들어, page-break-after 속성의 실제값은 해당 요소 뒤에 실제로 페이지가 나뉘었는지 나타내지 않습니다. 마찬가지로 orphans의 실제값은 특정 요소 내에 고아 줄(orphans)이 몇 줄 있는지 반영하지 않습니다. 아래 표의 (j), (k) 예시를 참고하세요.

4.7. 예시

5. 필터링

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

• 해당 선언이 현재 문서에 적용되는 스타일시트에 속한다.
• 조건 규칙 [CSS-CONDITIONAL-3]이 거짓 조건일 경우, 해당 선언이 이에 의해 제한되지 않는다.
• 해당 선언이 요소와 셀렉터가 일치하는 스타일 규칙에 속한다. [SELECT] (필요하다면 스코핑을 고려)
• 문법적으로 유효하다: 선언의 속성이 알려진 속성명이고, 선언의 값이 해당 속성의 문법과 일치한다.

적용되는 선언의 값들은 각 요소의 각 속성마다 선언값 리스트를 만듭니다. 다음 섹션인 계단식에서 이 리스트들의 우선순위가 결정됩니다.

6. 계단식 처리

계단식은 특정 요소의 특정 속성에 대한 선언값의 무순서 리스트를 받아, 아래에서 결정된 선언의 우선순위에 따라 정렬하고, 하나의 계단식값을 출력합니다.

6.1. 계단식 정렬 순서

계단식은 다음 기준에 따라 선언을 정렬합니다. 우선순위는 아래에서 위로 높습니다:

원천 및 중요도

선언의 원천은 선언이 어디서 왔는지에 따라 결정되고, 중요도는 !important(아래 참조)로 선언되었는지에 따라 결정됩니다. 다양한 원천의 우선순위는 다음과 같이, 높은 순서대로 나열됩니다:

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

이 리스트에서 앞에 있는 원천의 선언이 뒤에 있는 원천의 선언보다 우선합니다.

컨텍스트

문서 언어는 서로 다른 캡슐화 컨텍스트 (예: 트리 컨텍스트의 중첩된 섀도 트리 등)에서 가져온 선언을 혼합할 수 있습니다. [DOM]

서로 다른 캡슐화 컨텍스트에서 가져온 두 선언을 비교할 때, 일반 규칙에서는 외부 컨텍스트의 선언이 우선하고, 중요 규칙에서는 내부 컨텍스트의 선언이 우선합니다. 이때 [DOM] 트리 컨텍스트는 섀도-포함 트리 순서로 중첩된 것으로 간주합니다.

참고: 이것은 일반 선언이 캡슐화 컨텍스트에 속할 때 외부 컨텍스트에서 쉽게 덮어쓸 수 있지만, 중요 선언이 캡슐화 컨텍스트에 속할 때는 외부 컨텍스트에서 덮어쓸 수 없게 강제할 수 있음을 의미합니다.

특이성

Selectors 모듈 [SELECT]에서 셀렉터의 특이성을 계산하는 방법을 설명합니다. 각 선언은 속해있는 스타일 규칙과 동일한 특이성을 갖습니다. 이 단계에서, 스타일 규칙에 속하지 않는 선언 (예: style 속성의 내용 등) 은 어떤 셀렉터보다 높은 특이성을 갖는 것으로 간주합니다. 특이성이 가장 높은 선언이 우선합니다.

등장 순서

문서 순서에서 마지막에 등장하는 선언이 우선합니다. 이때:

• 가져온 스타일시트의 선언은 해당 스타일시트가 @import 규칙 대신에 삽입된 것처럼 순서가 정해집니다.
• 원본 문서에서 독립적으로 링크된 스타일시트의 선언은 문서 언어가 정한 링크 순서대로 이어붙인 것처럼 처리됩니다.
• style 속성의 선언은 해당 속성이 나타나는 요소의 문서 순서에 따라 정렬되며, 모든 스타일시트 뒤에 위치합니다.

계단식의 출력은 각 요소의 각 속성에 대해 선언값을 우선순위에 따라 정렬한 (비어 있을 수도 있는) 리스트입니다.

6.2. 계단식 원천

각 스타일 규칙은 계단식 원천을 가지며, 계단식에 진입하는 위치를 결정합니다. CSS는 세 가지 핵심 원천을 정의합니다:

작성자 원천

작성자는 문서 언어의 관례에 따라 소스 문서에 스타일시트를 지정합니다. 예를 들어, HTML에서는 스타일시트를 문서에 포함하거나 외부에 링크할 수 있습니다.

사용자 원천

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

사용자 에이전트 원천

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

CSS 확장에서는 다음과 같은 추가 원천을 정의합니다:

애니메이션 원천

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

트랜지션 원천

CSS 애니메이션과 유사하게, CSS 트랜지션 [css-transitions-1]도 실행 중에 효과를 나타내는 “가상” 규칙을 생성합니다.

6.3. 중요 선언: !important 주석

CSS는 작성자와 사용자 스타일시트 간의 권한 균형을 시도합니다. 기본적으로, 작성자 스타일시트의 규칙이 사용자 스타일시트의 규칙을 덮어쓰고, 사용자 스타일시트의 규칙은 사용자 에이전트의 기본 스타일시트를 덮어씁니다. 이를 균형 맞추기 위해, 선언은 중요로 표시할 수 있으며, 계단식에서 가중치가 높아지고 우선순위가 반대로 바뀝니다.

선언이 중요이 되려면 !important 주석이 있어야 하며, 이는 [css-syntax-3]에서 정의됩니다. 즉, 값의 마지막 두(공백/주석 제외) 토큰이 구분자 !와 식별자 important이면 해당됩니다. 그 외의 선언은 일반 선언(비-중요)입니다.

[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. 비-CSS 프리젠테이션 힌트의 우선순위

UA는 소스 문서의 마크업에 포함된 프리젠테이션 힌트(bgcolor 속성, s 요소 등)를 존중할 수 있습니다. [HTML] 모든 문서 언어 기반 스타일링은 해당 CSS 규칙으로 변환되어, UA 원천 또는 사용자 원천과 작성자 원천 사이의 특수 목적 작성자 프리젠테이션 힌트 원천으로 계단식에 진입해야 합니다. 계단식에서 이 작성자 프리젠테이션 힌트 원천은 독립 원천으로 취급하지만, revert 키워드에서는 작성자 원천의 일부로 간주합니다.

문서 언어는 이러한 프리젠테이션 힌트가 계단식에 UA 원천 또는 작성자 원천으로 들어가는지 정의할 수 있습니다; 정의된 경우 UA는 반드시 이에 따라 동작해야 합니다. 예를 들어 [SVG11]은 프리젠테이션 속성을 작성자 원천으로 매핑합니다.

참고: 프리젠테이션 힌트가 계단식에 UA 원천 규칙으로 진입하면 작성자 원천이나 사용자 원천 스타일로 덮어쓸 수 있습니다. 작성자 프리젠테이션 힌트 원천으로 계단식에 진입한 힌트는 작성자 원천 스타일로 덮어쓸 수 있지만, 비-중요 사용자 원천 스타일로는 덮어쓸 수 없습니다. 호스트 언어는 프리젠테이션 힌트의 적절한 원천을 위 사항을 고려해 선택해야 합니다.

7. 기본값 처리

계단식 처리에서 값이 결정되지 않으면, 지정값을 다른 방식으로 찾아야 합니다. 상속 속성은 상속을 통해 부모 요소에서 기본값을 가져오며; 기타 모든 속성은 초기값을 사용합니다. 작성자는 inherit 및 initial 키워드로 상속이나 초기화를 명확하게 요청할 수 있습니다.

7.1. 초기값

각 속성은 속성 정의 테이블에 초기값이 정의되어 있습니다. 속성이 상속 속성이 아니고, 계단식 처리에서 값이 결정되지 않으면, 해당 속성의 지정값은 초기값이 됩니다.

7.2. 상속

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

[DOM] 트리에서 섀도우가 있을 경우, 상속은 평면화된 요소 트리에서 동작합니다. 즉, 슬롯에 할당된 요소는 slot 요소에서 상속받으며, 직접 light tree 부모로부터 직접 상속받지 않습니다. 가상 요소는 각 가상 요소에 대해 설명된 가상의 태그 시퀀스에 따라 상속됩니다. [CSS-PSEUDO-4]

일부 속성은 속성 정의 테이블에 상속 속성으로 정의되어 있습니다. 즉, 계단식 처리에서 값이 결정되지 않으면, 값은 상속에 의해 결정됩니다.

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

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

7.3. 명시적 기본값 처리

아래에 여러 CSS 공통 속성값이 정의되어 있습니다; 속성에 이 값을 선언하면 특정 기본값 처리 동작을 명시적으로 지정하게 됩니다. CSS 값과 단위 [css-values-3]에 지정된 대로, 모든 CSS 속성은 이 값을 사용할 수 있습니다.

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

속성의 계단식값이 initial 키워드라면, 해당 속성의 지정값은 초기값이 됩니다.

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

속성의 계단식값이 inherit 키워드라면, 해당 속성의 지정값 및 계산값은 상속값이 됩니다.

7.3.3. 모든 선언 지우기: unset 키워드

속성의 계단식값이 unset 키워드라면, 상속 속성이면 inherit처럼 처리하고, 상속 속성이 아니면 initial처럼 처리합니다. 이 키워드는 계단식 처리에서 앞서 등장한 선언값을 모두 지우고, 해당 속성에 맞게 적절히 상속하거나 초기화합니다 (혹은 축약의 모든 하위 속성에 적용).

7.3.4. 계단식 원천 롤백: revert 키워드

속성의 계단식값이 revert 키워드라면, 동작은 선언이 속한 계단식 원천에 따라 달라집니다:

사용자 에이전트 원천

unset과 동일하게 처리합니다.

사용자 원천

계단식값을 사용자 에이전트 수준으로 롤백하여, 해당 속성의 지정값을 작성자/사용자 수준 규칙이 해당 요소의 해당 속성에 지정되지 않은 것처럼 계산합니다.

작성자 원천

계단식값을 사용자 수준으로 롤백하여, 해당 속성의 지정값을 작성자 수준 규칙이 해당 요소의 해당 속성에 지정되지 않은 것처럼 계산합니다. revert에서 이 원천은 애니메이션 원천도 포함합니다.

8. 변경사항

8.1. 2021년 10월 15일 작업초안 이후 변경사항

2021년 10월 15일 작업초안 이후의 주요 변경사항:

• @import 문법을 미디어 쿼리 및 supports 조건에 맞게 업데이트

• 함수형 표기(parse-time aliases) 허용

• @import 가져오기를 Fetch 기준으로 정의

• § 4.1.1 값 별칭 섹션 추가 (이슈 6193)

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

2021년 3월 19일 작업초안 이후의 주요 변경사항:

• 작성자 프리젠테이션 힌트 원천을 정의하여 작성자 수준 프리젠테이션 힌트 처리, zero-specificity 및 소스 순서에 의존하지 않고 계단식의 캡슐화 컨텍스트와의 상호작용을 명확히 정의 (이슈 66749)

2020년 8월 18일 작업초안 이후의 주요 변경사항:

• 레거시 이름 별칭이 값 공간의 부분집합을 매핑하는 가능성 삭제, 이제 단순 이름 별칭만 허용 (이슈 4839)
• 적용 대상 개념을 별도 섹션으로 분리, 관련 노트 추가 (이슈 1861, 5565)
• 속성 용어 정의 (이슈 5633)
• 트리의 일부가 아닌 요소의 값 처리 정의 (이슈 1964, 1548)

  연결되지 않았거나 connected가 아니거나, 문서의 평면 요소 트리의 일부가 아닌 요소는 CSS 값 처리에 참여하지 않으며, 선언값, 계단식값, 지정값, 계산값, 사용값, 실제값을 가지지 않습니다. style 선언이 할당되어 있더라도 (예: style 속성으로) 처리되지 않습니다.

• 쿼크 모드 Content-Type 가정에서 원천 비교 명확화 § 2.3 CSS 스타일시트의 Content-Type 참조 (이슈 4838)

2018년 8월 28일 후보 권고안 이후의 주요 변경사항:

• 컨텍스트를 계단식 정렬 기준에 추가하여 Shadow DOM을 지원 ([DOM], 이슈 5372)
• 섀도 트리 고려 시, 상속이 평면 요소 트리에서 동작하도록 정의
• 계단식 정렬 기준에서 스코핑 제거 (구현되지 않았기 때문)

8.3. 2016년 1월 14일 후보 권고안 이후 변경사항

2016년 1월 14일 작업초안 이후의 주요 변경사항:

• CSS에서 사용하는 별칭 유형을 명확히 정의 (이슈 866) § 3.1 속성 별칭 참조
• revert가 상속값에는 영향을 주지 않고, 계단식값만 변경한다는 점 명확화

  사용자 원천

  계단식 계단식값 을 사용자 에이전트 수준으로 롤백하여, 지정값을 작성자/사용자 수준 규칙이 해당 요소에 지정되지 않은 것처럼 계산 on this element .

  작성자 원천

  계단식 계단식값 을 사용자 수준으로 롤백하여, 지정값을 작성자 수준 규칙이 해당 요소에 지정되지 않은 것처럼 계산 on this element .

• 사용자 정의 속성은 all 축약으로 초기화되지 않는다는 점 명확화 (2518)

  all 속성은 축약으로, 모든 CSS 속성을 초기화하나 direction과 unicode-bidi는 제외됨. … 사용자 정의 속성은 초기화하지 않음 [css-variables-1].

• 가져온 스타일시트는 가져오는 스타일시트와는 별도로 해석됨을 규칙/순서 측면에서 명확히 정의

  @import 규칙이 유효한 스타일시트를 참조하는 경우, 사용자 에이전트는 해당 스타일시트의 내용을 @import 규칙 대신에 작성된 것처럼 취급해야 함 단, 두 가지 예외가 있음:

  • 특정 기능(@namespace 등)이 명시적으로 특정 스타일시트에만 적용되고, 가져온 스타일시트에는 적용되지 않는다고 정의된 경우, 해당 기능은 가져온 스타일시트에 적용되지 않음
  • 특정 기능이 스타일시트 내에서 여러 구조의 상대 순서에 의존하는 경우 (예: @charset은 앞에 다른 내용이 오면 안 됨), 해당 순서는 같은 스타일시트 내에서만 적용됨

• 텍스트 노드는 부모 요소의 자식으로 간주되며, 상속/기본값 처리로 스타일을 받는다는 점 명확화 display: contents [css-display-3]로 속성이 부모의 인라인과 구분되어 관측 가능함

  본 명세서에서 텍스트 노드는 요소의 자식으로 간주되며, 모든 속성 집합을 가지며; 셀렉터로 타겟팅할 수 없으므로 모든 계산값은 기본값 처리로 할당됨.

• 더 이상 사용되지 않는 “override” 원천 관련 내용 삭제 (이슈 1385)

의견 처리 현황을 볼 수 있습니다.

8.4. 2015년 4월 21일 작업초안 이후 변경사항

2015년 4월 21일 작업초안 이후의 변경사항:

• default 키워드 이름을 revert로 변경함.
• 중복 괄호를 supports() 문법에서, 선언이 하나만 있을 때 생략 가능하게 함.

8.5. 3단계 이후 추가사항

3단계 이후 추가된 기능은 다음과 같습니다:

• 계단식 롤백을 위한 revert 키워드 추가

• supports 조건 supports() 문법 및 @import 규칙 추가

• Shadow DOM 지원을 위해 캡슐화 컨텍스트를 계단식 정렬 기준에 추가 [DOM]

• 레거시 문법 지원을 위한 CSS 속성 별칭 메커니즘 두 가지 정의 (§ 3.1 속성 별칭 참고)

8.6. 2단계 이후 추가사항

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

• all 축약 속성
• initial 키워드
• unset 키워드
• 애니메이션과 트랜지션을 계단식에 통합

감사의 글

David Baron, Tantek Çelik, Simon Sapin, Noam Rosenthal, Boris Zbarsky가 본 명세에 기여하였습니다.

개인정보 및 보안 관련 사항

• 계단식 처리 과정은 동일 출처 및 교차 출처 스타일시트를 구분하지 않아, 계산된 스타일을 통해 교차 출처 스타일시트의 내용을 추론할 수 있게 합니다.

• 사용자 설정 및 UA 기본값이 스타일 규칙 적용으로 드러나며, 계산된 스타일을 통해 이를 추론할 수 있습니다.

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

• @import 규칙은 Content-Type 메타데이터가 없는 리소스(또는 호스트 문서가 쿼크 모드인 경우 동일 출처 파일)는 text/css로 간주하여, 임의 파일을 CSS로 가져와 적용할 수 있으며, 계산된 스타일을 통해 민감한 정보가 추론될 수 있습니다.