CSS 논리적 속성과 값 1단계

1. 소개

참고: [css-writing-modes-4]에서 작성 모드에 대한 적절한 소개를 확인하세요. 이 모듈은 해당 용어에 익숙함을 전제로 합니다.

서로 다른 문자 체계가 서로 다른 방향으로 작성되기 때문에, 다양한 작성 모드가 존재합니다: 왼쪽에서 오른쪽, 위에서 아래; 오른쪽에서 왼쪽, 위에서 아래; 아래에서 위, 오른쪽에서 왼쪽; 등등. “페이지의 시작”이나 “줄의 시작”과 같은 논리적 개념은 “줄의 위쪽” 혹은 “단락의 왼쪽 끝”과 같은 물리적 개념과 다르게 대응됩니다. 레이아웃의 일부 측면은 실제로 작성 방향에 상대적이므로, 페이지가 다른 문자 체계로 변환될 때 달라집니다; 다른 측면은 본질적으로 페이지의 물리적 방향에 상대적입니다.

예를 들어, 목록, 제목, 단락은 영어에서는 일반적으로 왼쪽 정렬되어 있지만; 실제로는 시작 정렬입니다. 왜냐하면 아랍어에서는 같은 구성이 오른쪽 정렬되고, 다국어 문서는 두 문자 체계를 모두 수용해야 하기 때문입니다.

다음 코드는 논리적 문법을 사용하면 다양한 문자 체계에서 동작하는 코드를 작성하는 데 도움이 될 수 있음을 보여줍니다:

<blockquote dir="auto">Quotation in English</blockquote>
<blockquote dir="auto">اقتباس في العربية</blockquote>

blockquote {
    text-align: start; /* latin 문자에서는 왼쪽, arabic에서는 오른쪽 */
    margin-inline-start: 0px; /* latin에서는 margin-left, arabic에서는 margin-right */
    border-inline-start: 5px solid gray; /* latin에서는 border-left, arabic에서는 border-right */
    padding-inline-start: 5px; /* latin에서는 padding-left, arabic에서는 padding-right */
}

문서에는 논리적 속성과 물리적 속성이 모두 필요할 수 있습니다. 예를 들어 버튼의 그림자 효과는 페이지 전체에서 일관성을 유지해야 하므로, 그 오프셋은 시각적 요소와 물리적 방향을 기준으로 선택되어야 하며, 문자 체계에 따라 달라지면 안 됩니다.

CSS는 원래 물리적 좌표만을 제어할 수 있도록 설계되었기에, 이 모듈은 텍스트 흐름 기준 등가물을 도입하여 CSS 스타일 시트 선언을 흐름 기준 용어로 표현할 수 있도록 합니다. 등가 속성의 매핑 및 계단식 적용 방식, CSS2.1에 해당하는 새로운 속성과 값을 정의하며, 해당 문법을 유도하는 원칙도 설명합니다. 향후 CSS 명세는 속성과 값 정의에 두 좌표 체계를 모두 포함할 것으로 예상되므로, 이 모듈은 새로운 CSS 기능의 흐름 기준 변형 도입을 추적하지 않습니다.

CSS Writing Modes의 Abstract Box Terminology 섹션은 흐름 기준과 물리적 용어 매핑 방법을 정의합니다. 이 매핑은 used value와 writing-mode, direction의 값을 기반으로 하며, 흐름 기준 키워드와 속성의 해석을 제어합니다.

일반적인 영어 텍스트 레이아웃에서 물리적 용어와 흐름 기준 용어의 대응 관계

일반적인 중국어 텍스트 레이아웃에서 물리적 용어와 흐름 기준 용어의 대응 관계

참고: text-orientation: upright과의 상호작용 때문에, used direction은 computed value와 writing-mode, text-orientation 값에 따라 달라집니다.

