CSS Custom Highlight API: Matn tanlash uslubini mukammallashtirish

Veb-sahifadagi matnni tanlashning oddiy harakati ko'pchilik foydalanuvchilar tomonidan ikkinchi fikrsiz amalga oshiriladi. Biroq, dasturchilar sifatida biz ko'pincha hatto eng nozik o'zaro ta'sirlarni ham yaxshilashga intilamiz. CSS Custom Highlight API bizga matnni tanlash tajribasini inqilob qilish, tanlangan matn qanday ko'rinishi ustidan misli ko'rilmagan nazoratni taklif qilish imkonini beradi. Bu imkoniyat oddiy fon va matn rangi o'zgarishlaridan tashqari, murakkab va qiziqarli foydalanuvchi interfeyslariga imkon beradi.

CSS Custom Highlight API nima?

CSS Custom Highlight API - bu CSS yordamida matn tanlashlari (va boshqa ajratilgan diapazonlar) ko'rinishini uslublash usulini ta'minlaydigan zamonaviy veb-standart. U ::highlight() psevdo-elementini taqdim etadi, u dasturchi tomonidan belgilangan mezonlar asosida matnning maxsus diapazonlarini maqsad qiladi. Ushbu API juda oddiy uslublash imkoniyatlarini taklif qiladigan an'anaviy ::selection psevdo-elementining cheklovlarini bartaraf etadi. Custom Highlight API yordamida siz yuqori darajada moslashtirilgan va kontekstga bog'liq matn tanlash uslublarini yaratishingiz mumkin.

Nima uchun CSS Custom Highlight API dan foydalanish kerak?

Custom Highlight API matn tanlashlarini uslublashning an'anaviy usullariga nisbatan bir qator afzalliklarni taklif etadi:

• Yaxshilangan foydalanuvchi tajribasi: Foydalanuvchilarga yo'l-yo'riq ko'rsatadigan va o'qilishni yaxshilaydigan vizual jihatdan jozibali va informatsion matn tanlashlarini yarating.
• Kontekstga asoslangan uslublash: Tanlangan matnning mazmuniga qarab turli uslublarni qo'llang, masalan, kod bo'laklarini ajratib ko'rsatish yoki asosiy atamalarni ta'kidlash.
• Qulaylikni oshirish: Tanlangan matn uchun aniq vizual ko'rsatmalarni taqdim eting, bu ko'rish qobiliyati cheklangan foydalanuvchilarga mazmunni osongina navigatsiya qilish imkonini beradi.
• Sozlanishi mumkin bo'lgan ko'rinish: Noyob va qiziqarli matn tanlash uslublarini yaratish uchun asosiy fon va matn rangi o'zgarishlaridan tashqari narsalarga o'ting.
• Dinamik uslublash: Foydalanuvchi o'zaro ta'sirlari yoki ilova holatiga qarab matn tanlashlarining ko'rinishini o'zgartiring.

Asosiy tushunchalarni tushunish

Kod misollariga sho'ng'ishdan oldin, CSS Custom Highlight API ning asosiy tushunchalarini tushunish muhim:

1. Ajratma ro'yxatdan o'tish

Jarayon JavaScript yordamida maxsus ajratma nomini ro'yxatdan o'tkazishdan boshlanadi. Keyin bu nom CSS da maxsus matn tanlashlarini maqsad qilish uchun ishlatiladi.

2. Ajratma diapazonlari

Ajratma diapazonlari uslublanadigan maxsus matn oraliqlarini belgilaydi. Ushbu diapazonlar Highlight va StaticRange yoki Range API yordamida dasturiy ravishda yaratiladi. Ular ajratiladigan matnning boshlanish va tugash nuqtalarini belgilaydilar.

3. ::highlight() Psevdo-elementi

Ushbu psevdo-element CSS da ro'yxatdan o'tgan ajratma nomlariga uslublarni qo'llash uchun ishlatiladi. U ajratma diapazonlari bilan belgilangan matn oraliqlarini maqsad qilib, selektor vazifasini bajaradi.

Amaliy misollar: CSS Custom Highlight API ni amalga oshirish

CSS Custom Highlight API dan qanday foydalanishni ko'rsatish uchun bir nechta amaliy misollarni ko'rib chiqaylik.

1-misol: Matn tanlashning asosiy uslubi

Ushbu misol tanlangan matnning fon va matn rangini qanday o'zgartirishni ko'rsatadi.

HTML:

            <p id="myText">Bu tanlanishi mumkin bo'lgan matn.</p>
            

              
                Copy
              
            
          

JavaScript:

            const myText = document.getElementById('myText');
const highlight = new Highlight();

// Butun paragrafni tanlang.
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}
            

              
                Copy
              
            
          

Tushuntirish:

• JavaScript kodi Highlight ob'ektini yaratadi va ID myText bo'lgan butun paragrafni qamrab oladigan diapazonni qo'shadi.
• CSS.highlights.set() usuli ajratmani 'myHighlight' nomi bilan ro'yxatdan o'tkazadi.
• CSS kodi tanlangan matnni sariq fon va qora matn rangi bilan uslublash uchun ::highlight(myHighlight) psevdo-elementidan foydalanadi.

