CSS Custom Highlight API: Dinamik UI'lar uchun Ko'p oralikli matn tanlashni o'zlashtirish

CSS Custom Highlight API – bu veb-ishlab chiquvchilar uchun matnni tanlash va ajratish ustidan misli ko‘rilmagan nazoratni ta’minlovchi kuchli yangi vositadir. Oddiy brauzer tanlash imkoniyatlaridan farqli o‘laroq, bu API ishlab chiquvchilarga maxsus ajratib ko‘rsatish uslublarini belgilash va bir nechta tanlov oralig‘ini dasturiy tarzda boshqarish imkonini beradi. Bu boy, interaktiv va qulay foydalanuvchi interfeyslarini yaratish uchun cheksiz imkoniyatlar ochadi. Ushbu qo‘llanma API haqida umumiy ma’lumot beradi, uning imkoniyatlari, foydalanish holatlari va amalga oshirish tafsilotlarini global nuqtai nazardan o‘rganadi.

CSS Custom Highlight API asoslarini tushunish

Murakkab ssenariylarga sho‘ng‘ishdan oldin, API’ning asosiy tushunchalarini tushunish muhimdir. Mohiyatan, CSS Custom Highlight API bir nechta yangi CSS psevdo-elementlarini joriy etadi, jumladan:

• ::selection: Hujjatning foydalanuvchi tomonidan tanlangan qismini ifodalaydi. Bu ancha vaqtdan beri mavjud bo'lib, matn tanlovlarining asosiy uslubini yaratishga imkon beradi.
• ::highlight: Ajratib ko'rsatilgan oraliqlarga uslublarni qo'llash uchun umumiyroq psevdo-element. Bu yangi API quvvatining kalitidir. Endi siz nomlangan ajratmalarni yaratishingiz va har biriga maxsus uslub qo'llashingiz mumkin.
• ::target-text: URI fragmenti (masalan, #section-title) tomonidan nishonlangan hujjat qismini ifodalaydi. Bu foydalanuvchi havola orqali sahifaning qaysi bo'limiga o'tganligini uslublash imkonini beradi.
• ::spelling-error: Foydalanuvchi agenti tomonidan imlo xatolarini o'z ichiga olgan deb topilgan matnni ifodalaydi. Imlo xatosi ko'rsatkichlari ustidan uslublash nazoratini taklif qiladi.
• ::grammar-error: Foydalanuvchi agenti tomonidan grammatik xatolarini o'z ichiga olgan deb topilgan matnni ifodalaydi. Grammatik xato ko'rsatkichlari ustidan uslublash nazoratini taklif qiladi.

::highlight psevdo-elementi API'ning asosiy ishchi elementi hisoblanadi. U CSS'da nomlangan ajratmalarni belgilash va keyin JavaScript yordamida bu ajratmalarni matnning aniq oraliqlariga qo'llash imkonini beradi.

Asosiy tushunchalar: Oraliqlar va ajratmalar

API oraliqlar va ajratmalar tushunchalari atrofida aylanadi:

• Oraliq: Hujjatdagi matnning uzluksiz qismi. JavaScript'dagi Range obyekti bilan ifodalanadi.
• Ajratma: Bir yoki bir nechta oraliqqa qo'llaniladigan nomlangan uslub. CSS'da ::highlight(highlight-name) psevdo-elementi yordamida aniqlanadi va JavaScript'dagi Highlight va HighlightRegistry API'lari orqali boshqariladi.

Buni shunday tasavvur qiling: oraliq – bu "nima" (ajratmoqchi bo'lgan matn), ajratma esa "qanday" (qo'llamoqchi bo'lgan uslub).

CSS bilan maxsus ajratmalarni sozlash

Birinchi qadam – maxsus ajratma uslublaringizni CSS'da belgilash. Buni ::highlight() psevdo-elementi yordamida amalga oshirasiz.

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

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

            

              
                Copy
              
            
          

Ushbu misolda biz ikkita maxsus ajratma uslubini belgiladik: search-result va important-term. search-result ajratmasi sariq fonda qora matnni qo'llaydi, important-term ajratmasi esa och ko'k fondan foydalanib matnni qalin qiladi. Siz bu ajratma uslublari ichida istalgan CSS xususiyatlarini belgilashingiz mumkin.

JavaScript yordamida ajratmalarni boshqarish

CSS'da ajratma uslublaringizni belgilaganingizdan so'ng, ularni matnning ma'lum oraliqlariga qo'llash uchun JavaScript'dan foydalanishingiz mumkin. Highlight va HighlightRegistry API'lari buning uchun vositalarni taqdim etadi.

HighlightRegistry

HighlightRegistry – bu hujjatdagi barcha ajratmalarni boshqaruvchi global obyekt. Unga CSS interfeysi orqali kirishingiz mumkin:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Ajratmalar yaratish

Ajratma yaratish uchun siz Highlight konstruktoridan foydalanasiz:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

Dastlab, ajratma bilan bog'liq oraliqlar mavjud emas. addRange() metodi yordamida ajratmaga oraliqlar qo'shishingiz kerak.

Ajratmaga oraliqlar qo'shish

Ajratmaga oraliq qo'shish uchun avval Range obyektini yaratishingiz kerak. Buni document.createRange() metodi yordamida qilishingiz mumkin:

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

highlight.addRange(range);

            

              
                Copy
              
            
          

Bu yerda:

• startNode: Oraliq boshlanadigan DOM tuguni.
• startOffset: Oraliq boshlanadigan startNode ichidagi belgi siljishi.
• endNode: Oraliq tugaydigan DOM tuguni.
• endOffset: Oraliq tugaydigan endNode ichidagi belgi siljishi.

Misol: Qidiruv natijalarini ajratish

Aytaylik, sizda matn bloki bor va siz qidiruv so'zining barcha uchraydigan joylarini ajratmoqchisiz. Buni qanday qilishingiz mumkin:

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

  if (index === -1) {
    return; // Qidiruv so'zi topilmadi
  }

  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);
  }

  // "search-result" ajratma uslubini qo'llash
  highlightRegistry.set('search-result', highlight);
}

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

            

              
                Copy
              
            
          

