Việc thu gọn các phần nội dung (đôi khi được mô tả là đàn accordion) là một mẫu giao diện người dùng phổ biến. Tuy nhiên, bạn không thể tìm kiếm nội dung ẩn trong các phần đã 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 đến mảnh văn bản bên trong các 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 cho nội dung ẩn, bạn cho phép trình duyệt 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.
Các 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 chúng.
Cách sử dụng
Nếu trang web đã có những phần có thể thu gọn mà bạn muốn người dùng có thể tìm kiếm được, hãy thay thế những kiểu khiến phần đó bị ẩn 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 đồng bộ hoá với việc phần của bạn có hiển thị 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 trình duyệt hiển thị phần tử đó.
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 được hiển thị mà không cần sử dụng tính năng tìm kiếm trên trang. Không phải người dùng nào cũng sử dụng tính năng tìm kiếm trên trang và những trình duyệt không hỗ trợ hidden=until-found sẽ có trải nghiệm gốc về nội dung ẩn mà không cần tính năng tìm kiếm trên trang.
Nếu muốn đảm bảo 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à điều cần thiết để tìm kiếm nội dung trong khi video bị đóng, nhưng cũng có những tác dụng phụ sau:
- Một số API bố cục như
getBoundingClientRectsẽ báo cáo rằng nội dung ẩn bên trong phần tửhidden=until-foundchiếm không gian và có vị trí trong trang. - Các nút con của phần tử
hidden=until-foundsẽ không xuất hiện, nhưng bản thân phần tửhidden=until-foundsẽ 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 vẫn sẽ ảnh hưởng đến quá trình kết xuất.
Ví dụ về điều này, 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 vị trí nội dung ẩn sẽ xuất hiện là một hộp có đường viền màu xám, sau đó hộp này sẽ được lấp đầy bằng nội dung ẩn khi nội dung đó được tiết lộ. Đây là hộp của phần tử bị ẩ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.