Membuat konten yang diciutkan dapat diakses dengan fungsi tersembunyi=sampai-ditemukan

Joey Arhar

Menutup bagian konten, yang terkadang disebut sebagai akordeon, adalah pola UI yang umum. Namun, konten yang disembunyikan di bagian yang diciutkan menjadi tidak mungkin dapat ditelusuri menggunakan penelusuran cari-dalam halaman. Selain itu, Anda tidak dapat menautkan ke fragmen teks di dalam wilayah 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 area tersembunyi tersebut, dan menampilkan bagian jika ditemukan kecocokan.

Catatan: Selain mengizinkan penelusuran temukan di halaman pada wilayah tersembunyi, fitur ini akan memungkinkan konten tersembunyi ini dapat diakses oleh mesin telusur. Google Penelusuran bahkan akan membentuk link yang men-scroll ke fragmen yang ditampilkan.

Fitur ini tersedia dari 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 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 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 getBoundingClientRect akan melaporkan bahwa konten tersembunyi di dalam elemen hidden=until-found menggunakan ruang dan memiliki posisi di halaman.
• Node turunan elemen hidden=until-found tidak akan dirender, tetapi elemen hidden=until-found itu sendiri akan tetap memiliki kotak. Artinya, properti CSS seperti batas dan ukuran eksplisit akan tetap memengaruhi rendering.

Sebagai contoh, demo berikut menambahkan margin, batas, dan padding ke elemen yang menerapkan hidden=until-found. Tempat konten tersembunyi akan muncul adalah kotak dengan batas abu-abu, yang kemudian akan diisi dengan konten tersembunyi ketika konten ditampilkan. Ini adalah kotak elemen tersembunyi.

Untuk menghindari masalah ini, tambahkan batas ke elemen yang bertingkat di dalam penampung yang memiliki hidden=until-found.