불안정한 사항들 이 모듈의 일부 기능 구현은 웹에서 CSS Writing Modes를 구현하기 위해 사실상 필수이며 (기본 HTML 스타일을 올바르게 구현하기 위해), CSSWG는 §2 흐름 기준 값: block-start, block-end, inline-start, inline-end 및 §4 흐름 기준 박스 모델 속성의 필수 기능은 배송 허가됨을 결의했습니다. (추가 배경은 FPWD 발표 참조.)

하지만 다음과 같은 주요 미해결 이슈가 있습니다:

단축 속성에서 logical 키워드, 키워드 이름이 변경되거나 다른 문법적 표기가 대체될 수 있기 때문입니다. (만족스러운 방식이 제안되지 않으면 이 기능은 이 단계에서 연기되어 추가 개발됩니다. 이슈 1282 참조.)
흐름 기준 longhand 속성이 부모의 동명 속성에서 상속받아야 하는지, 아니면 물리적 속성에 매핑되어 해당 속성에서 상속받아야 하는지 여부. (이슈 3029 참조.)
margin 같은 단축 속성이 두 longhand 세트 모두 확장되는지, 아니면 설정된 것만 확장되는지 여부. (이슈 3030 참조.)

위 이슈에 대한 의견, 제안, 사용 사례를 환영합니다. GitHub에 등록하거나, 트위터 @csswg로 보내거나, www-style@w3.org로 보내주세요.

2. 흐름 기준 값: block-start, block-end, inline-start, inline-end

물리적 방향 키워드 값(top, bottom, left, 또는 right)를 허용하는 속성은 적절한 흐름 기준 방향 키워드도 허용하도록 재정의됩니다. 이러한 경우, 흐름 기준 값은 해당 물리적 값을 대신 사용할 수 있습니다. 여러 키워드를 받는 속성의 경우, 흐름 기준 값과 물리적 값을 혼합하는 것은 허용되지 않습니다 (향후 명세에 따로 지정하지 않는 한).

속성은 1차원 또는 2차원일 수 있습니다. 한 차원에만 문맥적으로 제한될 때, 흐름 기준 키워드는 축약됩니다.

2.1. caption-side 속성의 논리적 값

이름:	caption-side
새 값:	inline-start \| inline-end
계산된 값:	지정한 대로

이 두 값은 left 및 right 값을 caption-side에서 지원하는 구현에만 추가됩니다. left와 right 값 자체는 줄 기준으로 정의됩니다.

기존 top 및 bottom 값은 각각 block-start 및 block-end 측면에 할당하도록 재정의됩니다.

이 속성의 매핑은 캡션의 작성 모드와 포함 블록(즉, 테이블 래퍼 박스)에 따라 결정됩니다.

2.2. float 및 clear 속성의 흐름 기준 값

이름:	float, clear
새 값:	inline-start \| inline-end
계산된 값:	지정한 대로

이 속성의 매핑은 요소의 작성 모드와 포함 블록에 따라 결정됩니다.

참고: 이 속성들은 CSS2에서 1차원이지만, 2차원으로 확장될 예정이므로, 축약하지 않은 흐름 기준 키워드가 제공됩니다.

2.3. text-align 속성의 흐름 기준 값

이름:	text-align
새 값:	start \| end
계산된 값:	지정한 대로

이 값들은 [css-text-3]에서 규범적으로 정의됩니다.

2.4. resize 속성의 흐름 기준 값

이름:	resize
새 값:	block \| inline
계산된 값:	지정한 대로

3. 흐름 기준 페이지 분류

CSS에서 모든 페이지는 사용자 에이전트에 의해 왼쪽 페이지 또는 오른쪽 페이지로 분류됩니다. [CSS21] 한 스프레드에서 어떤 페이지가 먼저 오는지는 페이지 진행 방향(왼쪽-오른쪽 또는 오른쪽-왼쪽)에 따라 달라집니다.

