25 September 2025Bahasa Indonesia

Jelajahi kekuatan CSS Custom Highlight API untuk manajemen pemilihan teks tingkat lanjut. Pelajari cara membuat gaya sorotan khusus, mengelola banyak rentang, dan membangun antarmuka pengguna yang dinamis dengan fleksibilitas tak tertandingi.

CSS Custom Highlight API: Menguasai Pemilihan Teks Multi-Rentang untuk UI Dinamis

CSS Custom Highlight API adalah alat baru yang kuat untuk pengembang web yang memungkinkan kontrol tak tertandingi atas pemilihan dan penyorotan teks dalam aplikasi web. Tidak seperti kemampuan pemilihan browser dasar, API ini memungkinkan pengembang untuk menentukan gaya sorotan khusus dan mengelola beberapa rentang pemilihan secara terprogram. Ini membuka dunia kemungkinan untuk menciptakan antarmuka pengguna yang kaya, interaktif, dan mudah diakses. Panduan ini memberikan ikhtisar komprehensif tentang API, menjelajahi kemampuan, kasus penggunaan, dan detail implementasinya, semuanya dengan perspektif global.

Memahami Dasar-Dasar CSS Custom Highlight API

Sebelum menyelami skenario kompleks, penting untuk memahami konsep dasar API. Intinya, CSS Custom Highlight API memperkenalkan beberapa pseudo-elemen CSS baru, termasuk:

