Năm ngoái, chúng tôi đã xuất bản bài đăng trên blog
Giải quyết ngắt kết nối bố cục CSS và thứ tự nguồn.
Điều này đã nêu chi tiết một đề xuất sẽ được thảo luận trong
Nhóm công tác CSS nhằm giải quyết vấn đề khi việc đặt lại
các mục trong hộp linh hoạt và lưới gây ra tình trạng ngắt kết nối thẻ. Chiến lược phát hành đĩa đơn
phần đầu của bài đăng đó trình bày vấn đề mà nhóm công tác đang gặp phải
đang cố gắng giải quyết. Mọi thứ đã thay đổi kể từ đó và bài đăng này cung cấp thông tin ngắn gọn
để cập nhật vị trí hiện tại của chúng tôi. Chúng tôi cũng có một khu vực cụ thể mà chúng tôi cần
phản hồi – chúng ta xử lý các mục có display-contents
như thế nào?
Nội dung cập nhật đối với đề xuất
Hiện có
nội dung thông số kỹ thuật của bản nháp
trong thông số kỹ thuật CSS Hiển thị cấp 4.
Thao tác này sẽ giới thiệu một thuộc tính mới có tên là reading-flow
.
Thuộc tính này được thêm vào phần tử chứa cho bố cục linh hoạt hoặc bố cục lưới
(phần tử có display: grid
hoặc display: flex
).
Thuộc tính này chấp nhận các giá trị sau:
normal
: Theo thứ tự của các phần tử trong DOM, đây là hành vi.flex-visual
: Chỉ có hiệu lực đối với vùng chứa linh hoạt. Tuân theo thứ tự đọc trực quan của các mục linh hoạt, có tính đến chế độ viết.flex-flow
: Chỉ có hiệu lực đối với vùng chứa linh hoạt. Đi theo dòng chảy linh hoạt .grid-rows
: Chỉ có hiệu lực trên vùng chứa lưới. Đi theo hình ảnh thứ tự của các mục trong lưới theo hàng, có tính đến chế độ ghi.grid-columns
: Chỉ có hiệu lực trên vùng chứa lưới. Tuân theo thứ tự hình ảnh mục trong lưới theo cột, có tính đến chế độ viết.grid-order
: Chỉ có hiệu lực trên vùng chứa lưới. Xem xét thuộc tínhorder
, nhưng lại hoạt động nhưnormal
.
Ví dụ: nếu có ba mục linh hoạt trong một vùng chứa,
và đặt flex-direction
thành
row-reverse
, chúng được sắp xếp theo thứ tự từ cuối vùng chứa linh hoạt và thứ tự thẻ
di chuyển từ phải sang trái.
.flex {
display: flex;
flex-direction: row-reverse;
}
row-reverse
.Thêm flex-flow: visual
thì quy trình đọc sẽ tuân theo thứ tự hình ảnh trong
tiếng Anh, do đó từ trái sang phải.
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
reading-flow:flex-visual
.Trong bố cục lưới, hãy sử dụng reading-flow
để theo các hàng hoặc cột trực quan thay vì
so với thứ tự nguồn. Trong ví dụ sau, luồng đọc tuân theo
hàng.
.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
.Dùng thử
Thuộc tính CSS này hiện đang trong giai đoạn thử nghiệm, tuy nhiên bạn có thể bật thuộc tính này
để thử nghiệm. Để dùng thử, hãy cài đặt Chrome Dev hoặc Canary phiên bản 128 trở lên.
và bật
cờ thời gian chạy CSSReadingFlow
.
Có một số ví dụ để giúp bạn bắt đầu,
tất cả đều hoạt động trong Canary khi bật cờ.
Hành vi cho các trường hợp display: contents
vẫn đang trong quá trình hoàn thiện và có thể
dựa trên phản hồi mà bạn cung cấp sau khi đọc phần sau đây
bài đăng này.
Các phần tử có display: contents
và các thành phần web
Có một vấn đề chưa được xử lý
để nhóm công tác CSS quyết định cách giải quyết tình huống khi một trong
phần tử con của một phần tử có luồng đọc có display: contents
và
tương tự nếu mục là <slot>
.
Trong ví dụ sau, các phần tử <div>
có display: contents
. Do
điều này, tất cả phần tử <button>
đều được quảng bá để tham gia linh hoạt
bố cục và do đó reading-flow
xem xét thứ tự của chúng.
.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>
Chúng tôi muốn biết liệu bạn có ví dụ thực tế nào gây ra tình huống này hay không
thấy trong ví dụ này. Bạn có cần đặt lại các mặt hàng nằm trong
phần tử có display: contents
với các mục không phải là phần tử đồng cấp, do
là đồng cấp của mục có display: contents
.
Ngoài ra, trong quá trình nỗ lực giải quyết các vấn đề liên quan đến display: contents
,
sẽ rất hữu ích khi xem bất kỳ ví dụ nào mà bạn có thể muốn sử dụng
Thuộc tính reading-flow
bằng display: contents
. Tìm hiểu thế giới thực
các trường hợp sử dụng của bạn sẽ giúp chúng tôi thiết kế một giải pháp đáp ứng nhu cầu của bạn.
Thêm trường hợp sử dụng vào Vấn đề về nhóm công tác CSS. Nếu bạn có ví dụ trên các trang web thực tế hoặc có thể tạo bản minh hoạ trên CodePen hoặc JSFiddle sẽ cực kỳ hữu ích khi chúng ta thảo luận về vấn đề này theo nhóm. Nếu có ý tưởng về những điều mình mong muốn sẽ xảy ra, thì điều đó cũng hữu ích. Tuy nhiên, điều quan trọng nhất là thấy được trường hợp sử dụng thực tế.