CSS Maxsus Belgilash Kesişmasi: Bir Necha Tanlovlar Ustma-ust Tushishini Boshqarish

CSS-dagi ::highlight psevdo-elementi matn tanlovlarini uslublash ustidan kuchli nazoratni taqdim etadi. Oddiy matnni belgilash oson bo‘lsa-da, bir nechta tanlov kesishmasini boshqarish va ularning ustma-ust tushgan joylarini sozlash chuqurroq tushunishni talab qiladi. Ushbu maqola CSS maxsus belgilash kesishmasini o‘zlashtirish uchun ilg‘or texnikalarni o‘rganadi, mukammal va qulay foydalanuvchi interfeyslarini yaratish uchun amaliy misollar va foydali ma’lumotlar beradi.

Asoslarni Tushunish: ::highlight Psevdo-elementi

::highlight psevdo-elementi foydalanuvchi tomonidan tanlangan matnni uslublash imkonini beradi. Bu imkoniyat oddiy fon ranglari va matn ranglaridan tashqariga chiqadi; u dasturchilarga tanlangan matnga chegaralar, soyalar va hatto animatsiyalarni o‘z ichiga olgan keng doiradagi CSS xususiyatlarini qo‘llash imkonini beradi. Bu faqat brauzerning standart belgilashiga tayanishdan ancha katta yutuqdir, chunki u ko‘pincha nomuvofiq va har doim ham veb-sayt dizayniga mos kelmaydi.

Asosiy Sintaksis

::highlight dan foydalanishning asosiy sintaksisi muayyan Selection obyektlarini CSS selektorlari yoki CSS Custom Highlight API orqali nishonga olishni o‘z ichiga oladi.

Mana oddiy misol:

            ::highlight {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

Ushbu kod parchasi har qanday tanlangan matnning fon rangini sariqqa va matn rangini qoraga o‘zgartiradi. Bu sahifadagi barcha tanlovlarga qo‘llaniladigan global uslubdir. Muayyan tanlovlarni nishonga olish uchun CSS Custom Highlight API-dan foydalanishingiz kerak.

CSS Custom Highlight API: Aniq Nazorat

CSS Custom Highlight API matn tanlovlarini boshqarish va uslublashning yanada aniqroq usulini taqdim etadi. U nomlangan belgilashlar yaratish va ularga maxsus uslublar qo‘llash imkonini beradi. Bu, ayniqsa, turli xil tanlov turlarini farqlash kerak bo‘lganda yoki ustma-ust tushgan tanlovlar bilan ishlaganda foydalidir.

Nomlangan Belgilashlarni Yaratish va Qo‘llash

CSS Custom Highlight API-dan foydalanish uchun siz nomlangan belgilashlarni yaratish va qo‘llash uchun JavaScript-dan foydalanishingiz kerak bo‘ladi. Mana qadam-baqadam qo‘llanma:

1. Nomlangan Belgilashni Ro‘yxatdan O‘tkazish: Belgilashingizni uslublash uchun ishlatiladigan maxsus xususiyatni ro‘yxatdan o‘tkazish uchun CSS.registerProperty() dan foydalaning. Bu odatda skriptingiz boshida bir marta amalga oshiriladi.
2. Diapazon Yaratish: Range obyektlari yordamida belgilamoqchi bo‘lgan matnning boshlanish va tugash nuqtalarini aniqlang.
3. Tanlov Obyektini Olish: Joriy tanlovni window.getSelection() yordamida oling.
4. Diapazonni Tanlovga Qo‘shish: Diapazonni tanlovga qo‘shish uchun addRange() usulidan foydalaning. Bu ko‘pincha avval removeAllRanges() yordamida barcha mavjud diapazonlarni olib tashlash bilan birga ishlatiladi.
5. Uslublarni Qo‘llash: Belgilash uchun uslubni aniqlang. Bu CSS o‘zgaruvchilarini o‘rnatishni o‘z ichiga olishi mumkin.

Mana bu jarayonni namoyish etuvchi misol:

            // Register the highlight property (run once)
CSS.registerProperty({
  name: '--my-highlight-color',
  syntax: '',
  inherits: false,
  initialValue: 'rgba(255, 165, 0, 0.5)' // Semi-transparent orange
});

// Function to apply the highlight
function applyHighlight(startNode, startOffset, endNode, endOffset, highlightName) {
  // 1. Create a Range object
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);

  // 2. Get the Selection object
  const selection = window.getSelection();

  // 3. Clear existing selections and add the new range
  selection.removeAllRanges();
  selection.addRange(range);

  // 4. Apply the highlight using ::highlight(highlightName) in CSS
  //   No JavaScript needed for direct styling, CSS handles the look
}

