작년에 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;
}
row-reverse
를 사용한 Flex 항목의 기본 흐름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
.
시작하는 데 도움이 되는 몇 가지 예를 참고하세요.
모두 플래그가 사용 설정된 카나리아에서 작동합니다
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 할 수 있습니다. 어떤 일이 일어날지 예상하고 있다면 그것도 유용합니다 그러나 실제 사용 사례를 보는 것이 가장 중요합니다