CSS 스냅샷 2024

1. 소개

최초의 CSS 명세가 발표되었을 때, 모든 CSS는 CSS Level 1을 정의하는 하나의 문서에 포함되어 있었습니다. CSS Level 2 역시 단일 다중 챕터 문서로 정의되었습니다. 그러나 Level 2를 넘어선 CSS부터는, CSS 워킹 그룹이 모듈식 접근 방식을 채택하여, 각각의 모듈이 CSS의 일부를 정의하도록 하였고, 단일 거대 명세로 정의하는 대신 이 방식을 따랐습니다. 이는 명세를 더 관리하기 쉬운 단위로 나누고, CSS의 더 즉각적이고 점진적인 개선을 가능하게 합니다.

CSS의 각 모듈이 안정성 수준이 다르기 때문에, CSS 워킹 그룹은 2024년 기준 계단식 스타일 시트의 현재 범위와 상태를 정의하기 위해 이 프로필을 공개하기로 결정했습니다.

1.1. CSS란?

계단식 스타일 시트(CSS)

CSS는 스타일 시트를 작성하기 위한 언어로, 구조화된 문서(HTML, XML 등)의 렌더링을 다양한 미디어에서 기술하도록 설계되었습니다. CSS는 원본 문서의 표현을 기술하는 데 사용되며, 일반적으로 그 문서 언어로 표현된 근본적인 의미론을 변경하지 않습니다.

스타일 시트

문서의 표현을 지정하는 규칙 집합입니다. 스타일 시트는 작성자가 작성하고, 사용자 에이전트가 해석하여 문서를 사용자에게 표시합니다.

원본 문서

하나 이상의 스타일 시트가 적용되는 문서입니다. 원본 문서의 구조와 의미는 문서 언어(예: HTML, XHTML, SVG)를 사용해 인코딩됩니다.

작성자

작성자는 문서와 연관된 스타일 시트를 작성하는 사람입니다. 작성 도구는 스타일 시트를 생성하는 사용자 에이전트입니다.

사용자

사용자는 사용자 에이전트와 상호작용하여 문서를 보고, 듣거나, 기타 방식으로 이용하는 사람입니다.

사용자 에이전트(UA)

사용자 에이전트는 문서와 관련된 스타일 시트를 사용자를 대신해 해석하는 모든 프로그램입니다. 사용자 에이전트는 문서를 표시하거나, 읽어주거나, 인쇄하거나, 다른 형식으로 변환할 수 있습니다. CSS 명세의 목적상, 사용자 에이전트란 이 명세에 정의된 계단식 스타일 시트를 지원하고 해석하는 프로그램을 의미합니다.

1.2. 배경: W3C 프로세스와 CSS

이 섹션은 규범적이지 않습니다.

W3C 프로세스에서는, 권고안 트랙 문서가 아래와 같이 세 가지 안정성 단계를 거칩니다:

작업 초안(Working Draft, WD)

이 단계는 W3C 명세의 설계 단계입니다. 워킹 그룹은 내부 및 외부 피드백에 따라 명세를 반복적으로 수정합니다.

공식 첫 작업 초안은 “최초 공개 작업 초안”(FPWD)으로 지정됩니다. CSS 워킹 그룹에서는 FPWD 발표가 전체 워킹 그룹이 해당 모듈에 대해 작업하기로 합의했음을 의미하며, 대략적으로 편집자 초안에 제안된 범위에 따라 진행됩니다.

다음 단계로의 전환은 때때로 “최종 호출 작업 초안”(LCWD) 단계라고 불립니다. CSS 워킹 그룹은 알려진 모든 이슈를 해결하고, 테스트 및 구현에서 피드백을 받지 않고는 더 이상 진전이 없을 때 작업 초안을 전환합니다.

“최종 의견 제출 요청” 단계에서는 남아있는 모든 이슈를 보고할 기한이 정해지며, 워킹 그룹은 특별히 들어오는 피드백을 추적하고 처리해야 합니다. 의견 추적 문서는 Disposition of Comments(DoC)이며, 이 문서와 업데이트된 초안이 이사의 승인을 위해 제출되어 폭넓은 검토와 수용을 입증합니다.

후보 권고안(Candidate Recommendation, CR)

이 단계는 W3C 명세의 테스트 단계입니다. 특히 이 단계는 구현을 테스트하는 것이 아니라, 테스트와 구현을 통해 명세 자체를 검증하는 과정입니다. 이 과정에서 명세의 추가적인 문제들이 드러나기도 하며, 이에 따라 후보 권고안은 구현과 테스트 피드백에 따라 시간이 지남에 따라 변화할 수 있습니다. (설계 단계(WD)보다는 변동이 적지만)