// Example usage:
const myElement = document.getElementById('my-text-element');
// Assuming myElement contains the text you want to highlight
applyHighlight(myElement.firstChild, 5, myElement.firstChild, 15, 'my-highlight');

            

              
                Copy
              
            
          

Va unga mos keladigan CSS:

            ::highlight(my-highlight) {
  background-color: var(--my-highlight-color);
}

            

              
                Copy
              
            
          

Ushbu misolda biz --my-highlight-color maxsus xususiyatini ro‘yxatdan o‘tkazmoqdamiz, so‘ngra `my-text-element` ichidagi 5-belgidan 15-belgigacha bo‘lgan matnni belgilayapmiz. Keyin CSS ro‘yxatdan o‘tgan xususiyatdan fon rangini o‘rnatish uchun foydalanadi.

Matn Diapazonlari uchun Xalqaro Jihatlar

Turli tillardagi matn diapazonlari bilan ishlaganda, Unicode va belgilar kodirovkasini hisobga olish juda muhim. startOffset va endOffset qiymatlari belgi indekslarini ifodalaydi, bu ko‘p baytli belgilar yoki grafema klasterlarini ishlatadigan tillar bilan muammoli bo‘lishi mumkin. Masalan, ba’zi Sharqiy Osiyo tillarida bitta belgi bir nechta bayt bilan ifodalanishi mumkin. Belgilashlaringiz turli tillarda to‘g‘ri qo‘llanilishini ta’minlash uchun Unicode bilan to‘g‘ri ishlaydigan kutubxonalardan foydalanishingiz kerak bo‘lishi mumkin.

Bundan tashqari, matn yo‘nalishi (chapdan o‘ngga va o‘ngdan chapga) ham diapazonlarning hisoblanishi va qo‘llanilishiga ta’sir qilishi mumkin. To‘g‘ri ishlash va render qilishni ta’minlash uchun belgilash ilovangizni turli tillar va yozuvlar bilan sinab ko‘ring.

Bir Necha Tanlov Ustma-ust Tushishini Boshqarish

Haqiqiy qiyinchilik ustma-ust tushadigan bir nechta tanlovlar bilan ishlaganda yuzaga keladi. Ustma-ust tushadigan tanlovlar uchun brauzerning standart xatti-harakati oldindan aytib bo‘lmaydigan bo‘lishi mumkin va ko‘pincha kerakli vizual effektni bermaydi. CSS Custom Highlight API bu ustma-ust tushishni boshqarish uchun vositalarni taqdim etadi, bu sizga turli belgilashlarning o‘zaro ta’sirini nazorat qilish imkonini beradi.

Muammoni Tushunish

Bir nechta tanlovlar ustma-ust tushganda, brauzer odatda oxirgi qilingan tanlovning uslublarini qo‘llaydi. Bu vizual nomuvofiqliklarga va chalkash foydalanuvchi tajribasiga olib kelishi mumkin. Masalan, agar sizda ikkita ustma-ust tushgan belgilash, biri yashil va biri ko‘k bo‘lsa, ustma-ust tushgan joy faqat ko‘k belgilashni ko‘rsatib, yashilini butunlay yashirishi mumkin. Buni hal qilish uchun siz ustma-ust tushishni bartaraf etish strategiyasini amalga oshirishingiz kerak.

Ustma-ust Tushishni Hal Qilish Strategiyalari

Ustma-ust tushgan belgilashlarni hal qilish uchun siz bir nechta strategiyalardan foydalanishingiz mumkin:

• Ustuvorlikni Belgilash: Turli xil belgilash turlariga har xil ustuvorliklar bering. Eng yuqori ustuvorlikka ega bo‘lgan belgilash ustma-ust tushgan joyda ustunlikka ega bo‘ladi.
• Aralashtirish: Yangi rang hosil qilish uchun ustma-ust tushgan belgilashlar ranglarini aralashtiring. Bu bir nechta tanlov mavjudligini ko‘rsatishning vizual jozibador usulini taqdim etishi mumkin.
• Qatlamlash: Belgilashlarning joylashish tartibini nazorat qilish uchun z-index kabi CSS xususiyatlaridan foydalaning. Bu sizga bir belgilash boshqasining ustida paydo bo‘ladigan qatlamli effekt yaratish imkonini beradi.
• Maxsus Renderlash: Murakkab stsenariylar uchun siz ustma-ust tushgan diapazonlarni tahlil qilish va bir nechta tanlov mavjudligini ko‘rsatish uchun chegaralar yoki ikonlar kabi maxsus vizual elementlarni renderlash uchun JavaScript-dan foydalanishingiz mumkin.

Ustuvorlikni Amalga Oshirish

Ustuvorlikni belgilash har bir belgilashga ustuvorlik darajasini berishni va ustma-ust tushgan joyda eng yuqori ustuvorlikka ega bo‘lgan belgilashning ko‘rsatilishini ta’minlashni o‘z ichiga oladi. Bunga belgilashlar qo‘llanilish tartibini diqqat bilan boshqarish va ularning ko‘rinishini nazorat qilish uchun CSS-dan foydalanish orqali erishish mumkin.

Mana CSS o‘zgaruvchilari va JavaScript yordamida ustuvorlikni qanday amalga oshirishingiz mumkinligiga misol:

            // Define highlight priorities
const highlightPriorities = {
  'important-highlight': 2,
  'secondary-highlight': 1,
  'default-highlight': 0
};

// Function to apply a highlight with a specific priority
function applyHighlightWithPriority(startNode, startOffset, endNode, endOffset, highlightName) {
  // (Same range creation and selection logic as before)
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  // Apply the highlight name to a custom property on the selection.
  // No direct CSS manipulation here; relies on the CSS below.
  //  This requires polyfilling for browsers lacking CSS.supports.
  //  Also, use caution with the security implications of setting
  //  arbitrary styles via JavaScript and make sure only trusted code can do this.
  let priority = highlightPriorities[highlightName] || 0;

  if (CSS.supports('selector(::highlight(' + highlightName + ''))')) {
      // No need to directly manipulate the style object if CSS.supports is available
      // The CSS will handle the rest based on the selection.
  }
  else {
      // Fallback behavior, apply styles directly.  This is NOT recommended
      //  for production code, as it's difficult to manage and maintain.
      //   It is better to use the CSS Custom Highlight API with a polyfill, or simply
      //   gracefully degrade the highlighting feature if the browser doesn't support it.
      console.warn("CSS.supports not supported, direct style manipulation may be needed");
  }

}

            

              
                Copy
              
            
          

Va unga mos keladigan CSS:

            ::highlight(default-highlight) {
  background-color: lightgray;
  z-index: 0; // Lowest priority
}

::highlight(secondary-highlight) {
  background-color: lightblue;
  z-index: 1;
}

::highlight(important-highlight) {
  background-color: orange;
  z-index: 2; // Highest priority
}

/* Use to address z-index issues in some browsers*/
::highlight {
  position: relative;
}

            

              
                Copy
              
            
          

Ushbu misolda har bir belgilash turiga z-index qiymati berilgan, yuqori qiymatlar yuqori ustuvorlikni bildiradi. ::highlight psevdo-elementidagi position: relative e’loni ba’zi brauzerlarda z-index to‘g‘ri ishlashini ta’minlash uchun kerak bo‘lishi mumkin.

Aralashtirishni Amalga Oshirish

Aralashtirish yangi rang hosil qilish uchun ustma-ust tushgan belgilashlar ranglarini birlashtirishni o‘z ichiga oladi. Bunga CSS aralashtirish rejimlari yordamida yoki JavaScript yordamida belgilashlarning fon ranglarini manipulyatsiya qilish orqali erishish mumkin.

Mana CSS aralashtirish rejimlari yordamida aralashtirishni qanday amalga oshirishingiz mumkinligiga misol:

            ::highlight(highlight-1) {
  background-color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
  mix-blend-mode: multiply;
}

::highlight(highlight-2) {
  background-color: rgba(0, 0, 255, 0.5); /* Blue with 50% opacity */
  mix-blend-mode: multiply;
}

            

              
                Copy
              
            
          

Ushbu misolda mix-blend-mode: multiply xususiyati ustma-ust tushgan belgilashlar ranglarini aralashtirish uchun ishlatiladi. Qizil belgilash ko‘k belgilash bilan ustma-ust tushganda, ustma-ust tushgan joydagi yakuniy rang binafsha rang bo‘ladi.

