CSS 스냅샷 2025

1. 소개

최초의 CSS 명세가 발표되었을 때, CSS 전체는 CSS Level 1을 정의하는 하나의 문서에 모두 담겨 있었습니다. CSS Level 2 또한 하나의 여러 챕터로 구성된 문서로 정의되었습니다. 하지만 Level 2를 넘는 CSS부터는, CSS 워킹 그룹이 단일 방대한 명세를 정의하는 대신, 각 모듈이 CSS의 한 부분을 정의하는 모듈식 접근 방식을 채택하기로 결정했습니다. 이를 통해 명세를 더 관리하기 쉬운 단위로 나누고, CSS에 대해 더 즉각적이고 점진적인 개선을 가능하게 합니다.

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

1.1. CSS란?

계단식 스타일 시트(CSS): CSS는 스타일 시트를 작성하기 위한 언어이며, 구조화된 문서(HTML과 XML 등)를 다양한 미디어에 렌더링하는 방법을 기술하도록 설계되었습니다. CSS는 원본 문서의 표현을 기술하며, 대개 그 문서 언어에 의해 표현된 근본적인 의미를 변경하지 않습니다.
스타일 시트: 문서의 표현을 지정하는 규칙들의 집합. 스타일 시트는 작성자가 작성하며, 사용자 에이전트가 해석하여 사용자에게 문서를 보여줍니다.
원본 문서: 하나 이상의 스타일 시트가 적용되는 문서. 원본 문서의 구조와 의미는 문서 언어(예: HTML, XHTML, SVG)를 사용해 인코딩됩니다.
작성자: 작성자는 문서 및 관련 스타일 시트를 작성하는 사람입니다. 작성 도구는 스타일 시트를 생성하는 사용자 에이전트입니다.
사용자: 사용자는 사용자 에이전트와 상호작용하여 문서를 보고, 듣고, 또는 다른 방식으로 이용하는 사람입니다.
사용자 에이전트(UA): 사용자 에이전트는 문서와 관련 스타일 시트를 사용자를 대신해 해석하는 모든 프로그램입니다. 사용자 에이전트는 문서를 표시하거나, 소리로 읽거나, 인쇄하거나, 다른 형식으로 변환하는 등 다양한 역할을 할 수 있습니다. CSS 명세에서 사용자 에이전트는 이 명세에서 정의한 계단식 스타일 시트(CSS)를 지원하고 해석하는 프로그램입니다.

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

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

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

작업 초안(Working Draft, WD)

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

첫 공식 작업 초안은 “최초 공개 작업 초안”(FPWD)으로 지정됩니다. CSSWG에서 FPWD 발행은 워킹 그룹 전체가 해당 모듈에 대해, 대략적으로 편집자 초안에서 제시된 범위와 제안에 동의했음을 의미합니다.

다음 단계로의 전환은 때때로 “최종 콜 작업 초안”(LCWD) 단계라 부릅니다. CSSWG는 모든 알려진 이슈를 해결하고, 테스트 및 구현을 통한 피드백 없이는 더 이상 진전을 이룰 수 없을 때 작업 초안을 전환합니다.

이 “최종 코멘트 요청”은 남은 이슈를 보고할 기한을 설정하고, 워킹 그룹이 들어오는 피드백을 특별히 추적하고 대응할 것을 요구합니다. 코멘트 추적 문서는 Disposition of Comments(DoC)입니다. 이는 최신 초안과 함께 디렉터 승인에 제출되어 광범위한 검토와 승인을 입증합니다.

후보 권고안(Candidate Recommendation, CR)

W3C 명세의 테스트 단계입니다. 이 단계는 명세를 테스트하기 위해 테스트와 구현을 사용하는 것이며, 구현을 테스트하는 것이 목적이 아닙니다. 이 과정에서 명세의 문제점이 더 드러나기도 하며, 후보 권고안은 구현 및 테스트 피드백에 따라 시간이 지나면서 변화하게 됩니다. (설계 단계(WD)보다는 덜 변화함.)

각 기능마다 두 개의 정확하고 독립적인 구현을 증명해야 CR을 종료할 수 있으므로, 이 단계에서 워킹 그룹은 테스트 스위트를 만들고 구현 보고서를 생성합니다.

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