페이지 나누기를 스프레드의 왼쪽이나 오른쪽이 아니라 스프레드의 앞쪽 또는 뒤쪽에 제어할 수 있도록 하기 위해, 이 모듈은 page-break-after 및 page-break-before 속성에 다음 추가 키워드를 도입합니다 [CSS21]:

recto: 왼쪽-오른쪽 페이지 진행에서는 right와 같고, 오른쪽-왼쪽 페이지 진행에서는 left와 같습니다.
verso: 왼쪽-오른쪽 페이지 진행에서는 left와 같고, 오른쪽-왼쪽 페이지 진행에서는 right와 같습니다.

이 값들은 지정한 대로 계산되며, [css-break-3]에서 추가로 정의됩니다.

저자들은 일반적으로 페이지 번호를 물리적으로 배치하지만, 헤더의 내용은 스프레드에서 어떤 페이지가 앞쪽인지에 따라 관례를 따르는 경우가 많습니다. 따라서 흐름 기준 페이지 선택자도 도입되어 흐름 기준 페이지 선택을 지원합니다:

:recto: 왼쪽-오른쪽 페이지 진행에서는 ':right'와 같고, 오른쪽-왼쪽 페이지 진행에서는 ':left'와 같습니다.
:verso: 왼쪽-오른쪽 페이지 진행에서는 ':left'와 같고, 오른쪽-왼쪽 페이지 진행에서는 ':right'와 같습니다.

흐름 기준 페이지 선택자의 특이성은 ':left' 및 ':right' 페이지 선택자와 동일합니다.

4. 흐름 기준 박스 모델 속성

이 명세는 흐름 기준에 해당하는 물리적 박스 모델 속성의 새로운 CSS 속성을 도입합니다. 관련된 흐름 기준 롱핸드 속성 집합과 그에 대응하는 물리적 속성 집합은 논리적 속성 그룹을 형성합니다. 예를 들어, padding-* 속성들은 하나의 논리적 속성 그룹을 이루고, margin-* 속성들은 별도의 논리적 속성 그룹을 이룹니다. 방향 또는 축 매핑의 유형(흐름 기준 또는 물리적)을 속성의 매핑 논리라고 합니다.

참고: 각 롱핸드 속성은 최대 하나의 논리적 속성 그룹에 속합니다.

지정 값은 흐름 기준 속성의 값과 대응하는 물리적 속성의 지정 값이 서로 다르지만, 흐름 기준과 물리적 속성은 계산 값(computed value)을 공유합니다. 어떤 속성 쌍이 계산 값을 공유하는지는 요소의 writing-mode, direction, text-orientation의 계산 값에 따라 달라집니다.

참고: 각 요소의 writing mode를 사용해 모든 흐름 기준 속성을 그 물리적 대응 값으로 매핑하는 방식은 계단식 계산을 단순화하고 저자에게 명확한 모델을 제공합니다. 하지만 많은 경우에 문제가 될 수 있으니, 예를 들어 이 논의를 참고하세요. 저자는 부모와 다른 writing mode를 적용할 때 올바른 매핑을 위해 중첩 요소를 사용해야 할 수도 있습니다.

흐름 기준과 물리적 속성이 입력으로 들어가는 계산 값은 CSS 계단식(cascade)을 두 선언 모두에 적용하여 결정됩니다. 선언이 흐름 기준인지 물리적인지는 오버라이드와 무관하며, 오직 CSS 계단식의 규칙만 따릅니다 [css-cascade-3].

구현체는 CSS 선언 블록 내 선언의 상대적 순서를 유지해야 하며, 이는 이전까지 CSS 계단식에서 요구되지 않았던 사항임을 유의하세요.

예를 들어, 다음 규칙이 있다고 가정합니다:

p {
  margin-inline-start: 1px;
  margin-left: 2px;
  margin-inline-end: 3px;
}