CR 단계에서 각 기능에 대해 두 가지 올바르고 독립적인 구현을 입증해야 하므로, 이 단계에서 워킹 그룹은 테스트 모음집을 만들고 구현 보고서를 작성합니다.

다음 단계로의 전환은 “제안 권고안”(PR)입니다. 이 단계에서 W3C 자문 위원회가 REC로 전환하는 것을 승인해야 합니다.

권고안(Recommendation, REC)

이 단계는 W3C 명세의 완성된 상태이며 유지보수 단계입니다. 이 시점에서 워킹 그룹은 오직 에라타 문서만 유지관리하며, 에라타를 반영한 업데이트 판을 가끔 발행합니다.

편집자 초안은 사실상 편집자가 직접 관리하는 작업 사본입니다. 워킹 그룹의 합의를 반드시 반영하지 않을 수 있고, 때때로 자기모순적인 상태일 수도 있습니다. (W3C의 공식 출판 과정이 시간과 노력이 많이 들기 때문에, 편집자 초안이 종종 명세에 대한 가장 최신의(최신 상태의) 참고 자료가 됩니다. 공식 초안이 규칙적으로 최신 상태가 되도록 출판 마찰을 줄이는 노력이 진행 중이며, 편집자 초안이 원래의 작업 공간 역할로 돌아갈 수 있게 할 예정입니다.)

2. CSS 명세의 분류

안정화된 것과 개발 중인 모든 CSS 모듈과 그 상태 목록은 CSS 현재 작업 페이지에서 확인할 수 있습니다.

2.1. 계단식 스타일 시트(CSS) — 공식 정의

이 프로필에는 안정적이라고 판단되며 그리고 충분한 구현 경험을 통해 그 안정성을 확신할 수 있는 명세만 포함됩니다.

참고: 이 프로필은 CSS 데스크톱 브라우저 프로필을 의미하지 않습니다. 이 프로필에 포함되는 기준은 오직 기능 안정성에 기반하며, 예상 사용률이나 웹 브라우저 채택률에는 기반하지 않습니다. 이 프로필은 CSS의 가장 완전한 형태를 정의합니다.

2024년 기준, 계단식 스타일 시트(CSS)는 아래 명세들로 정의됩니다.

CSS Level 2, 최신 개정판 (에라타 포함) [CSS2]

이것은 CSS의 핵심을 정의하며, 일부는 이후 명세에서 재정의됩니다. 특히 2장을 읽어보시길 추천합니다. 이 장에서는 CSS의 기본 개념과 설계 원칙을 소개합니다.

CSS Syntax Level 3 [CSS-SYNTAX-3]

CSS2§4.1, CSS2§4.2, CSS2§4.4, CSS2§G를 대체하며, CSS의 파싱 방식을 재정의합니다.

CSS Style Attributes [CSS-STYLE-ATTR]

CSS 선언을 마크업 속성에 삽입하는 방법을 정의합니다.

Media Queries Level 3 [CSS3-MEDIAQUERIES]

CSS2§7.3을 대체하고, 미디어별 스타일을 위한 구문을 확장합니다.

CSS Conditional Rules Level 3 [CSS-CONDITIONAL-3]

CSS2§7.2를 확장 및 대체하며, @media 규칙의 중첩을 허용하고, 기능 지원 쿼리를 위한 @supports 규칙을 도입합니다.

Selectors Level 3 [SELECTORS-3]

CSS2§5, CSS2§6.4.3을 대체하며, 확장된 범위의 선택자를 정의합니다.

CSS Namespaces [CSS3-NAMESPACE]

네임스페이스 접두사가 붙은 선택자를 허용하는 @namespace 규칙을 도입합니다.

CSS Cascading and Inheritance Level 4 [CSS-CASCADE-4]

CSS2§1.4.3, CSS2§6 및 [CSS-CASCADE-3]을 확장 및 대체합니다. 스타일 규칙을 정렬하고 모든 요소의 모든 속성에 값을 할당하는 방법을 설명합니다. 계단식과 상속을 통해 모든 요소의 모든 속성에 값이 전파됩니다.

CSS Values and Units Level 3 [CSS-VALUES-3]

CSS2§1.4.2.1, CSS2§4.3, CSS2§A.2.1–3을 확장 및 대체하며, CSS의 속성 정의 구문과 단위 집합을 확장합니다.

CSS Custom Properties for Cascading Variables Module Level 1 [CSS-VARIABLES-1]

모든 CSS 속성에서 사용할 수 있는 새로운 원시 값 타입인 계단식 변수와, 이를 정의하기 위한 커스텀 속성을 도입합니다.

