Chúng tôi muốn nhận được ý kiến phản hồi của bạn về một giải pháp được đề xuất cho vấn đề liên quan đến phương thức bố cục sắp xếp các mục theo thứ tự bị ngắt kết nối với nguồn tài liệu.
Nhóm làm việc CSS đang nghiên cứu giải pháp cho tình huống trong đó phương pháp bố cục có thể sắp xếp các mục theo thứ tự bị ngắt kết nối với nguồn và do đó tách khỏ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à đề xuất giải pháp. 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. Tức là trình đọc màn hình sẽ đọc tài liệu ngay khi tài liệu được bố trí trong nguồn, và một người sử 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 đó. Điều này thường hợp lý và thứ tự nguồn hợp lý cho tài liệu là rất quan trọng đối với các bản trình bày nội dung, trình đọc màn hình ở chế độ đọc và bất kỳ thiết bị nào có CSS hạn chế. Tuy nhiên, CSS, flexbox và lưới cụ thể, có thể tạo các bố cục mà 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 linh hoạt sẽ làm thay đổi thứ tự bố cục nhưng không làm 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ể xáo trộn thứ tự thẻ, chẳng hạn như khi sử dụng grid-auto-flow: dense để tạo ra một 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 tình trạng 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 lệnh được nêu trong nguồn.
Giải pháp đề xuất
Nhóm hoạt động CSS đang đề xuấ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 ngẫu nhiên với 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, bạn có thể 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 linh hoạt hoặc lưới cần có thuộc tính reading-order với giá trị auto.
CSS sau đây sẽ khiến thứ tự đọc tuân theo vị trí của các mặt hàng đã được đóng gói dày đặc 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 các bố cục không được sắp xếp ngẫu nhiên bằng reading-order-items
Trong một số bố cục lưới và linh hoạt, thứ tự bố cục rất dễ hiểu. Ví dụ: trong một bố cục linh hoạt 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 sử dụng bố cục không được sắp xếp ngẫu nhiên, bạn sẽ cần thêm thuộc tính grid-order-items vào vùng chứa, cùng với giá trị từ khoá giải thích ý định sắp xếp thứ tự bố cục.
Ví dụ sau đây cho thấy một bố cục linh hoạt sử dụng row-reverse. Các mục linh hoạt có reading-order: auto và vùng chứa linh hoạt reading-order-items: flex flow để cho biết chúng ta cũng muốn thứ tự đọc tuân theo hướng flex-flow, thay vì tuân theo thứ tự hình ảnh (chúng ta có thể chỉ ra 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 này, một bố cục lưới được tạo bằng cách sử dụng grid-template-areas và các mục được sắp xếp 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 tải từng hàng trước khi chuyển sang hàng tiếp theo. (grid column sẽ chỉ ra 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?
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 các trường hợp cụ thể khi 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ư khi đóng gói lưới dày đặc hoặc khi thứ tự bố cục khác hợp lý 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 tài liệu nguồn theo thứ tự phù hợp nếu trang được hiển thị mà không có CSS. Chỉ thêm các thuộc tính này vào các vị trí và tại các điểm ngắt cần đến chúng.
Các công cụ ghi nhận quyền tác giả có nên áp dụng các thuộc tính này không?
Công cụ soạn thảo 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 sẽ 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 từng phần để xử lý tình trạng 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 được thu thập ý kiến phản hồi 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 cách này không giải quyết được vấn đề hoặc lo ngại về khả năng hỗ trợ tiếp cận với phương pháp này, vui lòng thông báo cho Nhóm hoạt động của CSS.
Có một chuỗi bài đăng đang diễn ra, trong đó trình bày nhiều trường hợp sử dụng và ý tưởng về phương pháp trên. Chuỗi thư đó là nơi tuyệt vời để thêm bất kỳ nhận xét nào và nêu bật các vấn đề tiềm ẩn với đề xuất này. Xin lưu ý rằng đề xuất hiện tại rất khác so với đề xuất ban đầu của tôi đã bắt đầu chuỗi tin nhắn. Những người quan tâm có thể sẽ thích toàn bộ cuộc trò chuyện mà chúng ta có được hôm nay, vì đó là một ví dụ điển hình về cách hoạt động của đề xuất thông qua Nhóm hoạt động CSS để trở thành thứ có thể triển khai được trong trình duyệt.
Hình thu nhỏ của Patrick Tomasso. Cảm ơn Chris Harrelson, Tab Atkins và Ian Kilpatrick đã chia sẻ ý kiến phản hồi và đánh giá.