읽기 흐름 및 디스플레이: 콘텐츠 요소에 관한 개발자 의견 요청

Rachel Andrew

작년에 Google은 CSS 레이아웃 해결 및 소스 순서 연결 해제. 이 페이지에서는 재주문하는 제품 또는 서비스를 재주문하는 것과 관련된 문제를 해결하기 위해 Flexbox 및 그리드의 항목으로 인해 탭 연결이 끊어집니다. 이 해당 게시물의 시작 섹션에서는 실무 그룹이 실제로 직면하는 문제를 해결할 수 있습니다. 그 이후로 상황이 바뀌었으며 이 게시물에서는 우리가 지금 우리가 사는 곳이 업데이트되었죠. 또한 의견: display-contents이 있는 항목은 어떻게 처리해야 할까요?

제안서 업데이트

이제 사양 초안 텍스트 를 참조하세요. 그러면 reading-flow이라는 새 속성이 도입됩니다. 이 속성은 플렉스 또는 그리드 레이아웃을 위해 포함하는 요소에 추가됩니다. (display: grid 또는 display: flex가 있는 요소)

속성에는 다음 값이 허용됩니다.

• normal: DOM의 요소 순서를 따릅니다. 즉, 현재 있습니다.
• flex-visual: Flex 컨테이너에만 적용됩니다. 다음을 따릅니다. 쓰기 모드를 고려하여 가변 항목의 시각적 읽기 순서입니다.
• flex-flow: Flex 컨테이너에만 적용됩니다. Flex 흐름을 따릅니다. 방향을 설정할 수 있습니다.
• grid-rows: 그리드 컨테이너에만 적용됩니다. 시각 요소를 따릅니다 쓰기 모드를 고려하여 행별 그리드 항목의 순서를 나타냅니다.
• grid-columns: 그리드 컨테이너에만 적용됩니다. 시각적 순서를 따름 열별로 그리드 항목을 정렬하고, 쓰기 모드를 고려합니다.
• grid-order: 그리드 컨테이너에만 적용됩니다. order 속성을 고려합니다. 그렇지 않으면 normal처럼 작동합니다.

예를 들어 컨테이너에 3개의 가변 항목이 있는 경우 flex-direction를 다음과 같이 설정합니다. row-reverse: 가변형 컨테이너와 탭 순서의 끝에서부터 정렬됩니다. 이동한다는 것입니다.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

flex-flow: visual를 추가하면 읽기 흐름이 다음의 시각적 순서를 따릅니다. 영어, 따라서 왼쪽에서 오른쪽으로.

.flex {
  display: flex;
  flex-direction: row-reverse;
  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; }

사용해 보기

이 CSS 속성은 현재 실험용이지만 사용 설정할 수 있습니다. 사용할 수 있습니다 사용해 보려면 Chrome 개발자 또는 Canary 버전 128 이상을 설치하세요. 그런 다음 런타임 플래그 CSSReadingFlow. 시작하는 데 도움이 되는 몇 가지 예를 참고하세요. 모두 플래그가 사용 설정된 카나리아에서 작동합니다

display: contents 케이스의 동작은 아직 진행 중인 작업이며 사용자의 의견에 따라 Google 뉴스 이니셔티브의 다음 섹션을 확인하세요.

display: contents 및 웹 구성요소가 있는 요소

미해결 문제가 있음 제3자 소재 중 하나가 부정적인 영향을 받는 상황에 대처하는 방법을 read-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 관련 문제를 해결하기 위해 노력하고 있습니다. 이 API를 사용해야 할 수 있는 모든 사례를 살펴보면 display: contents가 있는 reading-flow 속성 실제 세상의 이해 사용 사례가 있으면 Google에서 니즈에 맞는 솔루션을 설계하는 데 도움이 됩니다.

사용 사례를 CSS 작업 그룹 문제 라이브 사이트에 예시가 있거나 CodePen 또는 이 문제를 논의할 때 매우 유용한 JSFiddle 할 수 있습니다. 어떤 일이 일어날지 예상하고 있다면 그것도 유용합니다 그러나 실제 사용 사례를 보는 것이 가장 중요합니다