CSS Maxsus Ajratish Hodisalarini Boshqarish: Matn Tanlash O'zaro Ta'sirlarini Yaxshilash

Matn tanlash vebdagi asosiy o'zaro ta'sirlardan biridir. Foydalanuvchilar matnni turli sabablarga ko'ra ajratadilar: tarkibni nusxalash, iqtiboslarni ulashish, qidiruvlarni amalga oshirish yoki shunchaki e'tiborni qaratish. Brauzerlar standart matn ajratishni ta'minlasa-da, CSS Maxsus Ajratish API'si bu o'zaro ta'sir ustidan misli ko'rilmagan nazoratni taklif qiladi, bu esa dasturchilarga vizual jozibador, kontekstga mos va yuqori darajada qulay tanlov tajribalarini yaratish imkonini beradi. Ushbu blog posti CSS Maxsus Ajratish API'sining chuqurliklariga kirib, uning imkoniyatlarini o'rganadi va veb-ilovangizni yaxshilash uchun amaliy misollar келтиради.

Standart Matn Tanlash Xususiyatini Tushunish

Standart bo'yicha, brauzerlar tanlangan matnni ::selection pseudo-elementi yordamida uslublaydi. Tashqi ko'rinishni o'zgartirish uchun background-color va color xususiyatlarini o'zgartirishingiz mumkin. Masalan:

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

            

              
                Copy
              
            
          

Ushbu oddiy CSS parchasi foydalanuvchi sahifadagi matnni tanlaganda fon rangini och ko'k rangga va matn rangini qora rangga o'zgartiradi. Biroq, ::selection pseudo-elementining cheklovlari mavjud. U faqat fon va rangni uslublashga imkon beradi, bu esa moslashtirishni cheklaydi. Qo'shimcha ravishda, u tanlov konteksti haqida semantik ma'lumotga ega emas. CSS Maxsus Ajratish API'si bu cheklovlarni bartaraf etadi.

CSS Maxsus Ajratish API'si Bilan Tanishtiruv

CSS Maxsus Ajratish API'si matn tanlovlarini boshqarish uchun yanada mustahkam va moslashuvchan yondashuvni taqdim etadi. U ma'lum shartlar va o'zaro ta'sirlarga asoslangan maxsus ajratishlarni aniqlash va uslublash imkonini beruvchi yangi CSS xususiyatlari va JavaScript API'larini joriy qiladi.

Asosiy Tushunchalar

• Ajratishning Merosxo'rligi: Ajratishlar boshqa CSS xususiyatlariga o'xshash kaskad va merosxo'rlik mexanizmi orqali uslublanadi. Bu shuni anglatadiki, siz ildiz darajasida standart ajratish uslublarini aniqlab, ularni ma'lum elementlar yoki kontekstlar uchun bekor qilishingiz mumkin.
• Ajratish Pseudo-elementi: ::highlight() pseudo-elementi nomlangan ajratishlarga uslublarni qo'llash uchun ishlatiladi.
• JavaScript API: getSelection() va Highlight obyektlari kabi JavaScript API'lari dasturiy ravishda ajratishlarni yaratish, boshqarish va ular bilan o'zaro aloqada bo'lish imkonini beradi.
• Qulaylik: API ARIA atributlari va qulaylikni hisobga oladi, bu esa maxsus ajratishlarning nogironligi bo'lgan foydalanuvchilar tomonidan sezilishi va tushunilishini ta'minlaydi.

Maxsus Ajratishlarni Amalga Oshirish: Qadamma-qadam Qo'llanma

Quyida CSS Maxsus Ajratish API'sidan foydalanib maxsus ajratishlarni amalga oshirish bo'yicha amaliy qo'llanma keltirilgan:

1-qadam: Nomlangan Ajratishlarni Aniqlash

Birinchi navbatda, CSS yordamida nomlangan ajratishni aniqlashingiz kerak. Bu nom ma'lum tanlovlar bilan uslublarni bog'lash uchun ishlatiladi.

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

            

              
                Copy
              
            
          

Ushbu misolda biz yarim shaffof qizil fonga va qora matn rangiga ega `custom-highlight` nomli ajratishni aniqladik. Fon va matn uchun har qanday yaroqli CSS rang qiymatini tanlashingiz mumkin.

2-qadam: JavaScript'da Ajratishlarni Yaratish

Keyin, ajratishni yaratish va qo'llash uchun JavaScript'dan foydalaning. Bu tanlangan matn diapazonini olish va `Highlight` ob'ektini yaratishni o'z ichiga oladi.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // Tanlov mavjud emas
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Bo'sh tanlov
  }

  const highlight = new Highlight(range);

  // Ajratishni hujjatda ro'yxatdan o'tkazish. Bu eksperimental va polyfill yoki brauzer flagini talab qilishi mumkin
  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.');
    // Bu yerda zaxira mexanizmini amalga oshiring, masalan, tanlangan matnni sinf bilan <span> ga o'rash
    // Masalan:
    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(); // Ixtiyoriy: Ajratilgandan so'ng tanlovni tozalash
}

            

              
                Copy
              
            
          