Ushbu kod parchasi "content" ID'li element ichida "example" so'zining barcha uchraydigan joylarini topadi va ularga search-result ajratma uslubini qo'llaydi.

Oraliqlar va ajratmalarni olib tashlash

deleteRange() metodi yordamida ajratmadan oraliqlarni olib tashlashingiz mumkin:

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

Shuningdek, clear() metodi yordamida ajratmadagi barcha oraliqlarni olib tashlashingiz mumkin:

            
highlight.clear();

            

              
                Copy
              
            
          

Ajratmani butunlay olib tashlash uchun HighlightRegistry ning delete() metodidan foydalanishingiz mumkin:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Ilg'or foydalanish holatlari va e'tiborga olish kerak bo'lgan jihatlar

CSS Custom Highlight API – bu turli xil ilg'or ssenariylarda qo'llanilishi mumkin bo'lgan kuchli vositadir.

Hamkorlikdagi tahrirlash

Hamkorlikdagi tahrirlash ilovalarida siz API yordamida turli foydalanuvchilar tomonidan kiritilgan o'zgarishlarni ajratib ko'rsatishingiz mumkin. Har bir foydalanuvchi o'zining shaxsiy ajratma uslubiga ega bo'lishi mumkin, bu sizga kim qanday o'zgarishlar kiritganini osonlik bilan ko'rish imkonini beradi. Masalan, bir nechta mamlakatdagi jamoalar tomonidan foydalaniladigan hamkorlikdagi hujjat muharriri Yaponiya, Germaniya va Braziliyadagi jamoa a'zolarining tahrirlarini ifodalash uchun turli ajratma ranglaridan foydalanishi mumkin.