Qatlamlashni Amalga Oshirish

Qatlamlash belgilashlarning joylashish tartibini nazorat qilish uchun z-index kabi CSS xususiyatlaridan foydalanishni o‘z ichiga oladi. Bu sizga bir belgilash boshqasining ustida paydo bo‘ladigan qatlamli effekt yaratish imkonini beradi. Bu yondashuv ustuvorlikni belgilashga o‘xshaydi, lekin vizual uslublash jihatidan ko‘proq moslashuvchanlikni ta’minlaydi.

Ustuvorlikni Amalga Oshirish bo‘limida keltirilgan misol allaqachon z-index yordamida qatlamlashni qanday amalga oshirishni ko‘rsatadi.

Maxsus Renderlashni Amalga Oshirish

Murakkab stsenariylar uchun siz ustma-ust tushgan diapazonlarni tahlil qilish va bir nechta tanlov mavjudligini ko‘rsatish uchun chegaralar yoki ikonlar kabi maxsus vizual elementlarni renderlash uchun JavaScript-dan foydalanishingiz mumkin. Bu yondashuv eng ko‘p moslashuvchanlikni ta’minlaydi, lekin ayni paytda amalga oshirish uchun eng ko‘p harakat talab qiladi.

Mana maxsus renderlashni qanday amalga oshirishingiz mumkinligi haqida yuqori darajadagi umumiy ma’lumot:

1. Ustma-ust Tushgan Diapazonlarni Tahlil Qilish: Tanlovlar bo‘ylab iteratsiya qilish va har qanday ustma-ust tushgan diapazonlarni aniqlash uchun JavaScript-dan foydalaning.
2. Maxsus Elementlar Yaratish: Maxsus vizual elementlarni ifodalash uchun <span> yoki <div> kabi HTML elementlarini yarating.
3. Elementlarni Joylashtirish: JavaScript va CSS yordamida maxsus elementlarni ustma-ust tushgan diapazonlar ustiga aniq joylashtiring.
4. Elementlarni Uslash: Kerakli vizual effektni yaratish uchun elementlarga maxsus uslublar qo‘llang.
5. Elementlarni Kiritish: Maxsus elementlarni DOM-ga joylashtiring, ularning matnga nisbatan to‘g‘ri joylashishini ta’minlang.

Bu yondashuv murakkab bo‘lishi va tafsilotlarga ehtiyotkorlik bilan e’tibor berishni talab qilishi mumkin, lekin u ustma-ust tushgan belgilashlar ko‘rinishi ustidan to‘liq nazoratni ta’minlaydi. Maxsus elementlarning to‘g‘ri joylashishini ta’minlash uchun matnning o‘ralishi va shrift o‘lchamining o‘zgarishi kabi chekka holatlarni hisobga olish muhim.

Qulaylik Masalalari

Matn belgilashlarini sozlashda, veb-saytingiz nogironligi bo‘lgan odamlar tomonidan ishlatilishi mumkinligini ta’minlash uchun qulaylikni hisobga olish juda muhim. Mana ba’zi muhim jihatlar:

• Rang Kontrasti: Belgilash rangi va matn rangi o‘rtasidagi rang kontrasti ko‘rish qobiliyati past odamlar uchun yetarli ekanligiga ishonch hosil qiling. Kontrast nisbati qulaylik standartlariga mos kelishini tekshirish uchun rang kontrasti tekshirgichidan foydalaning. WebAIM’ning kontrast tekshirgichi ajoyib manbadir.
• Klaviatura Navigatsiyasi: Foydalanuvchilar klaviatura yordamida belgilangan matn bo‘ylab harakatlanishi va u bilan o‘zaro aloqada bo‘lishi mumkinligiga ishonch hosil qiling. Bu yordamchi texnologiyalarga semantik ma’lumot berish uchun belgilangan elementlarga ARIA atributlarini qo‘shishni o‘z ichiga olishi mumkin.
• Ekran O‘quvchi Muvofiqligi: Belgilangan matn to‘g‘ri e’lon qilinishini ta’minlash uchun belgilash ilovangizni ekran o‘quvchilari bilan sinab ko‘ring. Foydalanuvchilarga ularning maqsadi va ma’nosini tushunishga yordam berish uchun belgilashlar uchun tavsiflovchi matn taqdim eting.
• Faqat Rangga Tayanishdan Saqlaning: Ma’noni yetkazish uchun faqat rangga tayanmang. Belgilashlar rang ajrata olmaydigan odamlar uchun qulay bo‘lishini ta’minlash uchun chegaralar yoki ikonlar kabi muqobil vizual belgilarni taqdim eting.

