Chúng tôi mong muốn bạn phản hồi về giải pháp được đề xuất cho vấn đề về phương thức bố cục sắp xếp các mục theo thứ tự không được kết nối với nguồn của tài liệu.
Nhóm làm việc CSS đang tìm giải pháp cho trường hợp phương thức bố cục có thể sắp xếp các mục theo thứ tự không liên kết với nguồn, do đó không liên kết với thứ tự đọc và tiêu điểm của tài liệu. Bài viết này giải thích vấn đề và giải pháp đề xuất. Chúng tôi rất mong nhận được ý kiến phản hồi của bạn.
Vấn đề
Thứ tự đọc của tài liệu HTML tuân theo thứ tự nguồn. Điều này có nghĩa là trình đọc màn hình sẽ đọc tài liệu theo cách trình bày trong nguồn và người dùng bàn phím để di chuyển xung quanh tài liệu cũng sẽ tuân theo thứ tự nguồn đó. Thông thường, điều này là hợp lý và thứ tự nguồn hợp lý cho tài liệu là yếu tố quan trọng để trình bày nội dung ở chế độ đọc, trình đọc màn hình và mọi thiết bị có CSS bị hạn chế. Tuy nhiên, CSS, đặc biệt là flexbox và lưới, có thể tạo bố cục trong đó bố cục xác định thứ tự đọc hình ảnh khác với nguồn cơ bản.
Ví dụ: việc sử dụng thuộc tính order trên các mục flex sẽ thay đổi thứ tự bố cục nhưng không thay đổi thứ tự trong nguồn.
Khi sử dụng bố cục lưới, phương thức bố cục đã chọn có thể làm lộn xộn thứ tự thẻ, ví dụ: khi sử dụng grid-auto-flow: dense, phương thức này sẽ tạo thứ tự bố cục ngẫu nhiên của các mục.
Nhà phát triển cũng có thể gây ra sự ngắt kết nối này bằng cách đặt các mục trên lưới theo thứ tự khác với thứ tự được chỉ định trong nguồn.
Giải pháp đề xuất
Nhóm làm việc về CSS đang đề xuất một giải pháp cho vấn đề này và rất mong nhận được ý kiến phản hồi của các nhà phát triển và cộng đồng hỗ trợ tiếp cận về phương pháp này.
Theo dõi bố cục được sắp xếp ngẫu nhiên bằng reading-order: auto
Trong các trường hợp tạo thứ tự bố cục ngẫu nhiên, chẳng hạn như khi sử dụng tính năng đóng gói dày đặc trong bố cục lưới, có thể bạn muốn trình duyệt tuân theo bố cục thay vì thứ tự nguồn. Để điều này xảy ra, các mục flex hoặc lưới cần có thuộc tính reading-order, với giá trị là auto.
CSS sau đây sẽ khiến thứ tự đọc tuân theo vị trí của các mục đã được đóng gói chặt chẽ do grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Theo dõi bố cục không được tạo ngẫu nhiên bằng reading-order-items
Trong một số bố cục lưới và bố cục flex, thứ tự bố cục rất dễ hiểu. Ví dụ: trong bố cục flex sử dụng thuộc tính order để sắp xếp lại các mục, có một thứ tự bố cục rõ ràng do thuộc tính order chỉ định. Trong các bố cục khác, thứ tự bố cục lý tưởng không rõ ràng, có thể có nhiều lựa chọn. Do đó, khi theo các bố cục không ngẫu nhiên, bạn cần thêm thuộc tính grid-order-items vào vùng chứa, với các giá trị từ khoá giải thích ý định của bạn đối với thứ tự bố cục.
Ví dụ sau đây cho thấy một bố cục flex sử dụng row-reverse. Các mục flex có reading-order: auto và vùng chứa flex reading-order-items: flex flow để cho biết rằng chúng ta cũng muốn thứ tự đọc tuân theo hướng flex-flow, thay vì tuân theo thứ tự trực quan (mà chúng ta có thể chỉ báo bằng flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
Trong ví dụ tiếp theo, một bố cục lưới được tạo bằng grid-template-areas và các mục được đặt theo thứ tự bố cục khác với thứ tự nguồn. Thuộc tính reading-order-items dùng để cho biết chúng ta nên tuân theo thứ tự bố cục, truyền qua từng hàng trước khi chuyển sang hàng tiếp theo. (grid column sẽ cho biết hướng ngược lại).
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
Điều này có nghĩa là thứ tự nguồn không quan trọng phải không?
Không, thứ tự nguồn vẫn quan trọng. Bạn chỉ nên sử dụng chức năng này trong những trường hợp cụ thể mà thứ tự đọc có thể khác với nguồn. Ví dụ: khi sử dụng các phương thức bố cục có thể gây ra sự ngắt kết nối này, chẳng hạn như đóng gói lưới dày đặc hoặc khi thứ tự bố cục khác phù hợp hơn tại một điểm ngắt nhất định.
Khi sử dụng các thuộc tính này, hãy tạo một tài liệu nguồn theo thứ tự hợp lý nếu trang được hiển thị mà không có CSS. Chỉ thêm các thuộc tính này ở những vị trí và điểm ngắt yêu cầu các thuộc tính đó.
Các công cụ tác giả có nên áp dụng các thuộc tính này không?
Các công cụ tạo nội dung cho phép mọi người tạo bố cục lưới bằng cách kéo và thả các phần tử, vẫn nên khuyến khích mọi người tạo tài liệu nguồn hợp lý. Do đó, trong hầu hết các trường hợp, bạn nên sắp xếp lại nguồn dựa trên thứ tự bố cục, thay vì sử dụng các thuộc tính này như một cách lười biếng để xử lý việc ngắt kết nối.
Vui lòng chia sẻ ý kiến phản hồi của bạn về đề xuất này
Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về vấn đề này. Cụ thể, nếu bạn có một trường hợp sử dụng mà bạn cảm thấy phương pháp này không giải quyết được hoặc có mối lo ngại về khả năng hỗ trợ tiếp cận với phương pháp này, vui lòng cho Nhóm làm việc về CSS biết.
Có một luồng đang diễn ra, trong đó nêu nhiều trường hợp sử dụng và ý kiến về phương pháp này. Bạn nên thêm bất kỳ nhận xét nào vào chuỗi đó, đồng thời nêu bật các vấn đề có thể xảy ra với đề xuất này. Xin lưu ý rằng đề xuất hiện tại rất khác với đề xuất ban đầu của tôi đã bắt đầu chuỗi thư này. Những người quan tâm có thể sẽ thích tất cả các cuộc trò chuyện đã dẫn đến kết quả như hiện tại, vì đây là một ví dụ điển hình về cách các đề xuất được xử lý trong Nhóm làm việc CSS để trở thành một đề xuất có thể được triển khai trong trình duyệt.
Hình thu nhỏ của Patrick Tomasso. Cảm ơn Chris Harrelson, Tab Atkins và Ian Kilpatrick đã phản hồi và xem xét.