계산된 writing-mode가 horizontal-tb이고, direction이 ltr인 경우, margin-left의 계산 값은 2px입니다. 해당 writing-mode와 direction에서는 margin-inline-start와 margin-left가 계산 값을 공유하며, margin-left의 선언이 margin-inline-start 선언 뒤에 있기 때문입니다. 반면, 계산된 direction이 rtl인 경우, margin-left의 계산 값은 3px입니다. margin-inline-end와 margin-left가 계산 값을 공유하며, margin-inline-end의 선언이 margin-left 선언 뒤에 있기 때문입니다.

[CSSOM]에서 계산 값을 반환하는 API (예: getComputedStyle()) 는 이러한 속성 쌍에 대해 동일한 값을 반환해야 합니다.

흐름 기준 속성에서 상속 순서와 매핑의 순서, 그리고 단축 속성과 논리적 속성의 상호작용에 대해 몇 가지 미해결 질문이 있습니다.

4.1. 논리적 높이와 논리적 너비: block-size 및 inline-size 속성

이름:	block-size, inline-size
값:	<‘width’>
초기값:	auto
적용 대상:	width 및 height와 동일
상속 여부:	No
백분율:	대응하는 물리적 속성과 동일
계산 값:	width, height와 동일
Canonical order:	문법에 따름
애니메이션 가능:	width, height와 동일

이 속성들은 width 및 height 속성과 대응됩니다. 매핑은 요소의 writing-mode에 따라 달라집니다.

이름:	min-block-size, min-inline-size
값:	<‘min-width’>
초기값:	0
적용 대상:	width 및 height와 동일
상속 여부:	No
백분율:	대응하는 물리적 속성과 동일
계산 값:	min-width, min-height와 동일
Canonical order:	문법에 따름
애니메이션 가능:	min-width, min-height와 동일

이 속성들은 min-width 및 min-height 속성과 대응됩니다. 매핑은 요소의 writing-mode에 따라 달라집니다.

이름:	max-block-size, max-inline-size
값:	<‘max-width’>
초기값:	none
적용 대상:	width 및 height와 동일
상속 여부:	no
백분율:	대응하는 물리적 속성과 동일
계산 값:	max-width, max-height와 동일
Canonical order:	문법에 따름
애니메이션 가능:	max-width, max-height와 동일

이 속성들은 max-width 및 max-height 속성과 대응됩니다. 매핑은 요소의 writing-mode에 따라 달라집니다.

4.2. 흐름 기준 마진: margin-block-start, margin-block-end, margin-inline-start, margin-inline-end 속성과 margin-block, margin-inline 단축 속성

이름:	margin-block-start, margin-block-end, margin-inline-start, margin-inline-end
값:	<‘margin-top’>
초기값:	0
적용 대상:	margin-top과 동일
상속 여부:	no
백분율:	대응하는 물리적 속성과 동일
계산 값:	대응하는 margin-* 속성과 동일
Canonical order:	문법에 따름
애니메이션 가능:	margin-top과 동일

이 속성들은 margin-top, margin-bottom, margin-left, margin-right 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이름:	margin-block, margin-inline
값:	<‘margin-left’>{1,2}
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 두 단축 속성은 각각 margin-block-start & margin-block-end, margin-inline-start & margin-inline-end 속성을 설정합니다. 첫 번째 값은 start 에지 스타일을, 두 번째 값은 end 에지 스타일을 나타냅니다. 값이 하나만 주어지면, start와 end 에지 모두에 적용됩니다.

4.3. 흐름 기준 오프셋: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end 속성과 inset-block, inset-inline, inset 단축 속성

이름:	inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
값:	<‘top’>
초기값:	auto
적용 대상:	포지셔닝 요소
상속 여부:	no
백분율:	대응하는 물리적 속성과 동일
계산 값:	대응하는 top/right/bottom/left 속성과 동일
Canonical order:	문법에 따름
애니메이션 가능:	top과 동일

