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 vấn đề về bố cục CSS và thứ tự nguồn không khớp. Đây là một đề xuất chi tiết đang được thảo luận trong Nhóm công tá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 tab bị ngắt kết nối. Phần đầu của bài đăng đó trình bày vấn đề mà nhóm công tác đang cố gắng giải quyết. Mọi thứ đã thay đổi kể từ đó 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 lĩnh vực cụ thể cần bạn phản hồi – chúng tôi nên xử lý những mặt hàng có display-contents như thế nào?

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

Hiện có văn bản quy cách nháp trong quy cách CSS Display Level 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 dạng 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 các 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 trên các vùng chứa linh hoạt. Tuân theo hướng flex-flow.
• grid-rows: Chỉ có hiệu lực trên các vùng chứa lưới. Tuân theo thứ tự trực quan của các mục trong lưới theo hàng, có tính đến chế độ viết.
• grid-columns: Chỉ có hiệu lực trên các vùng chứa lưới. Tuân theo thứ tự hiển thị của các 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 các vùng chứa lưới. Tính đến thuộc tính order, nhưng nếu không thì hoạt động giống như normal.

Ví dụ: nếu bạn có 3 mục linh hoạt trong một vùng chứa và đặt flex-direction thành row-reverse, thì các mục đó sẽ xếp hàng 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;
}

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

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

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

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 Chrome 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ụ để bạn bắt đầu. Tất cả các ví dụ này đều hoạt động trong Canary khi bạn bật cờ.

Hành vi đối với các trường hợp display: contents vẫn đang trong quá trình hoàn thiệ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 để nhóm làm việc CSS quyết định cách xử lý tình huống trong đó một trong các phần tử con của một phần tử có reading-flow 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 chuyển lên để tham gia vào bố cục linh hoạt và do đó, reading-flow sẽ tính đến thứ tự của các phần tử này.

 .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 như trong ví dụ này hay không. Bạn có bao giờ cần sắp xếp lại các mục nằm trong một phần tử có display: contents với các mục không phải là anh chị em, do là anh chị em của mục có display: contents không.

Ngoài ra, trong quá trình giải quyết các vấn đề liên quan đến display: contents, sẽ rất hữu ích nếu bạn cho chúng tôi xem mọi ví dụ về trường hợp bạn có thể muốn sử dụng tài sản reading-flow với display: contents. Việc hiểu rõ các trường hợp sử dụng thực tế mà bạn có 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 các trường hợp sử dụng vào vấn đề về nhóm làm việc 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ẽ vô cùng hữu ích khi chúng ta thảo luận về vấn đề này theo nhóm. Nếu bạn có ý kiến về những điều mà bạn nghĩ là sẽ xảy ra, thì điều đó cũng 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ế.