CSS Box Model Level 3 [CSS-BOX-3]

CSS2§8.1, §8.2, §8.3(단, §8.3.1 제외), §8.4를 대체합니다.

CSS Color Level 4 [CSS-COLOR-4]

CSS2§4.3.6, CSS2§14.1, CSS2§18.2를 확장 및 대체하고, [CSS-COLOR-3]도 확장 및 대체합니다. sRGB를 넘어선 확장된 색 공간, 색상 값, 색상에 대한 CSS 객체 모델 확장을 도입합니다. 또한 opacity 속성도 정의합니다.

CSS Backgrounds and Borders Level 3 [CSS-BACKGROUNDS-3]

CSS2§8.5, CSS2§14.2를 확장 및 대체하며, 레이어드 배경 이미지, 이미지 테두리, 그림자 등 배경과 테두리를 더 세밀하게 제어할 수 있게 해줍니다.

CSS Images Level 3 [CSS-IMAGES-3]

외부 2D 이미지 값 타입을 재정의 및 통합하고, 네이티브 2D 그라데이션을 도입하며, 대체 요소 크기 및 렌더링을 위한 추가 제어 기능을 추가합니다.

CSS Fonts Level 3 [CSS-FONTS-3]

CSS2§15를 확장 및 대체하며, 폰트 선택 및 기능 선택을 더 세밀하게 제어할 수 있습니다.

CSS Writing Modes Level 3 [CSS-WRITING-MODES-3]

좌→우(예: 라틴, 인도), 우→좌(예: 히브리어, 아랍어), 양방향(예: 라틴과 아랍어 혼합), 세로쓰기(예: 아시아 문자) 등 다양한 국제적 글쓰기 방식을 지원하는 CSS를 정의합니다. CSS2§8.6, §9.10을 대체 및 확장합니다.

CSS Multi-column Layout Level 1 [CSS-MULTICOL-1]

CSS 레이아웃에 다단 흐름을 도입합니다.

CSS Flexible Box Module Level 1 [CSS-FLEXBOX-1]

CSS에 유연한 선형 레이아웃 모델을 도입합니다.

CSS Basic User Interface Module Level 3 [CSS-UI-3]

CSS2§18.1, CSS2§18.4를 확장 및 대체하며, cursor, outline 등과 사용자 인터페이스를 강화하는 여러 새로운 CSS 기능을 정의합니다.

CSS Containment Module Level 1 [CSS-CONTAIN-1]

contain 속성을 도입하여 요소의 하위 트리 CSS 처리를 독립적으로 강제하고, 사용자 에이전트가 이를 잘 사용할 경우 강력한 최적화를 가능하게 합니다.

CSS Transforms Level 1 [CSS-TRANSFORMS-1]

CSS에 좌표 기반 그래픽 변환을 도입합니다.

CSS Compositing and Blending Level 1 [COMPOSITING]

오버레이된 콘텐츠의 합성 및 블렌딩을 정의하고, 이를 제어하는 기능을 도입합니다.

CSS Easing Functions Level 1 [CSS-EASING-1].

값의 변화율을 제어하는 변환을 작성자가 정의하는 방법을 설명합니다. 애니메이션에 적용하면, 이러한 변환을 통해 모멘텀 등 물리적 현상을 모방하거나, 로봇처럼 단계별로 움직이는 애니메이션을 만들 수 있습니다.

CSS Counter Styles Level 3 [CSS-COUNTER-STYLES-3]

작성자가 CSS 목록 마커 및 생성 콘텐츠 카운터에서 사용할 수 있는 커스텀 카운터 스타일을 정의할 수 있는 @counter-style 규칙을 도입합니다. CSS2 및 CSS2.1에 존재하는 스타일을 포함한 일반적인 카운터 스타일 집합도 미리 정의되어 있습니다.

참고: 이 스냅샷을 구성하는 명세에 큰 변화가 있을 것으로 예상하지 않지만, 포함된다고 해서 동결된 것은 아닙니다. 워킹 그룹은 해당 명세에서 발견되는 문제를 계속해서 처리할 예정입니다. 구현자는 www-style 또는 CSS 워킹 그룹 블로그를 통해 변경, 수정, 또는 명확화 사항을 주시해야 합니다.

2.2. 신뢰할 수 있는 후보 권고안

아래 명세들은 신뢰할 수 있는 상태로 간주되며, 대부분 안정적인 구현과 명세를 가지고 있지만, 아직 권고안 단계에 이르지 못한 이유는 사소한 문제나 추가 구현 보고서가 필요하기 때문입니다.