권고안(Recommendation, REC)

W3C 명세의 완료 상태이며, 유지보수 단계입니다. 이 시점에서 워킹 그룹은 에라타 문서만 유지하며, 가끔 에라타를 반영한 개정판을 공개합니다.

편집자 초안(Editor’s Draft)은 실질적으로 편집자들이 작업 중인 라이브 복사본입니다. 워킹 그룹 합의를 반영하지 않을 수도 있으며, 때로는 자기모순적인 상태일 수도 있습니다. (W3C의 발행 과정이 시간과 노력이 많이 들기 때문에, 편집자 초안이 명세에 대한 가장 최신(최신 상태) 참고 자료가 되는 경우가 많습니다. 공식 초안이 항상 최신 상태가 되도록 발행의 마찰을 줄이는 노력이 진행 중이며, 편집자 초안이 원래의 임시 작업 공간 역할로 돌아갈 수 있게 할 예정입니다.)

2. CSS 명세 분류

모든 CSS 모듈의 목록(안정화된 것과 진행 중인 것)과 그 상태는 CSS Current Work 페이지에서 확인할 수 있습니다.

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

이 프로필에는 안정적이라고 판단되고, 안정성에 대해 충분한 구현 경험이 있는 명세만 포함됩니다.

참고: 이것은 CSS 데스크톱 브라우저 프로필을 의도한 것이 아닙니다. 이 프로필의 포함 여부는 기능 안정성만을 기준으로 하며, 사용 예상이나 웹 브라우저 채택률은 고려하지 않습니다. 이 프로필은 CSS의 가장 완전한 형태를 정의합니다.

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

CSS Level 2, 최신 개정판 (에라타 포함) [CSS2]: CSS의 핵심을 정의하며, 이후 명세에 의해 일부 내용이 대체됩니다. 특히 2장을 읽어보시길 추천합니다. CSS의 기본 개념과 설계 원칙을 소개합니다.
CSS Syntax Module 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 Module Level 3 [CSS-CONDITIONAL-3]: CSS2§7.2를 확장 및 대체하며, @media 규칙을 중첩 가능하게 업데이트하고, @supports 규칙을 도입하여 기능 지원 여부를 질의할 수 있습니다.
Selectors Level 3 [SELECTORS-3]: CSS2§5 및 CSS2§6.4.3을 대체하며, 확장된 셀렉터 범위를 정의합니다.
CSS Namespaces Module Level 3 [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 Module 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 Module Level 3 [CSS-BOX-3]: CSS2§8.1, §8.2, §8.3(단, §8.3.1 제외), §8.4를 대체합니다.
CSS Color Module 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 Module Level 3 [CSS-BACKGROUNDS-3]: CSS2§8.5 및 CSS2§14.2를 확장 및 대체하며, 레이어드 배경 이미지, 이미지 테두리, 그림자 등 배경과 테두리에 대한 제어 기능을 강화합니다.
CSS Images Module Level 3 [CSS-IMAGES-3]: 외부 2D 이미지 값 타입을 재정의 및 통합하고, 네이티브 2D 그라디언트를 도입하며, 대체 요소의 크기 및 렌더링 제어 기능을 추가합니다.
CSS Fonts Module 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 Module Level 1 [CSS-MULTICOL-1]: CSS 레이아웃에 다단 흐름을 도입합니다.
CSS Flexible Box Layout 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 Module Level 1 [CSS-TRANSFORMS-1]: CSS에 좌표 기반 그래픽 변환을 도입합니다.
Compositing and Blending Level 1 [COMPOSITING]: 오버레이된 콘텐츠의 합성 및 블렌딩을 정의하고, 그 모드를 제어하는 기능을 도입합니다.
CSS Easing Functions Level 1 [CSS-EASING-1].: 값의 변화 속도를 제어하는 변환을 작성자가 정의할 수 있는 방법을 설명합니다. 애니메이션에 적용하면, 이러한 변환을 통해 물리 현상(예: 관성)을 모방하거나, 애니메이션을 로봇처럼 계단식으로 움직이게 만들 수 있습니다.
CSS Counter Styles Level 3 [CSS-COUNTER-STYLES-3]: @counter-style 규칙을 도입하여, 작성자가 CSS 목록 마커 및 생성 콘텐츠 카운터에 사용할 자체 카운터 스타일을 정의할 수 있게 합니다 [CSS-LISTS-3]. 또한 CSS2 및 CSS2.1에 있는 것들을 포함해 일반적인 카운터 스타일 집합을 미리 정의합니다.

참고: 이 스냅샷을 구성하는 명세에 큰 변화가 있을 것으로 예상하지는 않지만, 포함되었다고 해서 해당 명세들이 고정(frozen)된 것은 아닙니다. 워킹 그룹은 이러한 명세에서 발견되는 문제를 계속해서 해결해 나갈 것입니다. 구현자는 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]를 확장 및 대체하며, 중첩된 마크업을 공유 그리드 프레임워크에서 관리할 수 있는 "서브그리드"를 도입합니다.
CSS 계단식 및 상속 모듈 5단계 [CSS-CASCADE-5]: [CSS-CASCADE-4]를 확장 및 대체하며, 단일 오리진 내에서 구조화된 방식으로 우선순위를 구성하고 균형을 맞출 수 있도록 계단식 레이어를 도입합니다.
CSS 색상 조정 모듈 1단계 [CSS-COLOR-ADJUST-1]: 이 모듈은 사용자 에이전트가 사용자 환경설정과 디바이스 출력 최적화를 처리하기 위해 자동 색상 조정 모델 및 제어 기능을 제공합니다.
CSS 조건부 규칙 모듈 4단계 [CSS-CONDITIONAL-4]: [CSS-CONDITIONAL-3]를 확장하여 지원되는 셀렉터를 테스트할 수 있게 합니다.

