Giúp người dùng dễ dàng truy cập vào nội dung thu gọn bằng cách sử dụng hidden=until-found

[Tên người]
Joey Arhar
Twitter GitHub

Việc thu gọn các phần nội dung, đôi khi được mô tả là hệ thống phong cầm, là một mẫu giao diện người dùng phổ biến. Tuy nhiên, người dùng không thể tìm kiếm nội dung ẩn trong các phần được thu gọn bằng tính năng tìm kiếm trong trang. Ngoài ra, bạn không thể liên kết với các mảnh văn bản trong vùng thu gọn.

Thuộc tính HTML hidden=until-found và sự kiện beforematch có thể giải quyết những vấn đề này. Bằng cách thêm hidden=until-found vào vùng chứa nội dung bị ẩn, bạn giúp trình duyệt có thể tìm kiếm văn bản trong vùng ẩn đó và hiển thị phần đó nếu tìm thấy kết quả trùng khớp.

Những tính năng này có trong Chrome 102, vì vậy, hãy cùng tìm hiểu cách hoạt động của các tính năng này.

Cách sử dụng

Nếu trang web của bạn đã có sẵn các mục có thể thu gọn mà bạn muốn mọi người có thể tìm kiếm, hãy thay thế các kiểu ẩn mục đó bằng thuộc tính hidden=until-found. Nếu trang của bạn cũng có một trạng thái khác cần được duy trì đồng bộ với việc phần của bạn có được tiết lộ hay không, hãy thêm trình nghe sự kiện beforematch sẽ được kích hoạt trên phần tử hidden=until-found ngay trước khi phần tử đó được trình duyệt tiết lộ.

Chú ý

Để mang lại trải nghiệm nhất quán cho người dùng, nội dung hidden=until-found phải dễ thấy mà không cần sử dụng chức năng tìm trong trang. Không phải người dùng nào cũng sử dụng tính năng tìm trong trang. Các trình duyệt không hỗ trợ hidden=until-found sẽ có trải nghiệm nội dung ẩn ban đầu mà không cần hiện tính năng tìm trong trang.

Nếu muốn đảm bảo rằng nội dung ẩn của mình có thể tìm kiếm được trên các trình duyệt không hỗ trợ hidden=until-found, bạn luôn có thể mở rộng nội dung ẩn trong các trình duyệt đó. Bạn có thể phát hiện tính năng bằng cách kiểm tra sự hiện diện của trình xử lý sự kiện beforematch:

if (!(‘onbeforematch' in document.body)) {
  // expand all hidden content
}

hidden=until-found áp dụng thuộc tính CSS content-visibility:hidden thay vì thuộc tính display:none mà thuộc tính ẩn thông thường áp dụng. Đây là tính năng cần thiết để tìm kiếm nội dung khi nội dung đã đóng, nhưng cũng có những tác dụng phụ sau đây:

  • Một số API bố cục như getBoundingClientRect sẽ báo cáo rằng nội dung ẩn bên trong phần tử hidden=until-found chiếm dung lượng và có vị trí trên trang.
  • Các nút con của phần tử hidden=until-found sẽ không được hiển thị nhưng bản thân phần tử hidden=until-found đó sẽ vẫn có một hộp. Điều này có nghĩa là các thuộc tính CSS như đường viền và kích thước rõ ràng sẽ vẫn ảnh hưởng đến việc hiển thị.

Ví dụ, bản minh hoạ sau đây sẽ thêm lề, đường viền và khoảng đệm vào phần tử đã áp dụng hidden=until-found. Tại nơi nội dung ẩn sẽ xuất hiện là một ô có đường viền màu xám, sau đó sẽ điền nội dung bị ẩn khi được hiển thị. Đây là hộp của phần tử ẩn.

Để tránh vấn đề này, hãy thêm đường viền vào một phần tử lồng trong vùng chứa có hidden=until-found.

Hình ảnh chính của Thomas Bormans.