이 속성들은 top, bottom, left, right 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이름:	inset-block, inset-inline
값:	<‘top’>{1,2}
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 두 단축 속성은 각각 inset-block-start & inset-block-end, inset-inline-start & inset-inline-end 속성을 설정합니다. 첫 번째 값은 start 에지 스타일을, 두 번째 값은 end 에지 스타일을 나타냅니다. 값이 하나만 주어지면 start와 end 에지 모두에 적용됩니다.

이름:	inset
값:	<‘top’>{1,4}
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 단축 속성은 top, right, bottom, left 속성을 설정합니다. 값은 서브 속성에 margin과 동일하게 할당됩니다.

4.4. 흐름 기준 패딩: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end 속성과 padding-block, padding-inline 단축 속성

이름:	padding-block-start, padding-block-end, padding-inline-start, padding-inline-end
값:	<‘padding-top’>
초기값:	0
적용 대상:	모든 요소
상속 여부:	no
백분율:	대응하는 물리적 속성과 동일
계산 값:	대응하는 padding-* 속성과 동일
Canonical order:	문법에 따름
애니메이션 가능:	padding-top과 동일

이 속성들은 padding-top, padding-bottom, padding-left, padding-right 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이름:	padding-block, padding-inline
값:	<‘padding-left’>{1,2}
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 두 단축 속성은 각각 padding-block-start & padding-block-end, padding-inline-start & padding-inline-end 속성을 설정합니다. 첫 번째 값은 start 에지 스타일을, 두 번째 값은 end 에지 스타일을 나타냅니다. 값이 하나만 주어지면 start와 end 에지 모두에 적용됩니다.

4.5. 흐름 기준 테두리

4.5.1. 흐름 기준 테두리 두께: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width 속성과 border-block-width, border-inline-width 단축 속성

이름:	border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
값:	<‘border-top-width’>
초기값:	medium
적용 대상:	모든 요소
상속 여부:	no
백분율:	n/a
계산 값:	대응하는 border-*-width 속성과 동일
Canonical order:	문법에 따름
애니메이션 가능:	border-top-width와 동일

이 속성들은 border-top-width, border-bottom-width, border-left-width, border-right-width 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이름:	border-block-width, border-inline-width
값:	<‘border-top-width’>{1,2}
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 두 단축 속성은 각각 border-block-start-width & border-block-end-width, border-inline-start-width & border-inline-end-width 속성을 설정합니다. 첫 번째 값은 start 에지 두께를, 두 번째 값은 end 에지 두께를 나타냅니다. 값이 하나만 주어지면 start와 end 에지 모두에 적용됩니다.

4.5.2. 흐름 기준 테두리 스타일: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style 속성과 border-block-style, border-inline-style 단축 속성

이름:	border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
값:	<‘border-top-style’>
초기값:	none
적용 대상:	모든 요소
상속 여부:	no
백분율:	n/a
계산 값:	대응하는 border-*-style 속성과 동일
Canonical order:	문법에 따름
애니메이션 가능:	border-top-style과 동일

이 속성들은 border-top-style, border-bottom-style, border-left-style, border-right-style 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이름:	border-block-style, border-inline-style
값:	<‘border-top-style’>{1,2}
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 두 단축 속성은 각각 border-block-start-style & border-block-end-style, border-inline-start-style & border-inline-end-style 속성을 설정합니다. 첫 번째 값은 start 에지 스타일을, 두 번째 값은 end 에지 스타일을 나타냅니다. 값이 하나만 주어지면 start와 end 에지 모두에 적용됩니다.

4.5.3. 흐름 기준 테두리 색상: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color 속성과 border-block-color, border-inline-color 단축 속성

이름:	border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
값:	<‘border-top-color’>
초기값:	currentcolor
적용 대상:	모든 요소
상속 여부:	no
백분율:	n/a
계산 값:	대응하는 border-*-color 속성과 동일
Canonical order:	문법에 따름
애니메이션 가능:	border-top-color와 동일

