Yêu cầu nhà phát triển phản hồi về quy trình đọc và các phần tử có màn hình: nội dung

Rachel Andrew

Năm ngoái, chúng tôi đã xuất bản bài đăng trên blog Giải quyết sự cố ngắt kết nối giữa bố cục CSS và thứ tự nguồn. Bài viết này trình bày chi tiết về một đề xuất đang được thảo luận trong Nhóm làm việc CSS, nhằm giải quyết vấn đề khi sắp xếp lại các mục trong flexbox và lưới gây ra trải nghiệm nhấn phím không kết nối. Phần đầu của bài đăng đó nêu ra vấn đề mà nhóm làm việc đang cố gắng giải quyết. Kể từ đó, mọi thứ đã thay đổi và bài đăng này sẽ cung cấp thông tin cập nhật ngắn gọn về tình hình hiện tại. Chúng tôi cũng có một khía cạnh cụ thể mà chúng tôi cần ý kiến phản hồi của bạn – chúng ta xử lý các mục có display-contents như thế nào?

Nội dung cập nhật về đề xuất

Hiện có văn bản quy cách nháp trong quy cách CSS Display 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 flex hoặ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: Tuân theo thứ tự của các phần tử trong DOM, đây là hành vi hiện tại.
• flex-visual: Chỉ có hiệu lực trên vùng chứa flex. Tuân theo thứ tự đọc trực quan của các mục flex, có tính đến chế độ ghi.
• flex-flow: Chỉ có hiệu lực trên vùng chứa flex. Tuân theo hướng luồng flex.
• grid-rows: Chỉ có hiệu lực trên vùng chứa lưới. Tuân theo thứ tự hình ảnh của các mục 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 của các mục lưới theo cột, có tính đến chế độ ghi.
• grid-order: Chỉ có hiệu lực trên vùng chứa lưới. Tính đến thuộc tính order, nhưng hoạt động như normal.

Ví dụ: nếu bạn có 3 mục flex trong một vùng chứa và đặt flex-direction thành row-reverse, thì các mục này sẽ xếp hàng từ cuối vùng chứa flex và thứ tự thẻ sẽ di chuyển từ phải sang trái.

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

Luồng mặc định của các mục flex với row-reverse.

Thêm flex-flow: visual, sau đó luồng đọc sẽ tuân theo thứ tự hình ảnh bằng tiếng Anh, tức là từ trái sang phải.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

Có reading-flow:flex-visual.

Trong bố cục lưới, hãy sử dụng reading-flow để tuân theo các hàng hoặc cột trực quan thay vì thứ tự nguồn. Trong ví dụ sau, luồng đọc tuân theo các 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; }

Có reading-flow: grid-rows.

Lưu ý: Để biết thêm ví dụ và thông tin, hãy xem bài nói chuyện của tôi tại Ngày CSS – Bố cục và thứ tự đọc. Video này được ghi lại vào tháng 5, khi tên thuộc tính là reading-order-items thay vì reading-flow. Tuy nhiên, ngoài việc đặt tên, tất cả các ví dụ đều chính xác.

Dùng thử

Thuộc tính CSS này hiện đang ở giai đoạn thử nghiệm, tuy nhiên, bạn có thể bật thuộc tính này để kiểm thử. Để 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. Dưới đây là một số ví dụ để bạn bắt đầu, tất cả đều hoạt động trong Canary khi bật cờ.

Hành vi đối với các trường hợp display: contents vẫn đang trong quá trình phát triển và có thể thay đổi dựa trên ý kiến phản hồi mà bạn cung cấp sau khi đọc phần sau của bài đăng này.

Các phần tử có display: contents và thành phần web

Có một vấn đề chưa được giải quyết mà nhóm làm việc CSS cần quyết định cách xử lý trường hợp một trong các thành phần 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 đó, tất cả các phần tử <button> đều được quảng bá để tham gia vào bố cục flex, do đó reading-flow sẽ tính đến thứ tự của các phần tử đó.

 .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 dẫn đến tình huống trong ví dụ này không. Bạn có bao giờ cần sắp xếp lại các mục bên trong một phần tử có display: contents với các mục không phải là mục đồng cấp, do là mục đồng cấp của mục có display: contents không.

Ngoài ra, khi chúng tôi nỗ lực giải quyết các vấn đề liên quan đến display: contents, bạn nên xem các ví dụ về trường hợp bạn có thể muốn sử dụng thuộc tính reading-flow với display: contents. Việc hiểu rõ các trường hợp sử dụng thực tế 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 đề của nhóm làm việc về CSS. Nếu bạn có ví dụ trên các trang web đang hoạt động hoặc có thể tạo bản minh hoạ trên CodePen hoặc JSFiddle, thì điều đó sẽ rất hữu ích khi chúng ta thảo luận về vấn đề này với nhau. Nếu bạn có suy nghĩ về những điều bạn muốn xảy ra, thì điều đó cũng rất hữu ích. Tuy nhiên, điều quan trọng nhất là xem các trường hợp sử dụng thực tế.