미디어 쿼리 4단계(Media Queries Level 4) [MEDIAQUERIES-4]

[CSS3-MEDIAQUERIES]를 확장 및 대체하며, 구문을 확장하고, 대부분의 미디어 타입을 더 이상 사용하지 않게 하며, 새로운 미디어 기능을 도입합니다.

CSS 스크롤 스냅 모듈 1단계 [CSS-SCROLL-SNAP-1]

"스냅 위치"를 사용하여 팬 및 스크롤 동작을 제어하는 기능을 포함합니다.

CSS 스크롤바 스타일링 모듈 1단계 [CSS-SCROLLBARS-1]

스크롤바의 시각적 스타일을 조정할 수 있는 속성을 정의하며, 색상과 너비를 제어하는 기능을 도입합니다.

CSS 그리드 레이아웃 모듈 1단계 [CSS-GRID-1]

사용자 인터페이스 디자인에 최적화된 2차원 그리드 기반 레이아웃 시스템을 도입합니다. 그리드 레이아웃 모델에서는 그리드 컨테이너의 자식들이 미리 정의된 유연하거나 고정 크기 레이아웃 그리드의 임의의 슬롯에 배치될 수 있습니다.

CSS 그리드 레이아웃 모듈 2단계 [CSS-GRID-2]

[CSS-GRID-1]을 확장 및 대체하며, 중첩된 마크업을 공유 그리드 프레임워크에서 관리할 수 있는 "서브그리드" 기능을 도입합니다.

2.3. 구현 경험이 제한된 상당히 안정적인 모듈

아래 모듈들은 설계 작업을 완료했고, 상당히 안정적이지만, 아직 충분한 테스트와 구현 경험을 얻지 못했습니다. 앞으로의 스냅샷에서 CSS 공식 정의에 포함시키고자 합니다.

미디어 쿼리 4단계(Media Queries Level 4) [MEDIAQUERIES-4]

[CSS3-MEDIAQUERIES]를 확장 및 대체하며, 구문을 확장하고, 대부분의 미디어 타입을 더 이상 사용하지 않게 하며, 새로운 미디어 기능을 도입합니다.

CSS 디스플레이 모듈 3단계 [CSS-DISPLAY-3]

CSS2§9.1.2, §9.2.1(단, §9.2.1.1 제외), §9.2.2(단, §9.2.2.1 제외), §9.2.3, §9.2.4(그리고 §9.7 대체 기반)를 대체하며, 문서 요소 트리에서 CSS 포맷팅 박스 트리가 어떻게 생성되는지 정의하고, 이를 제어하는 display 속성을 정의합니다.

CSS 쓰기 모드 모듈 4단계 [CSS-WRITING-MODES-4]

[CSS-WRITING-MODES-3]를 확장 및 대체하며, 세로쓰기를 위한 옵션을 추가합니다.

CSS 분할(프래그멘테이션) 모듈 3단계 [CSS-BREAK-3]

흐름을 페이지, 컬럼, 또는 영역으로 분할하는 분할 모델을 설명하고, 이를 제어하는 속성을 정의합니다. CSS2§13.3을 확장 및 대체합니다.

CSS 박스 정렬 모듈 3단계 [CSS-ALIGN-3]

다양한 CSS 박스 레이아웃 모델(블록, 테이블, 플렉스, 그리드)에서 박스의 정렬을 제어하는 속성을 도입합니다.

CSS 셰이프 모듈 1단계 [CSS-SHAPES-1]

플로트(CSS2§9.5)를 확장하여 비직사각형 래핑 셰이프를 구현할 수 있습니다.

CSS 텍스트 모듈 3단계 [CSS-TEXT-3]

CSS2§16(단, §16.3 제외)을 확장 및 대체하며, 텍스트 조작을 위한 속성을 정의하고 그 처리 모델을 명시합니다. 줄바꿈, 정렬, 화이트스페이스 처리, 텍스트 변환 등을 포함합니다.

CSS 텍스트 장식 모듈 3단계 [CSS-TEXT-DECOR-3]

CSS2§16.3을 확장 및 대체하며, 텍스트 장식선 제어 기능을 강화하고, 텍스트 강조 표시와 텍스트 그림자 지정 기능을 추가합니다.

CSS 마스킹 모듈 1단계 [CSS-MASKING-1]

CSS2§11.1.2를 대체하며, 콘텐츠를 자르고 마스킹하는 더 강력한 방법을 도입합니다.

CSS 스크롤 스냅 모듈 1단계 [CSS-SCROLL-SNAP-1]

"스냅 위치"를 사용하여 팬 및 스크롤 동작을 제어하는 기능을 포함합니다.