2.3. 구현 경험이 적은 꽤 안정적인 모듈

아래 모듈들은 설계 작업을 완료했으며 꽤 안정적이지만, 아직 충분한 테스트 및 구현 경험을 얻지 못했습니다. 앞으로의 스냅샷에서 CSS 공식 정의에 포함되기를 기대합니다.

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 도형 모듈 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-SPEECH-1]: CSS2§A(비규범적인 음성 렌더링 챕터)를 대체 및 재설계합니다.
CSS 뷰 전환 모듈 1단계 [CSS-VIEW-TRANSITIONS-1]: 문서 상태 변화에 대한 애니메이션 시각적 전환을 구현할 수 있는 View Transition API와 관련 속성 및 의사 요소를 정의합니다.

2.4. 거칠게 상호운용되는 모듈

아래 모듈들은 거친 상호운용성으로 널리 배포되었지만, 세부 내용이 충분히 검토되거나 충분히 명확하게 지정되지 않았으며, 더 많은 테스트와 버그 수정을 필요로 합니다. 앞으로의 스냅샷에서 CSS 공식 정의에 포함되기를 기대합니다.

CSS 트랜지션 [CSS-TRANSITIONS-1] 및 CSS 애니메이션 1단계 [CSS-ANIMATIONS-1].: CSS 속성의 계산된 값을 시간에 따라 전환하는 메커니즘을 도입합니다.
CSS Will Change 모듈 1단계 [CSS-WILL-CHANGE-1]: will-change라는 성능 힌트 속성을 도입합니다.
필터 효과 모듈 1단계(Filter Effects Module Level 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 논리적 속성 및 값 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 계단식 및 상속 5단계 [CSS-CASCADE-5]: CSS Cascade 4를 확장하여 계단식 레이어를 추가합니다.
모션 경로 모듈 1단계(Motion Path Module Level 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단계를 확장하여 새로운 의사 클래스, 의사 요소, 결합자를 도입하며, 더 복잡한 기준과 상태에 따라 요소를 선택할 수 있도록 기능을 강화합니다.
CSS 포함 모듈 2레벨 [CSS-CONTAIN-2]: CSS 포함 1을 확장하여 스타일 포함 기능을 추가합니다.
CSSOM 뷰 모듈 [CSSOM-VIEW-1]: 이 모듈은 시각적 뷰포트와 레이아웃 뷰포트를 조회 및 조작하기 위한 API와 요소를 화면에 스크롤하여 표시하는 메서드를 정의합니다.

2.5. CSS 레벨

계단식 스타일 시트는 전통적인 의미의 버전이 아니라 레벨을 가집니다. 각 CSS 레벨은 이전 레벨을 기반으로 정의와 기능을 발전시킵니다. 더 높은 레벨의 기능 집합은 더 낮은 레벨의 상위 집합이고, 더 높은 레벨에서 허용되는 기능의 동작은 더 낮은 레벨에서 허용되는 동작의 하위 집합입니다. 따라서 더 높은 CSS 레벨을 준수하는 사용자 에이전트는 모든 더 낮은 레벨에도 적합합니다.

CSS 레벨 1

CSS 워킹 그룹은 CSS1 명세를 더 이상 사용하지 않는 것으로 간주합니다. CSS 레벨 1은 CSS1 명세에서 정의한 모든 기능(속성, 값, at-rule 등)을 CSS2.1 명세의 구문 및 정의로 사용하여 정의됩니다. CSS 스타일 속성 명세는 요소별 스타일 속성 포함을 정의합니다.

CSS 레벨 2

CSS2 명세는 기술적으로 W3C 권고안이지만, W3C가 후보 권고안 단계를 정의하기 전에 권고안 단계에 진입했습니다. 시간이 지나면서 구현 경험과 추가 검토로 인해 CSS2 명세에서 많은 문제가 드러났으므로, 이미 방대하고 관리하기 어려운 에라타 목록을 확장하는 대신 CSS 워킹 그룹은 CSS 레벨 2 개정 1판(CSS2.1)을 정의했습니다. 두 명세에 충돌이 있을 경우 CSS2.1이 결정적인 정의를 포함합니다.

CSS2.1이 후보 권고안이 되었을 때—실질적으로는 공식적으로는 아니지만 CSS2와 같은 안정성 단계—CSS2 권고안을 더 이상 사용하지 않게 되었습니다. CSS2에서 CSS2.1에서 제외된 기능들은 후보 권고안 단계로 간주하지만, 이들 중 상당수는 CSS 레벨 3 작업 초안으로 옮겨졌거나 옮겨질 예정이고, 해당 명세가 CR 단계에 도달하면 CSS2의 정의를 더 이상 사용하지 않게 됩니다.

CSS2.1 명세는 CSS 레벨 2를 정의하며, CSS 스타일 속성 명세는 요소별 스타일 속성 포함을 정의합니다.

CSS 레벨 3

CSS 레벨 3은 모듈별로 CSS 레벨 2를 기반으로 하며, CSS2.1 명세를 코어로 사용합니다. 각 모듈은 기능을 추가하거나 CSS2.1 명세의 일부를 대체합니다. CSS 워킹 그룹은 새로운 CSS 모듈이 CSS2.1 명세와 상충하지 않도록 할 예정이며, 기능 추가와 정의 개선만을 목표로 합니다. 각 모듈이 완료될 때마다 기존 CSS2.1 및 이전에 완료된 모듈 시스템에 추가됩니다.

이 단계부터는 모듈별로 레벨이 독립적으로 부여됩니다. 예를 들어, 셀렉터 4단계가 CSS 라인 모듈 3단계보다 먼저 완료될 수 있습니다. CSS 레벨 2에 해당 기능이 없는 모듈은 1단계에서 시작하며, CSS 레벨 2에 있던 기능을 업데이트하는 모듈은 3단계에서 시작합니다.

CSS 레벨 4 및 그 이상

CSS 레벨 4는 존재하지 않습니다. 독립적인 모듈들은 4단계 이상에 도달할 수 있지만, CSS 언어 자체는 더 이상 레벨을 가지지 않습니다. ("CSS 레벨 3"이라는 용어는 이전의 단일 명세 버전과 구분하기 위해서만 사용됩니다.)

2.6. CSS 프로필

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

과거에 워킹 그룹은 일부 프로필을 공개했으며, 이는 다양한 종류의 사용자 에이전트가 지원해야 할 CSS의 최소 부분집합을 정의하기 위한 것이었습니다.

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

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

3. CSS의 책임 있는 구현을 위한 요구사항

다음 섹션들은 현재와 미래의 상호운용성을 촉진하기 위해 CSS를 책임 있게 구현할 때 준수해야 하는 여러 적합성 요구사항을 정의합니다.

3.1. 부분 구현

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

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

향후 안정적인 CSS 기능과의 충돌을 피하기 위해, CSSWG는 불안정 기능과 독자 확장 구현에 대해 다음 모범 사례를 권장합니다:

3.2.1. 실험 및 불안정 기능

W3C 명세에서 설명되었지만 상호운용되지 않는 불안정 기능의 구현은 일반 사용자에게 널리 공개해서는 안 되며; 제한된 실험적 용도로 통제된 환경에서 공개할 수 있습니다.

왜?

작성자와 구현자가 해당 기능을 실험하고 피드백을 제공할 수 있도록 허용하지만, 작성자가 프로덕션 웹사이트에서 해당 기능에 의존하는 것을 막아 향후 변경될 수 있는 문법이나 동작이 콘텐츠 의존성으로 인해 "고착"되는 것을 방지하려는 목적입니다.

예를 들어, UA는 불안정 기능을 실험용으로 베타 또는 기타 테스트 단계 빌드를 통해; 숨겨진 설정 플래그 뒤에; 특정 테스트 파트너에게만 활성화된 스위치 뒤에; 또는 의존적 사용을 제한하는 기타 방법을 통해 공개할 수 있습니다.

CSS 기능은 W3C 프로세스에서 명세가 후보 권고안(CR) 단계에 도달하기 전까지는 불안정으로 간주됩니다. 예외적인 경우, CSSWG가 공식적으로 기록된 결의에 따라 CR 이전 기능 중 광범위 공개가 안전하다고 판단되는 기능을 추가적으로 지정할 수 있습니다. § 4 사전 CR 예외 안전 공개를 참고하세요.

참고: 벤더는 반드시 워킹 그룹에 명확하게 문의해야 하며, 이 점에 대해 가정하지 마세요. 오랜 기간 변경되지 않은 사전 CR 명세는 보통 안정적이기보다는 오히려 더 오래된 경우가 많습니다.

3.2.2. 독자적 및 비표준 기능

향후 CSS 기능과의 충돌을 피하기 위해, CSS2.1 명세는 접두어 문법 [CSS2]을 독자적 및 실험적 CSS 확장에 대해 예약합니다. CSS 기능이 단일 벤더의 사용자 에이전트에서만 사용 가능한 폐쇄형 환경을 위한 것이라면 독자 확장입니다. UA는 이러한 독자 확장을 벤더-접두어 문법을 통해서만 제공해야 하며, World Wide Web과 같은 열린(다중 UA) 환경에는 노출해서는 안 됩니다.

왜?

접두어 요구사항은 폐쇄 환경에서 특화 기능을 제공하면서 향후 표준 CSS에 추가될 기능과의 충돌을 피하게 합니다. 개방형 시스템에 노출을 제한하는 것은 공개 CSS 환경이 표준화되지 않은 독자 확장에 의존하게 되는 것을 방지하기 위함입니다.

예를 들어, Firefox의 XUL 기반 UI, Apple의 iTunes UI, Microsoft의 Universal Windows Platform 앱은 해당 UA별로 구현된 CSS 확장을 사용합니다. 이러한 UA가 웹 콘텐츠가 해당 기능에 접근할 수 없게 한다면, 해당 콘텐츠가 독자 확장에 의존할 기회가 생기지 않습니다.

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

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

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

최소 세 개의 UA가 해당 기능을 구현했거나 (또는 UA가 규칙을 어기고 불안정 또는 비표준 기능을 프로덕션 릴리스로 광범위하게 공개한 경우),
그리고 구현들 간에 거친 상호운용성이 존재하며,
그리고 CSS 워킹 그룹이 해당 기능의 존재 및 공개에 합의한 것이 기록되어 있다면,

구현자는 해당 기능을 광범위 릴리스 빌드에서 접두어 없이 공개할 수 있습니다. 거친 상호운용성은 세부 구현에 차이가 있더라도, 상당수의 사용 사례에 대해 프로덕션 웹사이트에서 사용할 만큼 충분히 유사하다는 주관적 판단으로 만족됩니다.

CSSWG는 여전히 벤더 간의 조정과 각 벤더 CSS 전문가의 일관성 검토를 위해 반드시 협의해야 합니다. 거친 상호운용성은 표준 검토 과정을 거치지 않아 세부 구현이 정리되지 않았기 때문에 실제로는 엣지 케이스(혹은 그렇지 않은 경우에도)에서 상호운용성 부족이 발생하는 경우가 많다는 점에 유의하세요.

왜?

기능이 표준화가 완료되기 전에 세 개 이상의 브라우저에서 구현될 만큼 충분히 인기 있다면, 이 조항은 출시 압력을 해소할 수 있게 해줍니다. 또한 기능이 이미 "야생"에 퍼지고 사이트들이 해당 기능에 의존하기 시작했다면, "실험적"이라고 가장하는 것은 아무에게도 도움이 되지 않습니다. 접두어 없이 공개하는 것을 허용함으로써 해당 기능이 이제 사실상 표준이 되었음을 인정하고, 작성자가 크로스 플랫폼 코드를 작성하도록 유도합니다.

3.2.3.1. 불안정 기능의 벤더 접두어 사용

이렇게 표준화 트랙의 불안정 기능을 프로덕션 릴리스에서 웹에 노출할 때, 구현은 해당 기능에 대해 접두어와 접두어 없는 문법을 모두 지원해야 합니다. 기능이 안정화되어 구현이 상호운용 가능한 동작과 일치하게 되면, 벤더 접두어 문법 지원을 제거해야 합니다.

왜?

작성자가 접두어 없는 문법으로 모든 구현을 타겟할 수 있게 하면서, 필요할 때 특정 구현만 타겟해 구현 간의 호환성 문제를 표준화/버그 수정 과정을 거쳐 해결할 수 있게 하기 위함입니다.

접두어 문법만 지원되는 단계가 없으면, 오직 벤더 접두어 문법만으로 작성된 스타일시트가 만들어질 위험이 크게 줄어듭니다. 이는 UA 벤더가 해당 기능이 안정화된 후에 접두어 문법을 없앨 때 기존 콘텐츠가 깨질 위험을 낮춰줍니다. 또한 일부 벤더가 콘텐츠가 특정 접두어 문법에 의존하기 때문에 타 벤더 접두어를 지원해야 할 필요성을 느끼는 경우를 줄여줍니다.

불안정 기능을 작성자에게 홍보하는 사람은 표준 접두어 없는 문법으로 문서화해야 하며, 구현 차이 해결이 필요한 경우를 제외하고는 벤더 접두어 문법 사용을 권장하지 않아야 합니다.

3.2.3.2. CSS의 개방성 유지

CSS가 기술로서 개방적인 특성을 유지하도록, 벤더는 자신이 출시한 기능을 다른 구현자가 자유롭게 구현할 수 있도록 해야 합니다. 이를 위해 해당 기능의 표준화 완료에 필요한 명세 편집 및 테스트 리소스를 제공하고, 경쟁사가 해당 기능을 출시하는 데 방해가 되는(예: 플랫폼 종속, 라이선스 제한 등) 장애물을 피해야 합니다.

3.3. CR 단계 기능의 구현

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

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

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

4. 사전 CR 예외 안전 공개

다음 기능들은 후보 권고안(CR) 단계에 도달하기 전 광범위 공개에 대해 CSS 워킹 그룹이 명시적으로 사전 승인한 것입니다. § 3.2.1 실험 및 불안정 기능을 참고하세요.

크기 속성(width, height 등)의 플로우 상대 속성, 테두리 속성, 마진 및 패딩 속성. 설명 및 명세 참고.
크기 속성의 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]
request url modifiers, [CSS-VALUES-5]에 정의됨.
display-modes, dynamic-range, scripting, prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, forced-colors, 그리고 prefers-color-scheme 미디어 특성들은 [MEDIAQUERIES-5]에서 정의되어 있습니다.
font-tech() 및 font-format() 함수는 [CSS-CONDITIONAL-5]에서 정의되어 있습니다.
:is(), :where(), 그리고 :has() 의사 클래스와 :not() 셀렉터 목록은 [SELECTORS-4]에서 정의되어 있습니다.
text-decoration-thickness 및 text-underline-offset 속성과 from-font 값은 [CSS-TEXT-DECOR-4]에서 정의되어 있습니다.

다음 기능들은 명세가 후보 권고안(CR) 단계에 도달하기 전 광범위 공개에 대해 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 님께 특별히 감사드립니다.

적합성

문서 관례

준수 요구사항은 설명적 주장과 RFC 2119 용어의 조합으로 표현됩니다. 규범 부분에서 “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL” 같은 핵심 단어들은 RFC 2119에서 설명된 대로 해석해야 합니다. 그러나 가독성을 위해, 이 규격에서는 이러한 단어들이 모두 대문자로 나타나지 않습니다.

본 규격의 모든 텍스트는 명시적으로 비규범적이라고 표시된 부분, 예시, 주석을 제외하고는 규범적입니다. [RFC2119]

이 규격의 예제는 “예를 들어”라는 말로 시작하거나, class="example"와 같이 규범 텍스트와 구분되어 표시됩니다:

정보 제공용 노트는 "참고"라는 단어로 시작하며, class="note"와 같이 규범 텍스트와 구분되어 표시됩니다:

권고(advisement)는 특별한 주의가 필요함을 나타내는 규범 섹션으로, 다른 규범 텍스트와 구분하여 <strong class="advisement">로 스타일링되며, 예를 들면 다음과 같습니다: UA는 접근 가능한 대안을 제공해야 합니다.

적합성 클래스

이 규격에 대한 준수는 세 가지 준수 클래스에 대해 정의됩니다:

스타일 시트가 이 규격에 준수하려면, 이 모듈에서 정의된 문법을 사용하는 모든 선언이 제네릭 CSS 문법과 각 기능의 개별 문법에 따라 유효해야 합니다.

렌더러가 이 규격에 준수하려면, 스타일 시트를 관련 규격에 정의된 대로 해석함과 동시에, 이 규격에서 정의된 모든 기능을 올바르게 파싱하고, 그에 따라 문서를 렌더링할 수 있어야 합니다. 단, 장치의 제한으로 인해 UA가 문서를 올바르게 렌더링하지 못하더라도, UA가 비준수라고 할 수 없습니다. (예: UA는 단색 모니터에서 색상을 렌더링할 필요가 없습니다.)

저작 도구가 이 규격에 준수하려면, 이 모듈의 제네릭 CSS 문법과 각 기능의 개별 문법에 따라 문법적으로 올바른 스타일 시트를 작성하고, 이 모듈에 명시된 스타일 시트의 모든 다른 준수 요구사항을 충족해야 합니다.

부분 구현

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

불안정 및 독점 기능의 구현

향후 안정적인 CSS 기능과의 충돌을 피하기 위해, CSSWG는 베스트 프랙티스를 따라 불안정 및 독점 확장 CSS 기능을 구현할 것을 권장합니다.

비실험적 구현

규격이 후보 권고(Candidate Recommendation) 단계에 도달하면, 비실험적 구현이 가능해지며, 구현자는 명세대로 올바르게 구현되었음을 입증할 수 있는 CR 단계의 기능에 대해 접두어 없는 구현을 출시해야 합니다.

CSS의 구현 간 상호 운용성을 확립하고 유지하기 위해, CSS 작업 그룹은 비실험적 CSS 렌더러가 CSS 기능의 접두어 없는 구현을 출시하기 전에 구현 보고서(필요한 경우 해당 테스트 케이스 포함)를 W3C에 제출해 줄 것을 요청합니다. W3C에 제출된 테스트 케이스는 CSS 작업 그룹에 의해 검토 및 수정될 수 있습니다.

테스트 케이스 및 구현 보고서 제출에 대한 자세한 정보는 CSS 작업 그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 문의는 public-css-testsuite@w3.org 메일링 리스트로 하시기 바랍니다.