::selection: Mewakili bagian dari dokumen yang telah dipilih oleh pengguna. Ini telah tersedia sejak lama, memungkinkan penataan gaya dasar pemilihan teks.
::highlight: Pseudo-elemen yang lebih umum untuk menerapkan gaya ke rentang yang disorot. Ini adalah kunci kekuatan API baru. Sekarang Anda dapat membuat sorotan bernama dan menerapkan gaya khusus ke masing-masing sorotan.
::target-text: Mewakili bagian dari dokumen yang ditargetkan oleh fragmen URI (mis., #section-title). Ini memungkinkan Anda untuk menata gaya bagian halaman tempat pengguna menggulir melalui tautan.
::spelling-error: Mewakili teks yang diidentifikasi oleh agen pengguna sebagai mengandung kesalahan ejaan. Menawarkan kontrol gaya atas indikator kesalahan ejaan.
::grammar-error: Mewakili teks yang diidentifikasi oleh agen pengguna sebagai mengandung kesalahan tata bahasa. Menawarkan kontrol gaya atas indikator kesalahan tata bahasa.

Pseudo-elemen ::highlight adalah andalan API. Ini memungkinkan Anda untuk menentukan sorotan bernama di CSS dan kemudian menerapkan sorotan tersebut ke rentang teks tertentu menggunakan JavaScript.

Konsep Utama: Rentang dan Sorotan

API ini berkisar pada konsep rentang dan sorotan:

Rentang: Bagian teks yang berdekatan dalam dokumen. Diwakili oleh objek Range di JavaScript.
Sorotan: Gaya bernama yang diterapkan ke satu atau beberapa rentang. Didefinisikan dalam CSS menggunakan pseudo-elemen ::highlight(highlight-name) dan dimanipulasi melalui API Highlight dan HighlightRegistry di JavaScript.

Anggap saja seperti ini: rentang adalah 'apa' (teks yang ingin Anda sorot), dan sorotan adalah 'bagaimana' (gaya yang ingin Anda terapkan).

Menyiapkan Sorotan Kustom dengan CSS

Langkah pertama adalah menentukan gaya sorotan kustom Anda di CSS. Anda melakukan ini menggunakan pseudo-elemen ::highlight().

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

::highlight(important-term) {
  background-color: lightblue;
  font-weight: bold;
}

Dalam contoh ini, kami telah menentukan dua gaya sorotan kustom: search-result dan important-term. Sorotan search-result akan menerapkan latar belakang kuning dengan teks hitam, sedangkan sorotan important-term akan menggunakan latar belakang biru muda dan menebalkan teks. Anda dapat menentukan properti CSS apa pun yang Anda inginkan dalam gaya sorotan ini.

Mengelola Sorotan dengan JavaScript

Setelah Anda menentukan gaya sorotan Anda di CSS, Anda dapat menggunakan JavaScript untuk menerapkannya ke rentang teks tertentu. API Highlight dan HighlightRegistry menyediakan alat untuk ini.

HighlightRegistry

HighlightRegistry adalah objek global yang mengelola semua sorotan dalam dokumen. Anda dapat mengaksesnya melalui antarmuka CSS:

            
const highlightRegistry = CSS.highlights;

Membuat Sorotan

Untuk membuat sorotan, Anda menggunakan konstruktor Highlight:

            
const highlight = new Highlight();

Awalnya, sorotan tidak memiliki rentang yang terkait dengannya. Anda perlu menambahkan rentang ke sorotan menggunakan metode addRange().

Menambahkan Rentang ke Sorotan

Untuk menambahkan rentang ke sorotan, Anda pertama-tama perlu membuat objek Range. Anda dapat melakukan ini menggunakan metode document.createRange():

            
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

highlight.addRange(range);

Di mana:

startNode: Node DOM tempat rentang dimulai.
startOffset: Offset karakter dalam startNode tempat rentang dimulai.
endNode: Node DOM tempat rentang berakhir.
endOffset: Offset karakter dalam endNode tempat rentang berakhir.

Contoh: Menyoroti Hasil Pencarian

Katakanlah Anda memiliki blok teks dan Anda ingin menyoroti semua kemunculan istilah pencarian. Berikut adalah cara Anda dapat melakukannya:

            
function highlightSearchResults(searchTerm, element) {
  const text = element.textContent;
  let index = text.indexOf(searchTerm);

  if (index === -1) {
    return; // Istilah pencarian tidak ditemukan
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  // Terapkan gaya sorotan 'search-result'
  highlightRegistry.set('search-result', highlight);
}

const contentElement = document.getElementById('content');
highlightSearchResults('example', contentElement);

Cuplikan kode ini menemukan semua kemunculan kata "example" di dalam elemen dengan ID "content" dan menerapkan gaya sorotan search-result ke mereka.

Menghapus Rentang dan Sorotan

Anda dapat menghapus rentang dari sorotan menggunakan metode deleteRange():

            
highlight.deleteRange(range);

Anda juga dapat menghapus semua rentang dari sorotan menggunakan metode clear():

            
highlight.clear();

Untuk menghapus sorotan sepenuhnya, Anda dapat menggunakan metode delete() dari HighlightRegistry:

            
highlightRegistry.delete('search-result');

Kasus Penggunaan dan Pertimbangan Tingkat Lanjut

CSS Custom Highlight API adalah alat yang ampuh yang dapat digunakan dalam berbagai skenario tingkat lanjut.

Pengeditan Kolaboratif

Dalam aplikasi pengeditan kolaboratif, Anda dapat menggunakan API untuk menyoroti perubahan yang dibuat oleh pengguna yang berbeda. Setiap pengguna dapat memiliki gaya sorotan khusus mereka sendiri, memungkinkan Anda untuk dengan mudah melihat siapa yang membuat perubahan apa. Misalnya, editor dokumen kolaboratif yang digunakan oleh tim di berbagai negara dapat menggunakan warna sorotan yang berbeda untuk mewakili editan dari anggota tim di Jepang, Jerman, dan Brasil.

Editor Kode

Editor kode dapat memanfaatkan API untuk penyorotan sintaksis. Elemen sintaksis yang berbeda (mis., kata kunci, operator, komentar) dapat diberi gaya sorotan yang berbeda. Editor kode modern sering kali memiliki aturan penyorotan sintaksis yang kompleks, dan API ini memungkinkan kontrol yang lebih tepat dan dapat disesuaikan daripada metode tradisional.

Aksesibilitas

API dapat digunakan untuk meningkatkan aksesibilitas. Misalnya, Anda dapat menyoroti elemen yang saat ini difokuskan atau teks yang sedang dibaca oleh pembaca layar. Ingatlah untuk memastikan kontras warna yang cukup antara latar belakang sorotan dan warna teks untuk pengguna dengan gangguan penglihatan. WCAG (Pedoman Aksesibilitas Konten Web) memberikan pedoman khusus tentang rasio kontras warna.

Pertimbangan Internasionalisasi (i18n)

Saat menggunakan API dalam aplikasi multibahasa, perhatikan hal berikut:

Arah Teks: Pastikan gaya sorotan Anda berfungsi dengan benar dengan bahasa kiri-ke-kanan (LTR) dan kanan-ke-kiri (RTL).
Batas Kata: Bahasa yang berbeda memiliki aturan yang berbeda untuk batas kata. Pastikan untuk menggunakan algoritma deteksi batas kata yang sesuai saat menyoroti kata atau frasa.
Set Karakter: API mendukung Unicode, sehingga Anda dapat menyoroti teks dalam bahasa apa pun.

Misalnya, saat menyoroti istilah pencarian dalam bahasa Arab (bahasa RTL), pastikan sorotan secara visual mencerminkan arah teks yang benar. Demikian pula, saat menyoroti kata kunci dalam bahasa Jepang, yang tidak menggunakan spasi antar kata, Anda perlu menggunakan analisis morfologi yang sesuai untuk mengidentifikasi batas kata.

Pertimbangan Kinerja

Meskipun API ini kuat, penting untuk memperhatikan kinerja. Membuat dan mengelola sejumlah besar sorotan dapat memengaruhi kinerja, terutama dalam dokumen besar. Pertimbangkan tips ini:

Optimalkan Pembuatan Rentang: Membuat objek Range bisa mahal. Gunakan kembali rentang yang ada bila memungkinkan.
Pembaruan Batch: Saat membuat banyak perubahan pada sorotan, gabungkan perubahan tersebut menjadi satu pembaruan untuk meminimalkan reflow.
Pemuatan Lambat: Hanya sorot teks yang saat ini terlihat oleh pengguna. Muat sorotan tambahan saat pengguna menggulir.
Virtualisasi: Untuk dokumen yang sangat besar, pertimbangkan untuk menggunakan teknik virtualisasi untuk hanya merender bagian dokumen yang terlihat.

Contoh Praktis dan Cuplikan Kode

Contoh 1: Penyorotan Kata Kunci Dinamis

Contoh ini menunjukkan cara menyoroti kata kunci secara dinamis dalam teks berdasarkan input pengguna. Bayangkan seorang pengguna mengetik kueri pencarian ke dalam kotak pencarian; kata kunci yang disorot diperbarui secara real-time.

            


  Ini adalah beberapa contoh teks. Ini berisi kata kunci yang ingin kita sorot. Kami akan menyoroti kata kunci berdasarkan input pengguna.

            
const keywordInput = document.getElementById('keyword-input');
const textContainer = document.getElementById('text-container');

keywordInput.addEventListener('input', () => {
  const keyword = keywordInput.value.trim();
  if (keyword) {
    highlightKeyword(keyword, textContainer);
  } else {
    clearHighlights(textContainer);
  }
});

function highlightKeyword(keyword, element) {
  clearHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(keyword);

  if (index === -1) {
    return;
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + keyword.length);
    highlight.addRange(range);
    index = text.indexOf(keyword, index + 1);
  }

  CSS.highlights.set('dynamic-keyword', highlight);
}

function clearHighlights(element) {
  CSS.highlights.delete('dynamic-keyword');
}

            
::highlight(dynamic-keyword) {
  background-color: rgba(255, 165, 0, 0.5); /* Oranye semi-transparan */
  color: black;
}

Contoh 2: Menerapkan Fitur "Temukan Semua"

Contoh ini mensimulasikan fitur "Temukan Semua", mirip dengan yang ditemukan di editor teks dan IDE. Semua kemunculan istilah pencarian disorot secara bersamaan.

            


  Dokumen ini berisi banyak contoh istilah pencarian. Istilah pencarian akan disorot di seluruh dokumen.
  Ini adalah contoh kedua dari istilah pencarian. Berikut adalah istilah pencarian lainnya.

            
const searchTermInput = document.getElementById('search-term');
const documentContent = document.getElementById('document-content');

searchTermInput.addEventListener('input', () => {
  const searchTerm = searchTermInput.value.trim();
  if (searchTerm) {
    findAll(searchTerm, documentContent);
  } else {
    clearFindAllHighlights(documentContent);
  }
});

function findAll(searchTerm, element) {
  clearFindAllHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(searchTerm);
  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  CSS.highlights.set('find-all', highlight);
}

function clearFindAllHighlights(element) {
  CSS.highlights.delete('find-all');
}

            
::highlight(find-all) {
  background-color: #90EE90; /* Hijau Muda */
  color: black;
}

Kompatibilitas Browser dan Polyfill

CSS Custom Highlight API adalah fitur yang relatif baru, jadi kompatibilitas browser mungkin berbeda-beda. Pada akhir tahun 2024, ia menikmati dukungan yang baik di browser modern seperti Chrome, Firefox, Safari, dan Edge. Namun, penting untuk memeriksa data kompatibilitas browser terbaru di situs web seperti "Can I use..." untuk memastikan audiens target Anda dapat menggunakan fitur Anda. Jika Anda perlu mendukung browser lama, Anda dapat menjelajahi polyfill atau pendekatan alternatif yang meniru fungsionalitas API, meskipun mungkin tidak menawarkan tingkat kinerja atau fidelitas yang sama.

Masa Depan Pemilihan dan Penyorotan Teks

CSS Custom Highlight API mewakili langkah maju yang signifikan dalam pengembangan web, memberikan pengembang kontrol granular atas pemilihan dan penyorotan teks. Seiring dengan matangnya API dan peningkatan dukungan browser, kita dapat mengharapkan untuk melihat penggunaan teknologi ini yang lebih inovatif. Dari editor teks tingkat lanjut hingga platform dokumen kolaboratif, kemungkinannya tidak terbatas. API ini memungkinkan pengalaman pengguna yang lebih kaya, lebih interaktif, dan lebih mudah diakses. Pertimbangkan bagaimana ini dapat digunakan untuk meningkatkan pengalaman pengguna dalam segala hal mulai dari situs berita internasional hingga platform pembelajaran bahasa online.

Kesimpulan

CSS Custom Highlight API adalah alat yang ampuh untuk membuat antarmuka pengguna yang dinamis dan interaktif. Dengan memahami konsep dasar rentang, sorotan, dan HighlightRegistry, Anda dapat memanfaatkan API ini untuk membangun pengalaman pengguna yang menarik yang sebelumnya sulit atau tidak mungkin dicapai. Saat Anda menjelajahi API ini, ingatlah untuk mempertimbangkan aksesibilitas, internasionalisasi, dan kinerja untuk memastikan bahwa aplikasi Anda dapat digunakan dan berkinerja untuk audiens global. Dengan fleksibilitas dan kontrolnya, CSS Custom Highlight API siap menjadi bagian penting dari perangkat pengembang web modern.