CSS 스피치(음성) 모듈 1단계 [CSS-SPEECH-1]

CSS2§A를 대체하며, (비규범적) 음성 렌더링 챕터를 재설계합니다.

CSS 뷰 트랜지션 모듈 1단계 [CSS-VIEW-TRANSITIONS-1]

문서 상태 변화를 나타내는 애니메이션 시각적 트랜지션을 개발자가 만들 수 있도록 하는 API와 관련 속성, 가상 요소를 정의합니다.

2.4. 거친 상호운용성의 모듈

아래 모듈들은 거친 상호운용성 상태로 널리 배포되었지만, 세부 사항이 충분히 다듬어지지 않았거나 명세가 충분하지 않아 더 많은 테스트와 버그 수정이 필요합니다. 앞으로의 스냅샷에서 CSS 공식 정의에 포함시키고자 합니다.

CSS 트랜지션 1단계 [CSS-TRANSITIONS-1] 및 CSS 애니메이션 1단계 [CSS-ANIMATIONS-1].

CSS 속성의 계산된 값을 시간에 따라 전환하는 메커니즘을 도입합니다.

CSS Will Change 1단계 [CSS-WILL-CHANGE-1]

will-change라는 성능 힌트 속성을 도입합니다.

필터 효과 모듈 1단계 [FILTER-EFFECTS-1]

요소가 문서에 렌더링되기 전에 렌더링을 처리하는 방법으로 필터 효과를 도입합니다.

CSS 폰트 로딩 모듈 3단계 [CSS-FONT-LOADING-3]

폰트 리소스를 동적으로 로드하는 데 사용되는 이벤트와 인터페이스를 도입합니다.

CSS 박스 사이징 모듈 3단계 [CSS-SIZING-3]

CSS§10을 오버레이 및 확장하며, 사이징 속성의 값 집합을 확장하고, 더 정밀한 사이징 용어를 도입하며, CSS2에서 모호하게 정의된 다양한 자동 사이징 개념을 더 정확하게 정의합니다.

CSS 트랜스폼 2단계 [CSS-TRANSFORMS-2]

[CSS-TRANSFORMS-1]을 기반으로, 3차원 트랜스폼을 위한 새로운 트랜스폼 함수와 속성, 간단한 트랜스폼을 위한 편리한 함수를 추가합니다.

CSS 리스트 및 카운터 모듈 3단계 [CSS-LISTS-3]

리스트 카운터 관련 CSS 기능(스타일링, 위치 지정, 값 조작 등)을 포함합니다.

CSS 논리적 속성 및 값 모듈 1단계 [CSS-LOGICAL-1]

레이아웃을 물리적 방향/크기 대신 논리적 방향/크기로 제어할 수 있게 하는 논리적 속성과 값을 도입합니다. 또한 [CSS2]에서 정의한 기능에 대한 논리적 속성과 값을 정의합니다. 이러한 속성은 대응하는 물리적 속성의 쓰기 모드 상대적 등가물입니다.

CSS 포지션드 레이아웃 모듈 3단계 [CSS-POSITION-3]

CSS의 좌표 기반 위치 지정 및 오프셋 방식( 상대 위치 지정, 스티키 위치 지정, 절대 위치 지정, 고정 위치 지정 등)을 정의합니다.

Resize Observer [RESIZE-OBSERVER-1]

이 명세는 요소의 주요 박스 크기 변화 감지를 위한 API를 설명합니다.

Web Animations [WEB-ANIMATIONS-1]

웹 페이지 표현 변경의 동기화와 타이밍 모델을 정의합니다. 이 모델과 상호작용할 수 있는 API도 정의합니다.

CSS 폰트 모듈 4단계 [CSS-FONTS-4]

CSS Fonts 3을 확장 및 대체하며, OpenType 변형 지원 등 폰트 선택과 기능 선택을 더 세밀하게 제어할 수 있습니다.

CSS 색상 조정 모듈 1단계 [CSS-COLOR-ADJUST-1]

이 모듈은 사용자 에이전트가 사용자 선호도 및 장치 출력 최적화를 위해 자동 색상 조정을 할 수 있는 모델과 제어 기능을 도입합니다.

CSS 조건부 규칙 모듈 4단계 [CSS-CONDITIONAL-4]

CSS Conditional 3을 확장하여 지원되는 선택자를 테스트할 수 있게 합니다.

CSS 계단식 및 상속 모듈 5단계 [CSS-CASCADE-5]

CSS Cascade 4를 확장하여 계단식 레이어를 추가합니다.

모션 패스 모듈 1단계 [MOTION-1]

