# Giới Thiệu Trong thế giới phát triển web, việc quản lý nội dung ẩn là một thách thức lớn. Một trong những thuộc tính HTML mới giúp giải quyết vấn đề này là `hidden='until-found'`. Giá trị này được hỗ trợ bởi Chrome và Firefox, và đang được tích hợp vào Safari. Trong bài viết này, chúng ta sẽ tìm hiểu sâu về cách sử dụng thuộc tính này, những lợi ích của nó và cách triển khai trong thực tế. ## Đặc Điểm của Thuộc Tính `hidden` Thuộc tính `hidden` trong HTML cho phép lập trình viên ẩn nội dung của một phần tử. Khi một phần tử có thuộc tính này, trình duyệt sẽ hiểu rằng nội dung bên trong không liên quan và không cần hiển thị cho người dùng. Thông thường, trình duyệt sẽ áp dụng kiểu CSS `display: none`, khiến phần tử hoàn toàn bị ẩn. Tuy nhiên, với giá trị `hidden='until-found'`, trình duyệt nhận biết rằng nội dung bên trong có thể liên quan, nhưng không cần hiển thị ngay lập tức. Điều này cho phép trình duyệt sử dụng thuộc tính CSS `content-visibility: hidden`, ẩn nội dung nhưng vẫn giữ cho nó có thể được tìm kiếm. ### Ví Dụ Cụ Thể ```html ``` ## Lợi Ích Của `hidden='until-found'` ### 1. Tối Ưu Hóa Thời Gian Tải Trang Việc sử dụng `hidden='until-found'` giúp cải thiện thời gian tải trang ban đầu bằng cách trì hoãn việc hiển thị nội dung trong khi vẫn duy trì trải nghiệm tìm kiếm mượt mà cho người dùng. Điều này đặc biệt hữu ích cho các nội dung có thể được bật ra khi người dùng tìm kiếm. ### 2. Cải Thiện Trải Nghiệm Người Dùng Nội dung ẩn có thể nâng cao trải nghiệm người dùng bằng cách giảm bớt sự rối mắt trên trang. Thay vì phải cuộn qua một trang dài, người dùng có thể tìm kiếm nội dung mà họ cần một cách hiệu quả hơn. ### 3. Tính Khả Dụng cho Người Dùng Có Khuyết Tật Một trong những lý do chính để sử dụng `hidden='until-found'` là khả năng tiếp cận. Nội dung ẩn theo cách truyền thống thường không thể tìm thấy được, gây khó khăn cho người dùng khi sử dụng công cụ đọc màn hình hoặc chức năng tìm kiếm của trình duyệt. ## Cách Triển Khai `hidden='until-found'` ### Ví Dụ về Thành Phần Tương Tác Hãy xem xét một ví dụ thành phần tab sử dụng `hidden='until-found'`. Khi nội dung được tìm thấy, nó sẽ hiển thị và cuộn vào khung nhìn của người dùng. Điều này cho phép nội dung trở nên có thể tìm kiếm và liên kết đến. ### Mã Ví Dụ ```html

``` ### Ghi Chú Cho Lập Trình Viên Khi sử dụng `hidden='until-found'`, bạn cần chú ý đến sự khác biệt với thuộc tính `hidden` thông thường. Các kiểu cấp khối như border hoặc padding sẽ không hiển thị với `hidden`, nhưng sẽ hiển thị khi sử dụng `hidden='until-found'`. Điều này cần được lưu ý khi làm việc với mã nguồn hiện có. ## Các Thực Hành Tốt Nhất - **Sử Dụng Các Thành Phần Tương Tác**: Khi triển khai nội dung ẩn, hãy chắc chắn rằng bạn đang sử dụng các thành phần tương tác để cải thiện trải nghiệm người dùng. - **Kiểm Tra Tính Khả Dụng**: Đảm bảo rằng nội dung ẩn vẫn có thể truy cập được cho tất cả người dùng, bao gồm cả những người sử dụng công cụ trợ giúp. - **Tối Ưu Hóa Tốc Độ Tải Trang**: Sử dụng `hidden='until-found'` để giảm thời gian tải trang mà không làm giảm trải nghiệm người dùng. ## Những Cạm Bẫy Thường Gặp - **Không Hiểu Rõ Về Tính Khả Dụng**: Một số lập trình viên có thể không nhận ra rằng nội dung ẩn có thể gây khó khăn cho người dùng có khuyết tật. - **Thiếu Kiểm Tra**: Không kiểm tra khả năng hoạt động của các thành phần tương tác có thể dẫn đến trải nghiệm người dùng kém. ## Mẹo Tối Ưu Hiệu Suất - **Sử Dụng JavaScript để Theo Dõi Sự Kiện**: Khi nội dung được tìm thấy, bạn có thể sử dụng JavaScript để xử lý sự kiện và hiển thị nội dung một cách mượt mà. - **Giảm Thiểu Sự Tải Lại Trang**: Thay vì làm mới trang, hãy dùng AJAX để cập nhật nội dung một cách linh hoạt và nhanh chóng. ## Kết Luận `hidden='until-found'` là một công cụ mạnh mẽ trong việc quản lý nội dung ẩn trên trang web. Nó không chỉ cải thiện hiệu suất tải trang mà còn đảm bảo tính khả dụng cho tất cả người dùng. Hãy bắt đầu triển khai thuộc tính này trong dự án của bạn ngay hôm nay để nâng cao trải nghiệm người dùng. ## Câu Hỏi Thường Gặp (FAQ) ### 1. `hidden='until-found'` có tương thích với tất cả trình duyệt không? Hiện tại, giá trị này được hỗ trợ bởi Chrome, Firefox và đang được thêm vào Safari. ### 2. Làm thế nào để kiểm tra tính khả dụng của nội dung ẩn? Người dùng có thể sử dụng các công cụ kiểm tra khả dụng hoặc công cụ đọc màn hình để đảm bảo nội dung ẩn có thể truy cập. ### 3. Tôi có thể sử dụng `hidden='until-found'` trong tất cả các thành phần không? Có, bạn có thể sử dụng trong các thành phần như accordions, carousels và các giao diện tab. ## Tài Nguyên Tham Khảo - [Can I Use | hidden until-found](https://caniuse.com/#feat=hidden-until-found) - [Making collapsed content accessible with hidden=until-found](https://example.com) - [HTML hidden global attribute](https://example.com) - [Covering hidden=until-found](https://example.com) - [CSS Pseudo-Elements Module Level 4 ::search-text selector](https://example.com)

Tab 1

Tab 2

Bài viết về chủ đề#wcag

Tổng hợp các bài viết về #wcag

Khám Phá Nội Dung Ẩn: Giới Thiệu về hidden='until-found'#html#css#a11y#wcag

Chủ đề phổ biến

Khám Phá Nội Dung Ẩn: Giới Thiệu về hidden='until-found'