이 속성들은 border-top-color, border-bottom-color, border-left-color, border-right-color 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이름:	border-block-color, border-inline-color
값:	<‘border-top-color’>{1,2}
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 두 단축 속성은 각각 border-block-start-color & border-block-end-color, border-inline-start-color & border-inline-end-color 속성을 설정합니다. 첫 번째 값은 start 에지 스타일을, 두 번째 값은 end 에지 스타일을 나타냅니다. 값이 하나만 주어지면 start와 end 에지 모두에 적용됩니다.

4.5.4. 흐름 기준 테두리 단축 속성: border-block-start, border-block-end, border-inline-start, border-inline-end 속성과 border-block, border-inline 단축 속성

이름:	border-block-start, border-block-end, border-inline-start, border-inline-end
값:	<‘border-top-width’> \|\| <‘border-top-style’> \|\| <color>
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 속성들은 border-top, border-bottom, border-left, border-right 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

이름:	border-block, border-inline
값:	<‘border-block-start’>
초기값:	개별 속성 참조
적용 대상:	개별 속성 참조
상속 여부:	개별 속성 참조
백분율:	개별 속성 참조
계산 값:	개별 속성 참조
애니메이션 타입:	개별 속성 참조
Canonical order:	문법에 따름

이 두 단축 속성은 각각 border-block-start & border-block-end, border-inline-start & border-inline-end 속성을 설정합니다.

4.6. 흐름 기준 코너 라운딩: border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius 속성

이름:	border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
값:	<‘border-top-left-radius’>
초기값:	border-top-left-radius와 동일
적용 대상:	모든 요소
상속 여부:	no
백분율:	border-top-left-radius와 동일
계산 값:	대응하는 물리적 border-*-radius 속성과 동일
Canonical order:	문법에 따름
애니메이션 가능:	border-top-left-radius와 동일

이 속성들은 border-top-left-radius, border-bottom-left-radius, border-top-right-radius, border-bottom-right-radius 속성과 대응됩니다. 매핑은 요소의 writing-mode, direction, text-orientation에 따라 달라집니다.

4.7. 4방향 단축 속성: margin, padding, border-width, border-style, border-color 단축 속성

margin, padding, border의 단축 속성은 기본적으로 물리적 속성 값을 설정합니다. 그러나 저자가 속성값의 맨 앞에 logical 키워드를 명시하면 값이 물리적 속성이 아닌 흐름 기준 속성에 매핑됨을 나타냅니다.

이 기능에 대한 제안 문법은 논의 중이며, 여기서 설명된 내용과 거의 확실하게 달라질 예정입니다. 이 섹션은 대안 논의를 촉진하고, 해당 속성을 문서화하며, 최종적으로 선택된 문법적 전환이 해석에 미칠 영향을 명확히 하기 위해 초안에 남아 있습니다.

다음 [CSS21] 단축 속성들은 logical 키워드를 허용합니다:

이 속성의 문법은 다음과 같이

<value-type>{1,4}

대신

logical? <value-type>{1,4}

로 변경됩니다.

logical 키워드가 값에 포함된 경우, 그 뒤의 값들은 흐름 기준 롱핸드에 다음과 같이 할당됩니다:

값이 하나면 네 흐름 기준 롱핸드 모두에 적용
값이 둘이면 첫 번째는 block-start, block-end에, 두 번째는 inline-start, inline-end에 적용
값이 셋이면 첫 번째는 block-start, 두 번째는 inline-start와 inline-end, 세 번째는 block-end에 적용
값이 넷이면 block-start, inline-start, block-end, inline-end 순서대로 적용

다음 예시에서 두 규칙은 동등합니다:

blockquote {
  margin: logical 1em 2em 3em 4em;
}
blockquote {
  margin-block-start:  1em;
  margin-inline-start: 2em;
  margin-block-end:    3em;
  margin-inline-end:   4em;
}

