Tingkatkan UI Anda: Menguasai API Sorotan Kustom CSS untuk Gaya Seleksi Teks

Selama bertahun-tahun, penataan gaya seleksi teks di web merupakan hal yang agak terbatas. Kita sebagian besar terkungkung pada gaya default browser, atau paling banter, perubahan sederhana pada warna latar belakang dan teks. Namun, API Sorotan Kustom CSS mengubah segalanya. Ini menyediakan cara yang kuat dan fleksibel untuk sepenuhnya menyesuaikan tampilan teks yang dipilih, membuka dunia kemungkinan baru untuk desain UI dan keterlibatan pengguna.

Apa itu API Sorotan Kustom CSS?

API Sorotan Kustom CSS adalah sekumpulan fitur CSS yang memungkinkan pengembang untuk menata gaya seleksi teks menggunakan gaya kustom di luar warna latar belakang dan teks dasar. Ini memperkenalkan elemen-pseudo ::highlight dan properti terkait, memungkinkan Anda untuk menargetkan jenis seleksi teks tertentu dan menerapkan gaya unik padanya. API ini secara signifikan meningkatkan pengalaman pengguna dengan memungkinkan seleksi yang lebih menarik secara visual dan informatif.

Fitur Utama API Sorotan Kustom CSS:

• Elemen-pseudo ::highlight: Batu penjuru dari API ini, memungkinkan Anda untuk menargetkan teks yang dipilih.
• Sorotan Bernama: Buat nama sorotan kustom dan terapkan pada elemen tertentu.
• Sorotan selection: Sorotan default yang mewakili seleksi teks dasar pengguna.
• Aksesibilitas yang Ditingkatkan: Buat seleksi yang lebih jelas secara visual dan membantu bagi pengguna dengan gangguan penglihatan.

Kompatibilitas Browser

Hingga akhir 2023/awal 2024, dukungan browser untuk API Sorotan Kustom CSS terus berkembang tetapi belum universal. Browser utama seperti Chrome dan Edge memiliki dukungan yang baik. Dukungan Safari ada tetapi bisa terbatas tergantung pada versinya. Selalu periksa caniuse.com untuk informasi kompatibilitas browser terbaru sebelum menerapkan API di lingkungan produksi. Pertimbangkan untuk menggunakan peningkatan progresif untuk memastikan situs web Anda tetap fungsional bagi pengguna dengan browser yang lebih lama.

Penggunaan Dasar: Menata Gaya Seleksi Teks Default

Mari kita mulai dengan contoh sederhana menata gaya seleksi teks default menggunakan elemen-pseudo ::highlight.

Contoh: Mengubah Warna Latar Belakang dan Teks

Contoh ini menunjukkan cara mengubah warna latar belakang dan warna teks dari teks yang dipilih.

            
::highlight {
  background-color: #FFFF00; /* Kuning */
  color: #000000; /* Hitam */
}

            

              
                Copy
              
            
          

Dalam kode CSS ini, kita menargetkan seleksi teks default dengan ::highlight dan mengatur warna latar belakangnya menjadi kuning (#FFFF00) dan warna teksnya menjadi hitam (#000000). Ini menyediakan cara dasar namun efektif untuk menyesuaikan tampilan teks yang dipilih.

Membuat Nama Sorotan Kustom

Kekuatan sebenarnya dari API Sorotan Kustom CSS terletak pada kemampuannya untuk mendefinisikan nama sorotan kustom. Ini memungkinkan Anda untuk menargetkan elemen atau bagian tertentu dari situs web Anda dan menerapkan gaya unik pada seleksi teks mereka.

Contoh: Menyorot Cuplikan Kode

Katakanlah Anda ingin menyorot cuplikan kode secara berbeda dari teks biasa di situs web Anda. Anda dapat mencapai ini dengan membuat nama sorotan kustom.

1. Definisikan Nama Sorotan Kustom: Gunakan fungsi highlight() untuk mendefinisikan nama sorotan kustom di CSS Anda.
2. Terapkan Nama Sorotan ke Elemen: Gunakan elemen-pseudo ::highlight(nama-sorotan-anda) untuk menargetkan elemen tertentu dan menerapkan gaya kustom.

            
/* Definisikan nama sorotan kustom untuk cuplikan kode */
::highlight(code-highlight) {
  background-color: #ADD8E6; /* Biru Muda */
  color: #00008B; /* Biru Tua */
  font-weight: bold;
}

/* Terapkan nama sorotan ke elemen code */
code::highlight(code-highlight) {
  /* Gaya hanya akan berlaku saat teks dipilih *di dalam* tag <code> */
}

/* Terapkan sorotan ke span dengan kelas tertentu */
.highlighted-code::highlight(code-highlight) {

}

            

              
                Copy
              
            
          

Dalam contoh ini, kita telah mendefinisikan nama sorotan kustom yang disebut code-highlight. Kita kemudian menerapkan sorotan ini ke elemen code. Warna latar belakang diatur ke biru muda (#ADD8E6), warna teks diatur ke biru tua (#00008B), dan ketebalan font diatur ke tebal. Sekarang, setiap kali teks dipilih di dalam elemen code, itu akan ditata dengan gaya kustom ini.

Penggunaan Lanjutan: Menargetkan Rentang Teks Tertentu

API Sorotan Kustom CSS juga dapat digunakan untuk menargetkan rentang teks tertentu di dalam sebuah elemen. Ini memungkinkan kontrol yang lebih terperinci atas gaya seleksi teks.

Contoh: Menyorot Istilah Pencarian

Bayangkan Anda ingin menyorot istilah pencarian di dalam sebuah dokumen. Ini seringkali memerlukan JavaScript bersama dengan API Sorotan CSS.

1. Gunakan JavaScript untuk Mengidentifikasi Istilah Pencarian: Gunakan JavaScript untuk menemukan semua kemunculan istilah pencarian di dalam dokumen.
2. Buat Rentang Sorotan: Gunakan API Range di JavaScript untuk membuat rentang bagi setiap kemunculan istilah pencarian.
3. Terapkan Sorotan: Gunakan metode CSS.highlights.set() untuk menerapkan sorotan ke rentang yang telah dibuat.

            
// Kode JavaScript untuk menyorot istilah pencarian
function highlightSearchTerms(searchTerm) {
  // Pertama, definisikan sorotan kustom di CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Temukan semua node teks
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Terapkan sorotan menggunakan CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('API Sorotan Kustom CSS tidak didukung sepenuhnya di browser ini. Menyediakan fallback');
    // Sediakan fallback untuk browser dengan dukungan terbatas (mis., Safari versi lama)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Light Salmon
      span.style.color = '#000000'; // Hitam
      span.className = 'search-highlight-fallback'; // Tambahkan kelas untuk gaya fallback
      range.surroundContents(span);
    });
  }
}

