Bagian konten yang diciutkan, terkadang dijelaskan sebagai akordeon, adalah pola UI yang umum. Namun, konten yang tersembunyi di bagian yang diciutkan menjadi tidak mungkin ditelusuri menggunakan penelusuran cari-di-halaman. Selain itu, Anda tidak dapat menautkan ke fragmen teks di dalam area yang diciutkan.
Atribut HTML hidden=until-found dan peristiwa beforematch dapat menyelesaikan 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 ditemukan kecocokan.
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 jadikan dapat ditelusuri, ganti gaya yang menyembunyikan bagian tersebut 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 fitur cari-di-halaman. Tidak semua pengguna akan menggunakan fitur cari-di-halaman, dan browser yang tidak mendukung hidden=until-found akan mendapatkan pengalaman asli konten tersembunyi tanpa pengungkapan cari-di-halaman.
Jika ingin memastikan konten tersembunyi Anda dapat ditelusuri pada browser yang tidak mendukung hidden=until-found, Anda selalu dapat memperluas 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 atribut tersembunyi reguler. Hal ini diperlukan untuk menelusuri konten saat tertutup, tetapi juga memiliki efek samping berikut:
- Beberapa API tata letak seperti
getBoundingClientRectakan melaporkan bahwa konten tersembunyi di dalam elemenhidden=until-foundmenggunakan ruang dan memiliki posisi di halaman. - Node turunan dari elemen
hidden=until-foundtidak akan dirender, tetapi elemenhidden=until-founditu sendiri akan tetap memiliki kotak. Artinya, properti CSS seperti batas dan ukuran eksplisit masih akan memengaruhi rendering.
Contohnya, demo berikut menambahkan margin, batas, dan padding ke elemen yang menerapkan hidden=until-found. Di tempat konten tersembunyi akan muncul adalah sebuah kotak dengan garis tepi abu-abu, yang kemudian diisi dengan konten tersembunyi ketika ditampilkan. Ini adalah kotak elemen tersembunyi.
Untuk menghindari masalah ini, tambahkan batas ke elemen yang disarangkan di dalam penampung yang memiliki hidden=until-found.
Banner besar oleh Thomas Bormans.