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 thông số kỹ thuật 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 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 đố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 flex, có tính đến chế độ ghi.
• flex-flow: Chỉ có hiệu lực trên vùng chứa flex. Đi theo hướng flex-flow.
• 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;
}

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;
}

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; }

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 để 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 đố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 đề nổi bật để nhóm công tác CSS quyết định cách xử lý trong đó một trong các phần tử con của 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.

Ngoài ra, trong quá trình 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 bất kỳ ví dụ nào về trường hợp bạn nê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 này 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ế.