Kod muharrirlari

Kod muharrirlari sintaksisni ajratish uchun API'dan foydalanishlari mumkin. Turli sintaksis elementlariga (masalan, kalit so'zlar, operatorlar, izohlar) turli ajratma uslublari berilishi mumkin. Zamonaviy kod muharrirlari ko'pincha murakkab sintaksisni ajratish qoidalariga ega bo'lib, bu API an'anaviy usullarga qaraganda aniqroq va moslashtiriladigan nazoratni ta'minlaydi.

Qulaylik

API qulaylikni yaxshilash uchun ishlatilishi mumkin. Masalan, siz joriy fokuslangan elementni yoki ekran o'quvchisi tomonidan o'qilayotgan matnni ajratib ko'rsatishingiz mumkin. Ko'rish qobiliyati zaif foydalanuvchilar uchun ajratma foni va matn rangi o'rtasida etarli rang kontrasti bo'lishini ta'minlashni unutmang. WCAG (Web Content Accessibility Guidelines) rang kontrasti nisbatlari bo'yicha aniq ko'rsatmalar beradi.

Xalqaro tilga moslashtirish (i18n) bo'yicha mulohazalar

API'dan ko'p tilli ilovalarda foydalanganda, quyidagilarga e'tibor bering:

• Matn yo'nalishi: Ajratma uslublaringiz chapdan o'ngga (LTR) va o'ngdan chapga (RTL) yo'nalishli tillar bilan to'g'ri ishlashiga ishonch hosil qiling.
• So'z chegaralari: Turli tillarda so'z chegaralari uchun har xil qoidalar mavjud. So'zlarni yoki iboralarni ajratishda mos keladigan so'z chegarasini aniqlash algoritmlaridan foydalanganingizga ishonch hosil qiling.
• Belgilar to'plamlari: API Unicode'ni qo'llab-quvvatlaydi, shuning uchun siz istalgan tildagi matnni ajratishingiz mumkin.

Masalan, arab tilidagi (RTL tili) qidiruv so'zlarini ajratishda, ajratma matnning to'g'ri yo'nalishini vizual tarzda aks ettirishiga ishonch hosil qiling. Xuddi shunday, yapon tilidagi kalit so'zlarni ajratishda, bu tilda so'zlar orasida bo'sh joy ishlatilmagani sababli, so'z chegaralarini aniqlash uchun mos morfologik tahlildan foydalanishingiz kerak bo'ladi.

Ishlash samaradorligi bo'yicha mulohazalar

API kuchli bo'lsa-da, ishlash samaradorligini yodda tutish muhimdir. Ko'p sonli ajratmalarni yaratish va boshqarish, ayniqsa katta hujjatlarda ishlashga ta'sir qilishi mumkin. Ushbu maslahatlarni ko'rib chiqing:

• Oraliq yaratishni optimallashtirish: Range obyektlarini yaratish qimmatga tushishi mumkin. Iloji boricha mavjud oraliqlardan qayta foydalaning.
• Partiyalashgan yangilashlar: Ajratmalarga bir nechta o'zgarishlar kiritayotganda, reflow'larni minimallashtirish uchun ularni bitta yangilanishga birlashtiring.
• Sekin yuklash: Faqat foydalanuvchiga hozirda ko'rinadigan matnni ajratib ko'rsating. Foydalanuvchi aylantirganda qo'shimcha ajratmalarni yuklang.
• Virtualizatsiya: Juda katta hujjatlar uchun hujjatning faqat ko'rinadigan qismini renderlash uchun virtualizatsiya usullaridan foydalanishni ko'rib chiqing.

Amaliy misollar va kod parchalar

1-misol: Dinamik kalit so'zni ajratish