Haqiqiy Dunyo Misollari va Qo‘llanilish Holatlari

Maxsus belgilash kesishmasi foydalanuvchi tajribasini yaxshilash uchun turli xil real hayotiy stsenariylarda ishlatilishi mumkin. Mana ba’zi misollar:

• Kod Muharrirlari: Kod muharrirlari sintaksis xatolari, ogohlantirishlar va boshqa muhim ma’lumotlarni ko‘rsatish uchun maxsus belgilashlardan foydalanishi mumkin. Ustma-ust tushgan belgilashlar kodning bir xil hududida bir nechta muammolarni ko‘rsatish uchun ishlatilishi mumkin.
• Hujjat Muharrirlari: Hujjat muharrirlari kuzatilgan o‘zgarishlar, sharhlar va izohlarni ko‘rsatish uchun maxsus belgilashlardan foydalanishi mumkin. Ustma-ust tushgan belgilashlar matnning bir xil qismida bir nechta tahrirlarni ko‘rsatish uchun ishlatilishi mumkin.
• Qidiruv Natijalari: Qidiruv natijalari sahifalari qidiruv natijalari ichidagi qidiruv so‘zlarini ko‘rsatish uchun maxsus belgilashlardan foydalanishi mumkin. Ustma-ust tushgan belgilashlar matnning bir xil hududida paydo bo‘lgan bir nechta qidiruv so‘zlarini ko‘rsatish uchun ishlatilishi mumkin.
• Izohlash Vositalari: Izohlash vositalari foydalanuvchilarga matnni belgilash va izohlash imkonini berish uchun maxsus belgilashlardan foydalanishi mumkin. Ustma-ust tushgan belgilashlar matnning bir xil hududida har xil turdagi izohlarni ko‘rsatish uchun ishlatilishi mumkin.

Eng Yaxshi Amaliyotlar

CSS maxsus belgilash kesishmasini amalga oshirishda rioya qilish kerak bo‘lgan ba’zi eng yaxshi amaliyotlar:

• CSS Custom Highlight API-dan Foydalaning: CSS Custom Highlight API matn tanlovlarini boshqarish va uslublashning eng moslashuvchan va samarali usulini taqdim etadi.
• Qulaylikni Hisobga Oling: Matn belgilashlarini sozlashda har doim qulaylikni hisobga oling. Belgilashlar nogironligi bo‘lgan odamlar tomonidan ishlatilishi mumkinligiga ishonch hosil qiling.
• Puxta Sinovdan O‘tkazing: To‘g‘ri ishlashiga ishonch hosil qilish uchun belgilash ilovangizni turli brauzerlar, qurilmalar va tillarda sinchkovlik bilan sinab ko‘ring.
• Izchil Vizual Uslubdan Foydalaning: Aniq va intuitiv foydalanuvchi tajribasini taqdim etish uchun belgilashlaringiz uchun izchil vizual uslubdan foydalaning.
• Kodingizni Hujjatlashtiring: Uni saqlash va yangilashni osonlashtirish uchun kodingizni aniq va qisqa hujjatlashtiring.

Xulosa

CSS maxsus belgilash kesishmasi vizual jozibador va informatsion foydalanuvchi interfeyslarini yaratish imkonini beruvchi kuchli texnikadir. ::highlight psevdo-elementini va CSS Custom Highlight API-ni o‘zlashtirib, siz matn tanlovlari ko‘rinishini nazorat qilishingiz va uzluksiz va qulay foydalanuvchi tajribasini taqdim etish uchun bir nechta tanlov kesishmasini boshqarishingiz mumkin. Belgilash ilovangiz samarali va foydalanuvchiga qulay bo‘lishini ta’minlash uchun qulaylikka ustuvorlik berishni, puxta sinovdan o‘tkazishni va izchil vizual uslubdan foydalanishni unutmang.

Qo‘shimcha Manbalar

• MDN Web Docs: ::highlight
• MDN Web Docs: CSS Custom Highlight API
• WebAIM Rang Kontrasti Tekshirgichi