이 모듈은 작성자가 그래픽 객체를 위치시키고 지정한 경로를 따라 애니메이션할 수 있도록 합니다.

CSS 스크롤 앵커링 모듈 1단계 [CSS-SCROLL-ANCHORING-1]

이 모듈은 스크롤 컨테이너의 스크롤 위치를 특정 앵커 요소에 고정하여 콘텐츠 이동을 최소화하는 것을 목표로 합니다.

CSS 객체 모델(CSSOM) [CSSOM-1]

CSS, 미디어 쿼리, 선택자를 파싱, 직렬화 및 조작하기 위한 API를 정의합니다.

CSS 색상 모듈 5단계 [CSS-COLOR-5]

CSS Color 4를 확장하여 색상 공간 및 색상 수정 함수를 추가합니다.

셀렉터 4단계(Selectors Level 4) [SELECTORS-4]

셀렉터 3단계를 확장하여 새로운 의사 클래스, 의사 요소, 조합자를 도입하고, 더 복잡한 기준과 상태에 따라 요소를 선택할 수 있는 기능을 강화합니다.

2.5. CSS 레벨

계단식 스타일 시트는 전통적인 의미의 버전을 갖고 있지 않습니다; 대신 레벨이 있습니다. 각 CSS 레벨은 이전 레벨을 기반으로 하며, 정의를 다듬고 기능을 추가합니다. 각 상위 레벨의 기능 집합은 하위 레벨의 모든 기능을 포함하며, 상위 레벨에서 허용되는 동작은 하위 레벨에서 허용되는 동작의 부분 집합입니다. 상위 CSS 레벨을 준수하는 사용자 에이전트는 하위 모든 레벨도 준수합니다.

CSS Level 1

CSS 워킹 그룹은 CSS1 명세를 폐기된 것으로 간주합니다. CSS Level 1은 CSS1 명세에 정의된 모든 기능(속성, 값, at-rule 등)을 의미하지만, CSS2.1 명세의 구문과 정의를 사용합니다. CSS Style Attributes는 요소별 스타일 속성에 포함되는 방식을 정의합니다.

CSS Level 2

CSS2 명세는 기술적으로 W3C 권고안이지만, 권고안 단계에 진입할 당시 W3C가 후보 권고안 단계를 정의하지 않았었습니다. 시간이 지나면서 구현 경험과 추가 검토로 인해 CSS2 명세에서 많은 문제가 발견되었으므로, 이미 방대해진 에라타 목록을 확장하는 대신 CSS 워킹 그룹은 CSS Level 2 Revision 1(CSS2.1)을 정의했습니다. 두 명세 간 충돌이 있을 경우 CSS2.1이 최종 정의를 포함합니다.

CSS2.1이 후보 권고안이 되었을 때—실질적으로는 공식적으로는 아니지만 CSS2와 동일한 안정성 수준—CSS2 권고안을 폐기했습니다. CSS2에서 CSS2.1에서 제외된 기능들은 후보 권고안 단계로 간주해야 하며, 이들 중 상당수는 CSS Level 3 작업 초안에 포함될 예정이거나 이미 포함되어 있습니다. 이 경우 해당 명세가 CR에 도달하면 CSS2의 정의를 폐기합니다.

CSS2.1 명세는 CSS Level 2를 정의하고, CSS Style Attributes 명세는 요소별 스타일 속성에 포함되는 방식을 정의합니다.

CSS Level 3

CSS Level 3는 CSS Level 2를 모듈별로 확장하며, CSS2.1 명세를 코어로 사용합니다. 각 모듈은 기능을 추가하거나 CSS2.1 명세의 일부를 대체합니다. CSS 워킹 그룹은 새 CSS 모듈이 CSS2.1 명세와 모순되지 않도록 할 계획입니다. 즉, 기능을 추가하고 정의를 다듬기만 합니다. 각 모듈이 완성될 때마다 기존 CSS2.1 및 이전에 완성된 모듈 체계에 통합됩니다.

이 레벨부터는 모듈별로 독립적으로 레벨이 지정됩니다. 예를 들어 Selectors Level 4가 CSS Line Module Level 3보다 먼저 완성될 수 있습니다. CSS Level 2에 해당 기능이 없는 모듈은 1단계부터 시작하며, CSS Level 2에서 이미 존재했던 기능을 업데이트하는 모듈은 3단계부터 시작합니다.

CSS Level 4 및 그 이후

CSS Level 4는 존재하지 않습니다. 독립 모듈은 4단계 또는 그 이상에 도달할 수 있지만, CSS 언어 자체는 더 이상 레벨을 갖지 않습니다. ("CSS Level 3" 용어는 이전의 거대 명세와 구분하기 위해서만 사용됩니다.)

