Penanganan Event Sorotan Kustom CSS: Meningkatkan Interaksi Seleksi Teks

Seleksi teks adalah interaksi fundamental di web. Pengguna menyorot teks karena berbagai alasan: menyalin konten, membagikan kutipan, melakukan pencarian, atau sekadar memfokuskan perhatian. Meskipun browser menyediakan sorotan teks default, API Sorotan Kustom CSS menawarkan kontrol yang belum pernah ada sebelumnya atas interaksi ini, memungkinkan developer untuk menciptakan pengalaman seleksi yang menarik secara visual, sadar konteks, dan sangat mudah diakses. Postingan blog ini akan membahas secara mendalam tentang API Sorotan Kustom CSS, menjelajahi kemampuannya dan memberikan contoh praktis untuk meningkatkan aplikasi web Anda.

Memahami Perilaku Seleksi Teks Default

Secara default, browser menata gaya teks yang dipilih menggunakan elemen pseudo ::selection. Anda dapat mengubah properti background-color dan color untuk mengubah tampilannya. Sebagai contoh:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

Cuplikan CSS sederhana ini mengubah warna latar belakang menjadi biru muda dan warna teks menjadi hitam setiap kali pengguna memilih teks di halaman. Namun, elemen pseudo ::selection memiliki batasan. Ia hanya memungkinkan penataan gaya pada latar belakang dan warna, yang membatasi kustomisasi. Selain itu, ia tidak memiliki informasi semantik tentang konteks seleksi. API Sorotan Kustom CSS mengatasi batasan-batasan ini.

Memperkenalkan API Sorotan Kustom CSS

API Sorotan Kustom CSS menyediakan pendekatan yang lebih kuat dan fleksibel untuk mengelola seleksi teks. API ini memperkenalkan properti CSS baru dan API JavaScript yang memungkinkan Anda untuk mendefinisikan dan menata gaya sorotan kustom berdasarkan kondisi dan interaksi tertentu.

Konsep Utama

• Pewarisan Sorotan: Sorotan ditata gayanya melalui mekanisme kaskade dan pewarisan yang mirip dengan properti CSS lainnya. Ini berarti Anda dapat mendefinisikan gaya sorotan default di tingkat root dan menimpanya untuk elemen atau konteks tertentu.
• Pseudo Sorotan: Elemen pseudo ::highlight() digunakan untuk menerapkan gaya pada sorotan yang diberi nama.
• API JavaScript: API JavaScript seperti objek getSelection() dan Highlight memungkinkan Anda membuat, mengelola, dan berinteraksi dengan sorotan secara terprogram.
• Aksesibilitas: API ini mendukung atribut ARIA dan pertimbangan aksesibilitas, memastikan bahwa sorotan kustom dapat dirasakan dan dipahami oleh pengguna dengan disabilitas.

Menerapkan Sorotan Kustom: Panduan Langkah-demi-Langkah

Berikut adalah panduan praktis untuk menerapkan sorotan kustom menggunakan API Sorotan Kustom CSS:

Langkah 1: Mendefinisikan Sorotan Bernama

Pertama, Anda perlu mendefinisikan sorotan bernama menggunakan CSS. Nama ini akan digunakan untuk mengaitkan gaya dengan seleksi tertentu.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

Dalam contoh ini, kita telah mendefinisikan sorotan bernama `custom-highlight` dengan latar belakang merah semi-transparan dan warna teks hitam. Anda dapat memilih nilai warna CSS yang valid untuk latar belakang dan teks.

Langkah 2: Membuat Sorotan di JavaScript

Selanjutnya, gunakan JavaScript untuk membuat dan menerapkan sorotan. Ini melibatkan pengambilan rentang teks yang dipilih dan membuat objek Highlight.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // Tidak ada seleksi
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Seleksi kosong
  }

  const highlight = new Highlight(range);

  // Daftarkan sorotan ke dokumen. Ini bersifat eksperimental dan mungkin memerlukan polyfill atau flag browser
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Terapkan mekanisme fallback di sini, mis., membungkus teks yang dipilih dalam  dengan sebuah kelas
    // Contohnya:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Opsional: Hapus seleksi setelah menyorot
}

            

              
                Copy
              
            
          