5. 감사의 글

Cameron McCormack, David Baron, Shinyu Murakami, Tab Atkins

6. 변경 사항

이전 워킹 드래프트 이후 변경 사항:

논리적 배경 및 테두리 이미지 기능 제거. (이 아이디어들은 향후 초안에서 재논의될 수 있습니다.)
논리적 border-radius 롱핸드 추가.

이전 에디터스 드래프트와 2017년 5월 18일 첫 공개 워킹 드래프트 간의 변경 사항:

모든 속성이 부모가 아닌 요소에 지정된 writing mode로 계단식 처리되도록 변경.
margin류 단축 속성에서 롱핸드 순서를 inline-start가 inline-end 앞에 오도록 변경.
마진/테두리/패딩에 대한 *-inline 및 *-block 단축 형태 추가.
offset-* 속성을 inset-*으로 이름 변경하고, 토론 이슈 표시.
소개 섹션 추가.
CSS Writing Modes의 최신 용어로 업데이트.
기타 산문 정리.

적합성

문서 규칙

적합성 요구 사항은 설명적 주장과 RFC 2119 용어의 조합으로 표현됩니다. “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL”과 같은 키워드는 본 명세의 규범적 부분에서 RFC 2119에 정의된 대로 해석해야 합니다. 단, 가독성을 위해 이 단어들은 본 명세서에서는 모두 대문자로 쓰이지 않습니다.

명세서의 모든 텍스트는 명시적으로 비규범적, 예시, 참고로 표시된 섹션을 제외하고는 규범적입니다. [RFC2119]

본 명세의 예시는 “예를 들어”라는 말로 소개되거나 class="example"로 규범적 텍스트와 구분됩니다.

참고는 “참고”라는 말로 시작하며 class="note"로 규범적 텍스트와 구분됩니다.

권고는 강조 스타일로 규범적 섹션을 표시하며 <strong class="advisement">로 마크되어 다음과 같이 표시됩니다: UA는 반드시 접근 가능한 대안을 제공해야 합니다.

적합성 클래스

이 명세에 대한 적합성은 세 가지 적합성 클래스에 대해 정의됩니다:

스타일 시트가 본 명세에 적합하려면, 본 모듈에서 정의한 문법을 사용하는 모든 선언문이 일반 CSS 문법 및 각 기능별 문법에 따라 유효해야 합니다.

렌더러가 본 명세에 적합하려면, 스타일 시트를 적절한 명세에 따라 해석하는 것 외에도, 본 명세서에서 정의한 기능을 모두 지원하여 올바르게 구문 분석하고 문서를 적절히 렌더링해야 합니다. 단, 장치의 한계로 인해 UA가 문서를 올바르게 렌더링하지 못하는 경우에는 UA가 비적합하게 되는 것이 아닙니다. (예: UA는 흑백 모니터에서 색상을 렌더링할 필요는 없음.)

저작 도구가 본 명세에 적합하려면, 본 모듈의 일반 CSS 문법 및 각 기능별 문법에 따라 문법적으로 올바른 스타일 시트를 작성하고, 본 모듈에서 설명한 스타일 시트의 모든 다른 적합성 요구 사항도 충족해야 합니다.

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

다음 섹션들은 CSS를 책임 있게 구현하는 데 필요한 여러 적합성 요구 사항을 정의하며, 현재와 미래에 상호운용성을 촉진하도록 합니다.

부분 구현

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

불안정 및 독점 기능의 구현

향후 안정적인 CSS 기능과의 충돌을 피하기 위해, CSSWG는 모범 사례를 따라 불안정 기능 및 독점 확장을 구현할 것을 권장합니다.

CR 수준 기능의 구현

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

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

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

CSS 논리적 속성과 값 레벨 1

W3C 워킹 드래프트, 2018년 8월 27일

요약

이 문서의 상태