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 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ính order, 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;
}
Quy trình mặc định của các mục linh hoạt với 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;
}
Khi có 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; }
Khi có 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ế.