Penjelasan:

• window.getSelection(): Mengambil objek seleksi saat ini.
• selection.rangeCount: Memeriksa apakah ada seleksi yang aktif.
• selection.getRangeAt(0): Mendapatkan rentang yang dipilih.
• new Highlight(range): Membuat objek `Highlight` baru dari rentang tersebut.
• CSS.highlights.set('custom-highlight', highlight): Mendaftarkan sorotan ke registri sorotan CSS. Ini adalah langkah penting yang menghubungkan sorotan JavaScript dengan gaya CSS yang telah didefinisikan sebelumnya.
• Mekanisme Fallback: Menyertakan mekanisme fallback yang krusial untuk browser yang belum sepenuhnya mendukung `CSS.highlights`. Ini memastikan fitur Anda menurun secara anggun, mempertahankan fungsionalitas pada browser lama.
• selection.removeAllRanges(): Menghapus seleksi setelah menyorot. Ini opsional dan tergantung pada pengalaman pengguna yang Anda inginkan.

Ingatlah untuk melampirkan fungsi ini ke sebuah event listener, seperti klik tombol atau pintasan keyboard.

Langkah 3: Menangani Beberapa Rentang (Seleksi yang Tumpang Tindih)

API ini dapat menangani beberapa rentang yang tumpang tindih dalam satu sorotan. Anda dapat menambahkan beberapa rentang ke objek Highlight:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Terapkan fallback untuk beberapa rentang (lebih kompleks)
  // Ini akan memerlukan pemecahan teks menjadi span yang lebih kecil dan menerapkan gaya
  // Ini adalah implementasi fallback yang lebih canggih dan mungkin tidak cocok untuk semua kasus
}

            

              
                Copy
              
            
          

Gaya akan diterapkan ke semua rentang dalam sorotan.

Kasus Penggunaan dan Teknik Tingkat Lanjut

API Sorotan Kustom CSS membuka berbagai kemungkinan untuk meningkatkan interaksi seleksi teks. Berikut adalah beberapa kasus penggunaan dan teknik tingkat lanjut:

1. Penyorotan Sadar Konteks

Anda dapat menggunakan JavaScript untuk menganalisis teks yang dipilih dan menerapkan gaya sorotan yang berbeda berdasarkan konten atau konteks di sekitarnya. Misalnya, Anda bisa menyorot kata kunci dalam dokumen dengan warna tertentu, atau mengidentifikasi dan menyorot cuplikan kode.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Sorot komentar kode
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Sorot kata kunci JavaScript
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implementasi fallback, berpotensi menggunakan atribut data dan CSS kustom
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Definisikan gaya CSS untuk setiap jenis sorotan:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. Menyorot Hasil Pencarian

Anda dapat menggunakan API untuk menyorot istilah pencarian dalam dokumen. Ini sangat berguna untuk halaman hasil pencarian atau fungsionalitas pencarian dalam aplikasi.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Atau elemen tertentu
  const regex = new RegExp(searchTerm, 'gi'); // Global, tidak peka huruf besar/kecil

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Buat rentang untuk setiap kecocokan
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Fallback, sekali lagi, memerlukan penanganan node teks yang cermat
    }
  }
}

            

              
                Copy
              
            
          

Definisikan gaya CSS untuk sorotan hasil pencarian:

            ::highlight(search-result-highlight) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

3. Berintegrasi dengan Shadow DOM

API Sorotan Kustom CSS bekerja dengan lancar dengan Shadow DOM, memungkinkan Anda membuat komponen yang terkapsulasi dengan gaya sorotan kustom. Anda dapat mendefinisikan sorotan di dalam Shadow DOM dan menerapkannya pada elemen di dalam komponen.

4. Pertimbangan Aksesibilitas

