Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về một giải pháp đề xuất cho vấn đề về các phương thức bố cục sắp xếp các mục theo thứ tự không liên quan đến nguồn của tài liệu.
Nhóm công tác CSS đang tìm cách giải quyết tình huống trong đó một phương thức bố cục có thể sắp xếp các mục theo thứ tự không liên quan đến nguồn, và do đó không liên quan đến thứ tự đọc và thứ tự 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 được đề 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 một 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 bố cục trong nguồn và người dùng sử dụng bàn phím để di chuyển bằng phím Tab trong tài liệu cũng sẽ tuân theo thứ tự nguồn đó. Thông thường, điều này có ý nghĩa và thứ tự nguồn hợp lý cho tài liệu là rất quan trọng đối với việc trình bày nội dung ở chế độ đọc, trình đọc màn hình và mọi thiết bị có CSS 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 trực quan 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ẽ 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 dạng lưới, phương thức bố cục đã chọn có thể làm xáo trộn thứ tự thẻ, chẳng hạn như 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ự khác biệt 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 công tác 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 bố cục ngẫu nhiên với reading-order: auto
Trong những trường hợp tạo ra 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 linh hoạt hoặc mụ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 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;
}
Các bố cục không ngẫu nhiên sau đây với reading-order-items
Trong một số bố cục lưới và bố cục linh hoạt, bạn có thể dễ dàng hiểu được thứ tự bố cục. 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, sẽ có một thứ tự bố cục rõ ràng do thuộc tính order quy định. Trong các bố cục khác, thứ tự bố cục lý tưởng sẽ ít rõ ràng hơn, có thể có nhiều lựa chọn. Do đó, khi làm theo bố cục không ngẫu nhiên, bạn sẽ 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 về thứ tự bố cục.
Ví dụ sau đây minh hoạ 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 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ỉ 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 dạng lưới được tạo bằng grid-template-areas và các mục được đặt theo một thứ tự bố cục khác so với thứ tự nguồn. Thuộc tính reading-order-items được dùng để cho biết chúng ta nên tuân theo thứ tự bố cục, duyệt 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?
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 tình trạng ngắt kết nối này, chẳng hạn như đóng gói lưới dày đặc, hoặc khi một thứ tự bố cục khác có ý nghĩa 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 bằng cách sử dụng một thứ tự hợp lý nếu trang được kết xuất mà không có CSS. Chỉ thêm các thuộc tính này ở những nơi và tại những điểm ngắt cần đến chúng.
Các công cụ tạo nội dung có nên áp dụng những thuộc tính này không?
Các công cụ soạn thảo cho phép mọi người tạo bố cục dạng 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 một 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 để giải quyết vấn đề 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 về vấn đề này. Cụ thể, nếu bạn có 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ó lo ngại về khả năng hỗ trợ tiếp cận đối với phương pháp này, vui lòng cho Nhóm công tác CSS biết.
Có một chuỗi thảo luận đang diễn ra, trong đó có nhiều trường hợp sử dụng và ý kiến về phương pháp này. Luồng thảo luận đó là nơi lý tưởng để bạn thêm mọi nhận xét và nêu bật các vấn đề tiềm ẩn đối với đề xuất này. Xin lưu ý rằng đề xuất hiện tại khác biệt rất nhiều so với đề xuất ban đầu của tôi khi bắt đầu chuỗi thảo luận này. Những người quan tâm có thể thích tất cả cuộc trò chuyện dẫn đến tình trạng 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 công tác CSS để trở thành thứ 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à đánh giá.