작년에 Google은 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 Dev 또는 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 속성을 사용하고 싶은 예시를 알려주시면 도움이 됩니다. 실제 사용 사례를 이해하면 필요에 맞는 솔루션을 설계하는 데 도움이 됩니다.
CSS 작업 그룹 문제에 사용 사례를 추가합니다. 라이브 사이트의 예가 있거나 CodePen 또는 JSFiddle에서 데모를 만들 수 있다면 그룹으로 이 문제를 논의할 때 매우 유용합니다. 예상되는 결과에 대한 의견이 있다면 알려주세요. 하지만 가장 중요한 것은 실제 사용 사례를 확인하는 것입니다.