Pastikan bahwa sorotan kustom Anda dapat diakses oleh semua pengguna. Pertimbangkan hal berikut:

• Kontras Warna: Pastikan kontras warna yang cukup antara latar belakang sorotan dan warna teks untuk memenuhi pedoman WCAG.
• Navigasi Keyboard: Pastikan pengguna dapat menavigasi teks yang disorot menggunakan keyboard.
• Kompatibilitas Pembaca Layar: Uji sorotan Anda dengan pembaca layar untuk memastikan bahwa teks yang dipilih diumumkan dengan benar.
• Indikator Fokus: Ketika elemen yang disorot menerima fokus, berikan indikator fokus visual yang jelas.

Anda dapat menggunakan atribut ARIA untuk memberikan informasi semantik tambahan tentang sorotan. Misalnya, Anda bisa menggunakan aria-label untuk mendeskripsikan tujuan dari bagian yang disorot.

5. Lokalisasi dan Internasionalisasi

Saat berurusan dengan seleksi teks dalam konteks global, pertimbangkan hal berikut:

• Arah Teks: Pastikan sorotan Anda berfungsi dengan benar baik dengan arah teks dari kiri ke kanan (LTR) maupun dari kanan ke kiri (RTL).
• Aturan Spesifik Bahasa: Waspadai aturan spesifik bahasa untuk seleksi teks dan batas kata.
• Dukungan Font: Gunakan font yang mendukung karakter yang digunakan dalam berbagai bahasa.

6. Optimisasi Kinerja

Menerapkan sorotan kustom dapat memengaruhi kinerja, terutama pada dokumen besar. Pertimbangkan teknik optimisasi berikut:

• Debouncing: Lakukan debounce pada fungsi sorotan untuk menghindari kalkulasi berlebihan selama seleksi cepat.
• Caching: Simpan rentang sorotan yang telah dihitung dalam cache untuk menghindari penghitungan ulang yang tidak perlu.
• Virtualization: Gunakan teknik virtualisasi untuk hanya merender sorotan yang saat ini terlihat di viewport.
• Web Workers: Alihkan kalkulasi sorotan ke web worker untuk menghindari pemblokiran thread utama.

Dukungan Browser dan Polyfill

API Sorotan Kustom CSS relatif baru dan mungkin belum didukung sepenuhnya oleh semua browser. Periksa tabel kompatibilitas browser terbaru sebelum menggunakannya dalam produksi. Pertimbangkan untuk menggunakan polyfill untuk memberikan dukungan bagi browser lama. Polyfill menambahkan kode yang diperlukan agar browser lama dapat memahami API baru. Cari secara online "CSS Custom Highlight API Polyfill" untuk menemukan opsi.

Kesimpulan

API Sorotan Kustom CSS memberdayakan developer untuk menciptakan pengalaman seleksi teks yang menarik, sadar konteks, dan mudah diakses. Dengan memahami kemampuan API dan menerapkan teknik yang dijelaskan dalam postingan blog ini, Anda dapat meningkatkan pengalaman pengguna aplikasi web Anda dan menyediakan cara yang lebih intuitif dan menarik secara visual bagi pengguna untuk berinteraksi dengan teks. Ingatlah untuk memprioritaskan aksesibilitas dan kinerja saat menerapkan sorotan kustom, serta mempertimbangkan kompatibilitas browser dan opsi polyfill. Kontrol seleksi teks yang lebih mendalam ini memberdayakan developer untuk membangun pengalaman web yang lebih interaktif dan ramah pengguna, yang disesuaikan dengan kebutuhan aplikasi dan preferensi pengguna tertentu. Seiring dengan meningkatnya dukungan browser, API Sorotan Kustom CSS menjanjikan untuk menjadi alat yang sangat diperlukan untuk pengembangan web modern.

Eksplorasi Lebih Lanjut

• MDN Web Docs: Highlight API
• CSS Houdini: Pelajari lebih lanjut tentang proyek CSS Houdini yang memungkinkan fitur-fitur CSS canggih ini.