Tushuntirish:

• window.getSelection(): Joriy tanlov ob'ektini oladi.
• selection.rangeCount: Faol tanlov mavjudligini tekshiradi.
• selection.getRangeAt(0): Tanlangan diapazonni oladi.
• new Highlight(range): Diapazondan yangi `Highlight` ob'ektini yaratadi.
• CSS.highlights.set('custom-highlight', highlight): Ajratishni CSS ajratishlar reestrida ro'yxatdan o'tkazadi. Bu avvalroq aniqlangan CSS uslublari bilan JavaScript ajratishini bog'laydigan muhim qadamdir.
• Zaxira Mexanizmi: `CSS.highlights` ni to'liq qo'llab-quvvatlamaydigan brauzerlar uchun muhim zaxira mexanizmini o'z ichiga oladi. Bu sizning funksiyangiz eski brauzerlarda funksionallikni saqlab, muammosiz ishlashini ta'minlaydi.
• selection.removeAllRanges(): Ajratishdan keyin tanlovni tozalaydi. Bu ixtiyoriy va siz xohlagan foydalanuvchi tajribasiga bog'liq.

Ushbu funksiyani tugmani bosish yoki klaviatura yorlig'i kabi hodisa tinglovchisiga biriktirishni unutmang.

3-qadam: Bir Nechta Diapazonlarni Boshqarish (Kesishuvchi Tanlovlar)

API bitta ajratish ichida bir nechta kesishuvchi diapazonlarni boshqara oladi. `Highlight` ob'ektiga bir nechta diapazon qo'shishingiz mumkin:

            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.');
  // Bir nechta diapazonlar uchun zaxira mexanizmini amalga oshirish (murakkabroq)
  // Bu matnni kichikroq spanlarga bo'lishni va uslublarni qo'llashni talab qiladi
  // Bu yanada rivojlangan zaxira amalga oshirishdir va barcha holatlarga mos kelmasligi mumkin
}

            

              
                Copy
              
            
          

Uslub ajratish ichidagi barcha diapazonlarga qo'llaniladi.

Ilg'or Foydalanish Holatlari va Texnikalari

CSS Maxsus Ajratish API'si matn tanlash o'zaro ta'sirlarini yaxshilash uchun keng imkoniyatlar ochadi. Quyida ba'zi ilg'or foydalanish holatlari va texnikalari keltirilgan:

1. Kontekstga Asoslangan Ajratish

Siz tanlangan matnni tahlil qilish va uning mazmuni yoki atrofdagi kontekstga qarab turli ajratish uslublarini qo'llash uchun JavaScript'dan foydalanishingiz mumkin. Masalan, hujjatdagi kalit so'zlarni ma'lum bir rang bilan ajratib ko'rsatishingiz yoki kod parchalarini aniqlab, ajratishingiz mumkin.

            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'; // Kod izohlarini ajratish
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // JavaScript kalit so'zlarini ajratish
  }

  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.');
    // Zaxira amalga oshirish, ehtimol data atributlari va maxsus CSS yordamida
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Har bir ajratish turi uchun CSS uslublarini aniqlang:

            ::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. Qidiruv Natijalarini Ajratish

Siz API'dan hujjat ichidagi qidiruv so'zlarini ajratish uchun foydalanishingiz mumkin. Bu, ayniqsa, qidiruv natijalari sahifalari yoki ilova ichidagi qidiruv funksionalligi uchun foydalidir.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Yoki ma'lum bir element
  const regex = new RegExp(searchTerm, 'gi'); // Global, registrga sezgir emas

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

    // Har bir moslik uchun diapazon yaratish
    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.');
      // Zaxira, yana bir bor, matn tugunlarini ehtiyotkorlik bilan boshqarishni talab qiladi
    }
  }
}

            

              
                Copy
              
            
          

Qidiruv natijasini ajratish uchun CSS uslubini aniqlang:

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

            

              
                Copy
              
            
          

3. Shadow DOM Bilan Integratsiya

CSS Maxsus Ajratish API'si Shadow DOM bilan uzluksiz ishlaydi, bu sizga maxsus ajratish uslublari bilan inkapsulyatsiya qilingan komponentlarni yaratishga imkon beradi. Siz Shadow DOM ichida ajratishlarni aniqlab, ularni komponent ichidagi elementlarga qo'llashingiz mumkin.

4. Qulaylikni Hisobga Olish

Maxsus ajratishlaringiz barcha foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling. Quyidagilarni hisobga oling:

• Rang Kontrasti: WCAG yo'riqnomalariga javob berish uchun ajratilgan fon va matn rangi o'rtasida yetarli rang kontrastini ta'minlang.
• Klaviatura Navigatsiyasi: Foydalanuvchilar ajratilgan matn bo'ylab klaviatura yordamida harakatlana olishiga ishonch hosil qiling.
• Ekran O'quvchilariga Moslik: Tanlangan matn to'g'ri e'lon qilinishini ta'minlash uchun ajratishlaringizni ekran o'quvchilari bilan sinab ko'ring.
• Fokus Ko'rsatkichlari: Ajratilgan element fokus olganda, aniq vizual fokus ko'rsatkichini taqdim eting.

Ajratishlar haqida qo'shimcha semantik ma'lumot berish uchun ARIA atributlaridan foydalanishingiz mumkin. Masalan, ajratilgan bo'limning maqsadini tavsiflash uchun aria-label dan foydalanishingiz mumkin.

5. Mahalliylashtirish va Xalqarolashtirish

Global kontekstda matn tanlash bilan ishlaganda, quyidagilarni hisobga oling:

• Matn Yo'nalishi: Ajratishlaringiz chapdan-o'ngga (LTR) va o'ngdan-chapga (RTL) matn yo'nalishlari bilan to'g'ri ishlashiga ishonch hosil qiling.
• Tilga Xos Qoidalar: Matn tanlash va so'z chegaralari uchun tilga xos qoidalardan xabardor bo'ling.
• Shriftlarni Qo'llab-quvvatlash: Turli tillarda ishlatiladigan belgilarni qo'llab-quvvatlaydigan shriftlardan foydalaning.

6. Ishlash Samaradorligini Optimizatsiya Qilish

Maxsus ajratishlarni qo'llash, ayniqsa, katta hujjatlarda ishlash samaradorligiga ta'sir qilishi mumkin. Quyidagi optimizatsiya texnikalarini ko'rib chiqing:

• Debouncing: Tez tanlovlar paytida ortiqcha hisob-kitoblarni oldini olish uchun ajratish funksiyasini kechiktiring (debounce).
• Keshlashtirish: Keraksiz qayta hisoblashlarni oldini olish uchun hisoblangan ajratish diapazonlarini keshlang.
• Virtualizatsiya: Faqatgina ko'rish maydonida ko'rinadigan ajratishlarni render qilish uchun virtualizatsiya texnikalaridan foydalaning.
• Veb Ishchilar (Web Workers): Asosiy oqimni bloklashdan saqlanish uchun ajratish hisob-kitoblarini veb ishchiga yuklang.

Brauzer Qo'llab-quvvatlashi va Polifillar

CSS Maxsus Ajratish API'si nisbatan yangi bo'lib, barcha brauzerlar tomonidan to'liq qo'llab-quvvatlanmasligi mumkin. Ishlab chiqarishda ishlatishdan oldin so'nggi brauzer moslik jadvallarini tekshiring. Eski brauzerlarni qo'llab-quvvatlash uchun polifildan (polyfill) foydalanishni o'ylab ko'ring. Polifil eski brauzerlarga yangi API'ni tushunish uchun kerakli kodni qo'shadi. Variantlarni topish uchun onlayn "CSS Custom Highlight API Polyfill" deb qidiring.

Xulosa

CSS Maxsus Ajratish API'si dasturchilarga jozibador, kontekstga mos va qulay matn tanlash tajribalarini yaratish imkonini beradi. API imkoniyatlarini tushunib, ushbu blog postida tavsiflangan texnikalarni qo'llash orqali siz veb-ilovangizning foydalanuvchi tajribasini oshirishingiz va foydalanuvchilarga matn bilan o'zaro ishlashning yanada intuitiv va vizual jozibador usulini taqdim etishingiz mumkin. Maxsus ajratishlarni amalga oshirishda qulaylik va ishlash samaradorligiga ustuvorlik berishni, shuningdek, brauzer mosligi va polifil variantlarini hisobga olishni unutmang. Matn tanlash ustidan bunday nozik nazorat dasturchilarga maxsus dastur ehtiyojlari va foydalanuvchi afzalliklariga moslashtirilgan, yanada interaktiv va foydalanuvchiga qulay veb-tajribalarini yaratish imkonini beradi. Brauzerlarni qo'llab-quvvatlash kengaygan sari, CSS Maxsus Ajratish API'si zamonaviy veb-dasturlash uchun ajralmas vositaga aylanishni va'da qiladi.

Qo'shimcha O'rganish Uchun

• MDN Web Docs: Highlight API
• CSS Houdini: Ushbu ilg'or CSS xususiyatlarini yoqadigan CSS Houdini loyihasi haqida ko'proq bilib oling.