Ushbu misol foydalanuvchi kiritishiga asoslanib matndagi kalit so'zlarni dinamik ravishda qanday ajratishni ko'rsatadi. Tasavvur qiling, foydalanuvchi qidiruv qutisiga qidiruv so'rovini kiritmoqda; ajratilgan kalit so'zlar real vaqt rejimida yangilanadi.

            


  This is some example text.  It contains keywords that we want to highlight.  We will highlight the keywords based on user input.


            

              
                Copy
              
            
          

            
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');
}

            

              
                Copy
              
            
          

            
::highlight(dynamic-keyword) {
  background-color: rgba(255, 165, 0, 0.5); /* Yarim shaffof to'q sariq */
  color: black;
}

            

              
                Copy
              
            
          

2-misol: "Hammasini topish" funksiyasini amalga oshirish

Ushbu misol matn muharrirlari va IDE'larda topilganlarga o'xshash "Hammasini topish" funksiyasini simulyatsiya qiladi. Qidiruv so'zining barcha uchraydigan joylari bir vaqtning o'zida ajratiladi.

            


  This document contains multiple instances of the search term. The search term will be highlighted throughout the document.
  This is a second instance of the search term. Here's another search term.


            

              
                Copy
              
            
          

            
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');
}

            

              
                Copy
              
            
          

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

            

              
                Copy
              
            
          

Brauzerlar bilan mosligi va Polyfill'lar

CSS Custom Highlight API nisbatan yangi xususiyat bo'lganligi sababli, brauzerlar bilan mosligi farq qilishi mumkin. 2024-yil oxiriga kelib, u Chrome, Firefox, Safari va Edge kabi zamonaviy brauzerlarda yaxshi qo'llab-quvvatlanadi. Biroq, maqsadli auditoriyangiz funksiyalaringizdan foydalana olishini ta'minlash uchun "Can I use..." kabi veb-saytlarda eng yangi brauzer mosligi ma'lumotlarini tekshirish muhimdir. Agar siz eski brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, polyfill'lar yoki API funksionalligini taqlid qiluvchi muqobil yondashuvlarni o'rganishingiz mumkin, garchi ular bir xil darajadagi ishlash samaradorligi yoki aniqlikni ta'minlamasa ham.

Matnni tanlash va ajratish kelajagi

CSS Custom Highlight API veb-ishlab chiqishda sezilarli qadam bo'lib, ishlab chiquvchilarga matnni tanlash va ajratish ustidan mayda nazoratni ta'minlaydi. API yetuklashgani va brauzerlarni qo'llab-quvvatlash yaxshilangani sari, biz ushbu texnologiyaning yanada innovatsion foydalanish usullarini ko'rishimiz mumkin. Ilg'or matn muharrirlaridan tortib hamkorlikdagi hujjat platformalarigacha, imkoniyatlar cheksizdir. Ushbu API boyroq, interaktivroq va qulayroq foydalanuvchi tajribasini yaratishga imkon beradi. Buni xalqaro yangiliklar saytlaridan tortib onlayn til o'rganish platformalarigacha bo'lgan hamma narsada foydalanuvchi tajribasini qanday yaxshilash mumkinligini ko'rib chiqing.

Xulosa

CSS Custom Highlight API – bu dinamik va interaktiv foydalanuvchi interfeyslarini yaratish uchun kuchli vositadir. Oraliqlar, ajratmalar va HighlightRegistry ning asosiy tushunchalarini tushunish orqali siz ushbu API'dan ilgari erishish qiyin yoki imkonsiz bo'lgan qiziqarli foydalanuvchi tajribalarini yaratish uchun foydalanishingiz mumkin. Ushbu API'ni o'rganayotganingizda, ilovalaringiz global auditoriya uchun foydalanishga yaroqli va samarali bo'lishini ta'minlash uchun qulaylik, xalqaro tilga moslashtirish va ishlash samaradorligini e'tiborga olishni unutmang. O'zining moslashuvchanligi va nazorati bilan CSS Custom Highlight API zamonaviy veb-ishlab chiquvchining asboblar to'plamining muhim qismiga aylanishga tayyor.