작년에 CSS 레이아웃 및 소스 순서 연결 해제 해결 블로그 게시물을 게시했습니다.
이 문서에서는 CSS 작업 그룹에서 논의 중인 제안서를 자세히 설명했습니다. 이 제안서는 flexbox 및 그리드에서 항목의 순서를 변경하면 연결 해제된 탭 경험이 발생하는 문제를 해결하는 것을 목표로 합니다. 이 게시물의 시작 섹션에서는 실무 그룹이 해결하려는 문제를 간략히 설명합니다. 그 이후로 상황이 진행되었으며 이 게시물에서는 현재 진행 상황을 간단히 업데이트해 드립니다. 또한 의견이 필요한 구체적인 영역이 있습니다. display-contents가 있는 항목은 어떻게 처리하나요?
제안서 업데이트
이제 CSS 디스플레이 수준 4 사양에 초안 사양 텍스트가 있습니다.
이렇게 하면 reading-flow라는 새 속성이 도입됩니다.
이 속성은 플렉스 또는 그리드 레이아웃의 포함 요소(display: grid 또는 display: flex가 있는 요소)에 추가됩니다.
이 속성은 다음 값을 허용합니다.
normal: DOM의 요소 순서를 따릅니다. 이는 현재 동작입니다.flex-visual: 플렉스 컨테이너에만 적용됩니다. 가변 항목의 시각적 읽기 순서를 따라 쓰기 모드를 고려합니다.flex-flow: 플렉스 컨테이너에만 적용됩니다. flex-flow 방향을 따릅니다.grid-rows: 그리드 컨테이너에만 적용됩니다. 쓰기 모드를 고려하여 행별 그리드 항목의 시각적 순서를 따릅니다.grid-columns: 그리드 컨테이너에만 적용됩니다. 쓰기 모드를 고려하여 열별 그리드 항목의 시각적 순서를 따릅니다.grid-order: 그리드 컨테이너에만 적용됩니다.order속성을 고려하지만 그 외에는normal처럼 작동합니다.
예를 들어 컨테이너에 Flex 항목이 3개 있고 flex-direction를 row-reverse로 설정하면 Flex 컨테이너의 끝에서부터 정렬되고 탭 순서가 오른쪽에서 왼쪽으로 이동합니다.
.flex {
display: flex;
flex-direction: row-reverse;
}
row-reverse를 사용한 플렉스 항목의 기본 흐름입니다.flex-flow: visual를 추가하면 읽기 흐름이 영어의 시각적 순서를 따르므로 왼쪽에서 오른쪽으로 진행됩니다.
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
reading-flow:flex-visual 사용그리드 레이아웃에서는 reading-flow를 사용하여 소스 순서가 아닌 시각적 행 또는 열을 따릅니다. 다음 예에서는 읽기 흐름이 행을 따릅니다.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-areas: "d b b"
"c c a";
reading-flow: grid-rows;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
reading-flow: grid-rows를 사용합니다.사용해 보기
이 CSS 속성은 현재 실험용이지만 테스트를 위해 사용 설정할 수 있습니다. 사용해 보려면 Chrome 개발자 또는 Canary 버전 128 이상을 설치하고 런타임 플래그 CSSReadingFlow를 사용 설정하세요.
시작하는 데 도움이 되는 몇 가지 예시가 있으며, 모두 플래그가 사용 설정된 Canary에서 작동합니다.
display: contents 케이스의 동작은 아직 진행 중이며 이 게시물의 다음 섹션을 읽은 후 제공해 주신 의견에 따라 변경될 수 있습니다.
display: contents 및 웹 구성요소가 있는 요소
CSS 작업 그룹에서 reading-flow가 있는 요소의 하위 요소 중 하나에 display: contents가 있는 상황과 마찬가지로 항목이 <slot>인 경우 어떻게 처리할지 결정해야 하는 미해결 문제가 있습니다.
다음 예에서 <div> 요소에는 display: contents가 있습니다. 이 때문에 모든 <button> 요소가 가변형 레이아웃에 참여하도록 승격되므로 reading-flow가 순서를 고려합니다.
.wrapper {
display: flex;
reading-flow: flex-visual;
}
<div class="wrapper">
<div style="display: contents" id="contents1">
<button style="order: 3" id="o3">3</button>
<button style="order: 1" id="o1">1</button>
<div style="display: contents" id=contents2>
<button style="order: 4" id="o4">4</button>
<button style="order: 2" id=o2>2</button>
</div>
</div>
</div>
이 예시에 나온 상황의 원인이 된 실제 사례가 있는지 알고 싶습니다. display: contents가 있는 항목의 형제 항목이므로 display: contents가 있는 요소 내의 항목을 형제가 아닌 항목으로 재정렬해야 하는 경우가 있나요?
또한 display: contents 관련 문제를 해결하기 위해 노력하는 과정에서 display: contents와 함께 reading-flow 속성을 사용하고 싶은 예시를 확인하면 도움이 됩니다. Google에서는 고객의 실제 사용 사례를 이해하여 고객의 요구사항을 충족하는 솔루션을 설계합니다.
CSS 작업 그룹 문제에 사용 사례를 추가합니다. 실시간 사이트에 예시가 있거나 CodePen 또는 JSFiddle에서 데모를 만들 수 있다면 이 문제를 그룹으로 논의할 때 매우 유용할 것입니다. 예상되는 상황에 대한 생각이 있는 경우에도 유용합니다. 그러나 가장 중요한 것은 실제 사용 사례를 보는 것입니다.