2.6. CSS 프로파일

모든 구현체가 CSS에 정의된 모든 기능을 구현하는 것은 아닙니다.

과거에 워킹 그룹은 여러 프로파일을 공개한 적이 있는데, 이는 다양한 사용자 에이전트 클래스가 지원해야 하는 최소 CSS 하위 집합을 정의하기 위한 것이었습니다.

이 노력은 더 이상 진행되지 않으며, 워킹 그룹이 효과적이거나 유용하다고 판단하지 않았고, 이전에 정의된 프로파일들은 이제 유지관리되지 않습니다.

참고: CSS의 부분 구현은, 그 하위 집합이 공식 프로파일이라 하더라도, 부분 구현의 미래 호환 파싱 규칙을 따라야 합니다.

3. CSS를 책임감 있게 구현하기 위한 요구사항

아래 섹션들은 CSS를 현재와 미래에 상호운용성을 촉진하는 방식으로 책임감 있게 구현하기 위한 여러 준수 요구사항을 정의합니다.

3.1. 부분 구현

작성자가 미래 호환 파싱 규칙을 활용하여 대체 값을 지정할 수 있도록, CSS 렌더러는 반드시 사용 가능한 수준의 지원이 없는 at-rule, 속성, 속성값, 키워드, 기타 구문 구조를 무효로 간주하고 (적절히 무시) 해야 하며, 특히 사용자 에이전트는 지원되지 않는 속성값만 선택적으로 무시하고, 하나의 다중 값 속성 선언에서 지원되는 값만 적용해서는 안 됩니다: 어떤 값이 무효(지원되지 않는 값은 반드시 무효로 간주됨)로 판단되면, CSS는 전체 선언을 무시해야 함을 요구합니다.

3.2. 불안정 및 독자적 기능의 구현

미래의 안정적인 CSS 기능과 충돌을 방지하기 위해, CSSWG는 불안정 기능과 CSS에 대한 독자적 확장 구현에 다음과 같은 모범 사례를 권장합니다:

3.2.1. 실험 및 불안정 기능

W3C 명세에서 설명되었지만 상호운용성이 없는 불안정 기능의 구현은 일반적인 용도로 광범위하게 공개해서는 안 되며, 제한적이고 실험적인 용도로 제어된 환경에서 공개할 수 있습니다.

CSS 기능은 W3C 프로세스에서 명세가 후보 권고안(CR) 단계에 도달하기 전까지 불안정으로 간주됩니다. 예외적인 경우, CSSWG가 공식적으로 기록된 결의로 pre-CR 기능을 광범위한 사용을 위해 공개해도 안전하다고 추가로 지정할 수 있습니다. § 4 출시 안전 pre-CR 예외사항 참조.

참고: 공급업체는 반드시 워킹 그룹과 명확히 협의해야 하며, 이 점에 대해 추측해서는 안 됩니다. 변경되지 않은 pre-CR 명세는 대개 안정적이기보다는 더 오래된 경우가 많습니다.

3.2.2. 독자적 및 비표준 기능

미래 CSS 기능과의 충돌을 방지하기 위해, CSS2.1 명세는 CSS에 대한 독자적 및 실험적 확장에 대해 접두어 구문 [CSS2]을 예약합니다. CSS 기능이 단일 공급업체의 사용자 에이전트만 접근 가능한 폐쇄 환경에서 사용될 목적으로 만들어졌다면 독자적 확장입니다. UA는 이러한 독자적 확장을 반드시 공급업체-접두어 구문을 통해서만 지원해야 하며, 월드 와이드 웹과 같은 개방(다중 UA) 환경에는 노출해서는 안 됩니다.

기능이 결국 웹에서 사용될 예정이라 하더라도, 아직 표준화되지 않았다면 웹에 노출되어서는 안 됩니다.

3.2.3. 시장 압력 및 사실상 표준

기능이 불안정(즉, 명세가 아직 안정화되지 않음)하지만

• 최소 3개의 UA가 해당 기능을 구현했거나 (또는 한 UA가 위 규칙을 어기고 불안정 또는 비표준 기능을 프로덕션 릴리스에 광범위하게 공개한 경우),

• 그리고 구현들이 거친 상호운용성을 보였고,

• 그리고 CSS 워킹 그룹이 해당 기능이 존재하고 출시되어야 한다는 합의가 기록되었다면,

구현자는 해당 기능을 광범위 릴리스 빌드에서 접두어 없이 적용할 수 있습니다. 거친 상호운용성이란 차이가 있더라도, 구현들이 충분히 유사하여 상당수의 실사용 사례에서 프로덕션 웹사이트에 사용할 수 있다고 주관적으로 판단되는 경우를 의미합니다.