// Kode CSS untuk menata gaya sorotan pencarian
::highlight(search-highlight) {
  background-color: #FFA07A; /* Light Salmon */
  color: #000000; /* Hitam */
}

/* Gaya fallback untuk browser yang tidak sepenuhnya mendukung API */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Contoh penggunaan: sorot istilah "example"
highlightSearchTerms("example");

            

              
                Copy
              
            
          

Cuplikan kode ini menunjukkan cara menyorot istilah pencarian di dalam dokumen menggunakan JavaScript dan API Sorotan Kustom CSS. Kode JavaScript mengidentifikasi istilah pencarian, membuat rentang untuk setiap kemunculan, dan menerapkan search-highlight ke rentang tersebut. Kode CSS kemudian menata teks yang disorot dengan latar belakang salmon muda dan teks hitam.

Catatan Penting: Pendekatan ini memerlukan JavaScript dan bergantung pada API CSS.highlights. Karena dukungan tidak universal, mekanisme fallback (seperti membungkus teks dengan `span` dan menata `span` tersebut) didemonstrasikan.

Pertimbangan Aksesibilitas

Saat menggunakan API Sorotan Kustom CSS, sangat penting untuk mempertimbangkan aksesibilitas untuk memastikan situs web Anda dapat digunakan oleh semua orang, termasuk pengguna dengan disabilitas.

Kiat untuk Gaya Seleksi Teks yang Aksesibel:

• Pastikan Kontras Cukup: Pertahankan kontras yang cukup antara warna latar belakang dan teks dari teks yang dipilih agar dapat dibaca oleh pengguna dengan gangguan penglihatan. Pedoman WCAG merekomendasikan rasio kontras setidaknya 4.5:1 untuk teks normal.
• Hindari Hanya Mengandalkan Warna: Jangan hanya mengandalkan warna untuk menunjukkan seleksi teks. Gunakan isyarat visual tambahan, seperti garis bawah atau cetak tebal, untuk membuat seleksi lebih jelas.
• Sediakan Gaya Alternatif untuk Mode Kontras Tinggi: Pengguna yang mengaktifkan mode kontras tinggi di sistem operasi mereka mungkin akan menimpa gaya kustom Anda. Sediakan gaya alternatif yang berfungsi baik dalam mode kontras tinggi untuk memastikan keterbacaan. Anda dapat menggunakan kueri media seperti @media (forced-colors: active) untuk mendeteksi kapan mode kontras tinggi diaktifkan.
• Uji dengan Teknologi Bantuan: Uji situs web Anda dengan teknologi bantuan, seperti pembaca layar, untuk memastikan bahwa teks yang dipilih diumumkan dan dipahami dengan benar.

Contoh: Memastikan Kontras yang Cukup

            
::highlight {
  background-color: #000080; /* Biru Laut */
  color: #FFFFFF; /* Putih */
}

            

              
                Copy
              
            
          