2-misol: Muayyan so'zlarni ajratib ko'rsatish

Ushbu misol paragrafdagi muayyan so'zlarni qanday ajratib ko'rsatishni ko'rsatadi.

HTML:

            <p id="myText">Bu ajratib ko'rsatmoqchi bo'lgan ajratma so'zi bo'lgan paragraf.</p>
            

              
                Copy
              
            
          

JavaScript:

            const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['highlight'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}
            

              
                Copy
              
            
          

Tushuntirish:

• JavaScript kodi paragrafdagi so'zlar bo'ylab takrorlanadi va "highlight" so'zining indekslarini aniqlaydi.
• Har bir hodisa uchun u Range ob'ektini yaratadi va uni Highlight ob'ektiga qo'shadi.
• CSS kodi ajratilgan so'zlarni och yashil fon va qalin shrift og'irligi bilan uslublaydi.

3-misol: Foydalanuvchi kiritishi asosida dinamik ajratma

Ushbu misol qidiruv qutisidagi foydalanuvchi kiritishi asosida matnni dinamik ravishda qanday ajratib ko'rsatishni ko'rsatadi.

HTML:

            <input type="text" id="searchInput" placeholder="Ajratish uchun matnni kiriting">
<p id="myText">Bu foydalanuvchi kiritishi asosida dinamik ravishda ajratib ko'rsatiladigan matn.</p>
            

              
                Copy
              
            
          

JavaScript:

            const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // Oldingi ajratmalarni tozalash

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});
            

              
                Copy
              
            
          

CSS:

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

              
                Copy
              
            
          

Tushuntirish:

• JavaScript kodi qidiruv qutisidagi kiritish o'zgarishlarini tinglaydi.
• U har qanday mavjud ajratmalarni tozalaydi va keyin paragraf ichida kiritilgan matnni qidiradi.
• Har bir hodisa uchun u Range ob'ektini yaratadi va uni Highlight ob'ektiga qo'shadi.
• CSS kodi dinamik ravishda ajratilgan matnni sariq fon va qora matn rangi bilan uslublaydi.

4-misol: ::highlight() bilan ajratma ko'rinishini sozlash

Custom Highlight API ning kuchi ajratilgan matnning ko'rinishini sozlash qobiliyatida yotadi. Soyalar, gradientlar va boshqa vizual effektlarni qanday qo'llashingiz mumkin.

HTML:

            <p id="customText">Maxsus ajratma effektini ko'rish uchun ushbu matnni tanlang.</p>
            

              
                Copy
              
            
          

JavaScript:

            const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}
            

              
                Copy
              
            
          

Tushuntirish:

• Ushbu misol ajratilgan matnga chiziqli gradient fon, oq matn, matn soyasi, yumaloq burchaklar va to'ldirishni qo'llaydi.
• Bu vizual jihatdan jozibali va noyob tanlash uslublariga erishish uchun ::highlight() psevdo-elementi ichida standart CSS xususiyatlaridan qanday foydalanish mumkinligini ko'rsatadi.

Qulaylik masalalari

Matn tanlashlarining vizual ko'rinishini yaxshilash muhim bo'lsa-da, qulaylik har doim asosiy e'tibor bo'lishi kerak. Maxsus ajratma uslublaringizning qulayligini ta'minlash uchun ba'zi ko'rsatmalar:

• Rang kontrasti: Ajratilgan matnning fon va matn rangi o'rtasida etarli kontrastni ta'minlang. Qulaylik standartlariga (WCAG) muvofiqligini tekshirish uchun WebAIM Contrast Checker kabi vositalardan foydalaning.
• Vizual ko'rsatmalar: Tanlangan matn uchun aniq vizual ko'rsatmalarni taqdim eting. Ko'rish qobiliyati cheklangan foydalanuvchilar uchun qiyin bo'lishi mumkin bo'lgan nozik rang o'zgarishlaridan saqlaning.
• Klaviatura navigatsiyasi: Maxsus ajratma uslublari klaviatura navigatsiyasiga xalaqit bermasligiga ishonch hosil qiling. Foydalanuvchilar klaviaturadan foydalanib matnni osongina tanlashi va navigatsiya qilishi kerak.
• Ekran o'quvchi mosligi: Tanlangan matn to'g'ri e'lon qilinishini ta'minlash uchun maxsus ajratma uslublaringizni ekran o'quvchilari bilan sinab ko'ring.

Brauzer mosligi

CSS Custom Highlight API nisbatan yangi veb-standart bo'lib, brauzer mosligi farq qilishi mumkin. 2023-yil oxiri/2024-yil boshiga kelib, qo'llab-quvvatlash o'sib bormoqda, lekin universal tarzda amalga oshirilmagan. Moslik yangiliklari haqida xabardor bo'lish uchun "Can I use..." kabi veb-saytlarda joriy brauzer qo'llab-quvvatlash holatini tekshirishingiz mumkin.

