Menutup bagian konten, yang terkadang disebut sebagai akordeon, adalah pola UI yang umum. Namun, konten yang disembunyikan di bagian yang diciutkan tidak dapat ditelusuri menggunakan penelusuran temukan di halaman. Selain itu, Anda tidak dapat menautkan ke fragmen teks di dalam region yang diciutkan.
Atribut HTML hidden=until-found dan peristiwa beforematch dapat mengatasi masalah ini. Dengan menambahkan hidden=until-found ke penampung untuk konten tersembunyi, Anda memungkinkan browser menelusuri teks di wilayah tersembunyi tersebut, dan menampilkan bagian jika kecocokan ditemukan.
Fitur ini tersedia mulai Chrome 102, jadi mari kita lihat cara kerjanya.
Cara menggunakannya
Jika situs Anda sudah memiliki bagian yang dapat diciutkan yang ingin Anda buat dapat ditelusuri, ganti gaya yang membuat bagian tersebut disembunyikan dengan atribut hidden=until-found. Jika halaman Anda juga memiliki status lain yang perlu disinkronkan dengan apakah bagian Anda ditampilkan atau tidak, tambahkan pemroses peristiwa beforematch yang akan diaktifkan pada elemen hidden=until-found tepat sebelum elemen ditampilkan oleh browser.
Peringatan
Untuk pengalaman pengguna yang konsisten, konten hidden=until-found harus dapat ditampilkan tanpa menggunakan temukan di halaman. Tidak semua pengguna akan menggunakan temukan di halaman, dan browser yang tidak mendukung hidden=until-found akan mendapatkan pengalaman asli konten tersembunyi tanpa temuan di halaman yang ditampilkan.
Jika ingin memastikan konten tersembunyi dapat ditelusuri di browser yang tidak mendukung hidden=until-found, Anda dapat selalu meluaskan konten tersembunyi di browser tersebut. Deteksi fitur dapat dilakukan dengan memeriksa keberadaan pengendali peristiwa beforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found menerapkan properti CSS content-visibility:hidden, bukan properti display:none yang diterapkan oleh atribut tersembunyi reguler. Hal ini diperlukan untuk menelusuri konten saat ditutup, tetapi juga memiliki efek samping berikut:
- Beberapa API tata letak seperti
getBoundingClientRectakan melaporkan bahwa konten tersembunyi di dalam elemenhidden=until-foundmenghabiskan ruang dan memiliki posisi di halaman. - Node turunan elemen
hidden=until-foundtidak akan dirender, tetapi elemenhidden=until-founditu sendiri akan tetap memiliki kotak. Artinya, properti CSS seperti batas dan ukuran eksplisit akan tetap memengaruhi rendering.
Sebagai contohnya, demo berikut menambahkan margin, batas, dan padding ke elemen yang telah menerapkan hidden=until-found. Di tempat konten tersembunyi akan muncul, terdapat kotak dengan batas abu-abu, yang kemudian akan terisi dengan konten tersembunyi saat konten tersebut ditampilkan. Ini adalah kotak elemen tersembunyi.
Untuk menghindari masalah ini, tambahkan batas ke elemen yang bertingkat di dalam penampung yang memiliki hidden=until-found.