Dalam contoh ini, kami telah memilih warna latar belakang biru laut dan warna teks putih, yang memberikan kontras yang cukup bagi pengguna dengan gangguan penglihatan. Selalu gunakan pemeriksa kontras warna untuk memverifikasi bahwa pilihan warna Anda memenuhi standar aksesibilitas. Alat seperti Pemeriksa Kontras WebAIM dapat membantu.

Contoh Praktis dan Kasus Penggunaan

API Sorotan Kustom CSS menawarkan berbagai kemungkinan untuk meningkatkan pengalaman pengguna. Berikut adalah beberapa contoh praktis dan kasus penggunaan:

• Penyorotan Kode: Seperti yang ditunjukkan sebelumnya, Anda dapat menggunakan API untuk menyorot cuplikan kode dengan gaya kustom, membuatnya lebih menarik secara visual dan lebih mudah dibaca.
• Penyorotan Istilah Pencarian: Sorot istilah pencarian di dalam dokumen untuk membantu pengguna menemukan informasi yang mereka cari dengan cepat.
• Penyorotan Kesalahan: Sorot kesalahan atau peringatan dalam formulir atau antarmuka pengguna lainnya untuk menarik perhatian pengguna.
• Penyorotan Kutipan: Sorot teks yang dikutip dalam makalah akademis atau artikel untuk membedakannya secara visual dari konten utama.
• Penyorotan Percakapan: Dalam aplikasi obrolan, sorot pesan pengguna sendiri atau pesan dari pengguna tertentu agar lebih mudah diikuti.
• Gamifikasi: Sorot kata atau frasa tertentu dalam sebuah permainan untuk memberikan petunjuk atau isyarat kepada pemain.
• Peringkasan Teks: Sorot kalimat atau frasa kunci dalam dokumen untuk memberikan ringkasan cepat dari konten. Ini sering melibatkan algoritma kompleks untuk menentukan tingkat kepentingan.

Praktik Terbaik dan Kiat

Untuk memaksimalkan API Sorotan Kustom CSS, ikuti praktik terbaik dan kiat berikut:

• Gunakan Nama Sorotan yang Deskriptif: Pilih nama sorotan yang deskriptif yang dengan jelas menunjukkan tujuan sorotan tersebut. Ini akan membuat kode Anda lebih mudah dibaca dan dipelihara. Misalnya, gunakan code-highlight alih-alih highlight-1.
• Jaga Gaya Tetap Konsisten: Pertahankan gaya yang konsisten di semua sorotan Anda untuk menciptakan pengalaman pengguna yang kohesif. Gunakan sistem desain atau panduan gaya untuk memastikan konsistensi.
• Hindari Penggunaan Sorotan yang Berlebihan: Jangan terlalu sering menggunakan sorotan, karena ini bisa mengganggu dan membebani pengguna. Gunakan secukupnya dan secara strategis untuk menarik perhatian pada informasi yang paling penting.
• Uji di Berbagai Perangkat dan Browser: Uji situs web Anda di berbagai perangkat dan browser untuk memastikan bahwa sorotan kustom Anda ditampilkan dengan benar. Berikan perhatian khusus pada perangkat seluler dan browser versi lama.
• Pertimbangkan Kinerja: Meskipun API Sorotan Kustom CSS umumnya berkinerja baik, perhatikan jumlah sorotan yang Anda gunakan, terutama pada dokumen besar. Terlalu banyak sorotan dapat memengaruhi kinerja. Jika Anda menggunakan JavaScript untuk mengelola sorotan, optimalkan kode Anda untuk meminimalkan jumlah manipulasi DOM.
• Gunakan Peningkatan Progresif: Karena dukungan browser tidak universal, gunakan teknik peningkatan progresif. Terapkan mekanisme fallback menggunakan gaya CSS standar untuk memastikan pengalaman tetap dapat digunakan bagi mereka yang menggunakan browser versi lama. Pertimbangkan untuk menggunakan deteksi fitur (mis., memeriksa keberadaan `CSS.highlights`) untuk menentukan apakah akan menggunakan API atau fallback.

Kesimpulan

API Sorotan Kustom CSS adalah alat yang ampuh untuk meningkatkan pengalaman pengguna dan menciptakan seleksi teks yang lebih menarik secara visual dan informatif. Dengan menguasai API ini, Anda dapat membawa desain UI Anda ke tingkat berikutnya dan memberikan pengalaman menjelajah yang lebih menarik dan mudah diakses bagi pengguna. Meskipun dukungan browser masih berkembang, memahami dan bereksperimen dengan API ini sekarang akan memposisikan Anda untuk menciptakan pengalaman web mutakhir seiring dengan meningkatnya adopsi. Ingatlah untuk memprioritaskan aksesibilitas dan menyediakan fallback untuk browser lama untuk memastikan pengalaman positif bagi semua pengguna.

Sumber Daya

• MDN Web Docs: API Sorotan Kustom CSS
• Can I Use: API Sorotan Kustom CSS
• Pemeriksa Kontras WebAIM