API ni qo'llab-quvvatlamaydigan brauzerlar uchun qaytarilgan uslublarni taqdim etish uchun funksiya aniqlashdan foydalanishni o'ylab ko'ring.

            if ('CSS' in window && 'highlights' in CSS) {
  // Custom Highlight API dan foydalaning
} else {
  // ::selection yordamida qaytarilgan uslublarni taqdim eting
}
            

              
                Copy
              
            
          

Haqiqiy dunyo foydalanish holatlari

CSS Custom Highlight API ning ko'plab haqiqiy dunyo ilovalari mavjud, jumladan:

• Kod muharrirlari: Kod muharrirlarida sintaksis elementlarini, xatolarni va ogohlantirishlarni ajratib ko'rsating.
• E-o'qitish platformalari: Ta'lim materiallarida asosiy tushunchalar va ta'riflarni ta'kidlang.
• Hujjat ko'ruvchilari: Foydalanuvchilarga hujjatlardagi matnni ajratib ko'rsatish va izohlash imkonini bering.
• Qidiruv natijalari: Qidiruv natijalari ichida qidiruv atamalarini ajratib ko'rsating.
• Ma'lumotlarni vizualizatsiya qilish: Diagrammalar va grafiklarda ma'lumotlarning muayyan nuqtalarini yoki tendentsiyalarini ajratib ko'rsating.

Eng yaxshi amaliyotlar va maslahatlar

• Tavsiflovchi ajratma nomlaridan foydalaning: Ajratish maqsadini aniq ko'rsatadigan ajratma nomlarini tanlang.
• Kerak bo'lganda ajratmalarni tozalang: Kutilmagan uslublash muammolarini oldini olish uchun kerak bo'lmaganda ajratmalarni tozalashni unutmang.
• Ishlashni optimallashtiring: Haddan tashqari ajratma diapazonlarini yaratishdan saqlaning, chunki bu ishlashga ta'sir qilishi mumkin.
• Yaxshilab sinovdan o'tkazing: Moslik va qulaylikni ta'minlash uchun maxsus ajratma uslublaringizni turli brauzerlar va qurilmalarda sinab ko'ring.
• Qaytariladigan narsalarni hisobga oling: Custom Highlight API ni qo'llab-quvvatlamaydigan brauzerlar uchun qaytariladigan uslublarni taqdim eting.

Ilg'or usullar

1. Bir nechta ajratmalarni birlashtirish

Ko'proq murakkab uslublash effektlarini yaratish uchun bir nechta ajratmalarni birlashtirishingiz mumkin. Misol uchun, siz turli uslublar bilan ham kalit so'zlarni, ham foydalanuvchi tomonidan tanlangan matnni ajratib ko'rsatmoqchi bo'lishingiz mumkin.

2. Ajratmalarni yangilash uchun hodisalardan foydalanish

Foydalanuvchi o'zaro ta'sirlari asosida ajratma diapazonlarini dinamik ravishda yangilash uchun sichqonchani bosish yoki bosish kabi JavaScript hodisalaridan foydalanishingiz mumkin.

3. Uchinchi tomon kutubxonalari bilan integratsiya qilish

Ko'proq murakkab ajratish yechimlarini yaratish uchun Custom Highlight API ni uchinchi tomon kutubxonalari bilan birlashtirishingiz mumkin. Misol uchun, hujjatdagi asosiy atamalarni avtomatik ravishda aniqlash va ajratish uchun siz tabiiy tilni qayta ishlash (NLP) kutubxonasidan foydalanishingiz mumkin.

Matn tanlash uslubining kelajagi

CSS Custom Highlight API matn tanlash uslubida sezilarli yutuqni ifodalaydi. Bu dasturchilarga yanada qiziqarli, qulay va kontekstga bog'liq foydalanuvchi interfeyslarini yaratish imkonini beradi. Brauzerlarni qo'llab-quvvatlash o'sishda davom etar ekan, Custom Highlight API butun dunyo bo'ylab veb-ishlab chiquvchilar uchun muhim vositaga aylanishga tayyor.

Xulosa

CSS Custom Highlight API matnni tanlash tajribasini sozlash uchun imkoniyatlar olamini ochadi. Asosiy tushunchalarni tushunish, amaliy misollarni o'rganish va qulaylik ko'rsatmalarini hisobga olish orqali siz ushbu kuchli API dan foydalanib, chindan ham ajoyib foydalanuvchi interfeyslarini yaratishingiz mumkin. Custom Highlight API ni qabul qiling va veb-ishlab chiqish loyihalarini yangi cho'qqilarga ko'taring.

Taqdim etilgan misollar bilan tajriba o'tkazing, ularni o'z ehtiyojlaringizga moslashtiring va CSS Custom Highlight API ning to'liq imkoniyatlarini o'rganing. Sizning foydalanuvchilaringiz tafsilotlarga e'tiborni va yaxshilangan foydalanuvchi tajribasini qadrlashadi.