CSSWG와 반드시 협의하여 공급업체간 조정 및 각 공급업체 CSS 전문가의 일관성 검토가 이뤄지도록 해야 함을 유의해야 합니다. 거친 상호운용성이라 해도, 표준 검토 과정을 통해 세부 사항이 다듬어지지 않았으므로, 극단적(또는 그렇지 않은) 사례에서 상호운용성 부족이 고통스럽게 나타날 수 있음을 의미합니다.

3.2.3.1. 불안정 기능의 공급업체 접두어 사용

이처럼 표준화 트랙 불안정 기능을 웹에 프로덕션 릴리스로 노출할 때, 구현체는 해당 기능에 대해 접두어 구문과 접두어 없는 구문 모두를 지원해야 합니다. 기능이 안정화되고 구현이 상호운용성 있는 동작으로 업데이트되면, 접두어 구문에 대한 지원은 제거해야 합니다.

작성자에게 불안정 기능을 홍보하는 사람은 반드시 표준 접두어 없는 구문으로 문서화해야 하며, 구현 불일치 우회를 목적으로 하는 경우가 아니면 접두어 구문 사용을 권장하지 않아야 합니다.

3.2.3.2. CSS의 개방성 보존

CSS가 기술로서 개방적 성격을 유지하도록 하기 위해, 공급업체는 자신이 공개한 기능을 타 구현체들도 자유롭게 구현할 수 있도록 해야 합니다. 이를 위해 해당 기능의 명세 편집 및 테스트 리소스를 제공하고, 경쟁자가 해당 기능을 출시하는 데 방해가 되는 (플랫폼 종속, 라이선스 제한 등) 장애물도 피해야 합니다.

3.3. CR 단계 기능의 구현

명세가 후보 권고안 단계에 도달하면, 구현자는 명세에 따라 올바르게 구현되었음을 입증할 수 있는 모든 CR 단계 기능에 대해 접두어 없는 구현을 공개해야 하며, 해당 기능의 접두어 변형을 노출하는 것은 피해야 합니다.

CSS의 구현 간 상호운용성을 확립·유지하기 위해, CSS 워킹 그룹은 비실험적인 CSS 렌더러가 어떤 CSS 기능에 대해 접두어 없는 구현을 공개하기 전에 구현 보고서(필요하다면 해당 구현 보고서에 사용된 테스트케이스도 함께)를 W3C에 제출할 것을 요청합니다. W3C에 제출된 테스트케이스는 CSS 워킹 그룹이 검토 및 수정할 수 있습니다.

테스트케이스 및 구현 보고서 제출에 관한 자세한 정보는 CSS 워킹 그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 문의 사항은 public-css-testsuite@w3.org 메일링 리스트로 보내주세요.

4. 출시 안전 pre-CR 예외사항

아래 기능들은 명세가 후보 권고안에 도달하기 전에 CSS 워킹 그룹에서 명시적이고 적극적으로 광범위 공개가 안전함을 승인한 기능입니다. § 3.2.1 실험 및 불안정 기능 참조.

• 사이징 속성(width, height 등)의 흐름 상대 등가 속성, border 속성, margin 및 padding 속성. 설명과 명세 참조.
• 사이징 속성의 min-content 및 max-content 키워드. 결정 및 명세 참조.
• conic-gradient() 그라데이션 표기. 결정 참조.
• aspect-ratio 속성. [CSS-SIZING-4]
• translate, rotate, scale 속성. [CSS-TRANSFORMS-2]
• hyphenate-character 속성. [CSS-TEXT-4]
• color-mix() 함수. [CSS-COLOR-5]
• <color-interpolation-method>, [CSS-COLOR-4]에 정의되어 있으며, 선형, 방사형 및 원뿔 그라데이션 보간에 사용됨. [CSS-IMAGES-4]
• relative color 구문, [CSS-COLOR-5]에 정의됨

아래 기능들은 명세가 후보 권고안에 도달하기 전에 CSS 워킹 그룹이 명시적으로 소급하여 광범위 공개가 안전함을 승인한 기능입니다:

• CSS Animations Level 1 및 CSS Transitions Level 1의 모든 내용.

5. 색인

이 섹션들은 규범적이지 않습니다.

5.1. 용어 색인

5.2. 셀렉터 색인

5.3. at-규칙 색인

5.4. 속성 색인

5.5. 값 색인

6. 감사의 글

초기 § 3.2.1 실험적 기능과 불안정 기능 권고안을 작성해 주신 Florian Rivoal께 특별히 감사드립니다.