CSS Custom Highlight Range: Matnni Belgilash Uslublarini Kengaytirilgan Sozlash

Matnni belgilash - bu internetdagi asosiy o'zaro ta'sir. Foydalanuvchi veb-sahifadagi matnni tanlaganda, brauzer odatda oq matnli ko'k fondan iborat standart belgilash uslubini qo'llaydi. Bu funksional bo'lsa-da, standart uslub ko'pincha veb-saytning dizayn estetikasi bilan mos kelmasligi mumkin. CSS Custom Highlight Range ushbu standart uslublarni bekor qilish va vizual jihatdan izchil va qiziqarli foydalanuvchi tajribasini yaratishning kuchli usulini taqdim etadi.

Matnni Belgilash Asoslarini Tushunish

Maxsus belgilash diapazonlariga kirishdan oldin, brauzerlarda matnni belgilash qanday ishlashini tushunish muhim. Foydalanuvchi sichqonchani sudrab (yoki boshqa kiritish usullaridan foydalanib) matnni tanlaganda, brauzer tanlangan matn diapazonini aniqlaydi va standart belgilash uslubini qo'llaydi. Bu brauzerning ichki renderlash mexanizmi tomonidan boshqariladi va odatda CSS bilan to'g'ridan-to'g'ri nazorat qilinmaydi.

Standart Belgilash Uslubi

Standart matnni belgilash uslubi brauzerning foydalanuvchi agenti uslublar jadvali (user agent stylesheet) tomonidan boshqariladi. Bu uslublar jadvali barcha HTML elementlari uchun asosiy uslublarni, jumladan, standart belgilash uslubini taqdim etadi. Amaldagi ranglar va uslublar brauzerlar va operatsion tizimlar o'rtasida biroz farq qilishi mumkin.

::selection Psevdo-elementi bilan tanishuv

CSS tanlangan matnni nishonga olish uchun ::selection psevdo-elementini taqdim etadi. Bu sizga tanlangan matnning background-color va color xususiyatlarini o'zgartirishga imkon beradi. Biroq, bu yondashuvning cheklovlari bor. U faqat fon va matn rangini o'zgartirishga imkon beradi va belgilash diapazoni ustidan yanada nozikroq nazoratni taklif qilmaydi.

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

            

              
                Copy
              
            
          

Bu oddiy CSS parchasi tanlangan matnning fon rangini sariqqa va matn rangini qoraga o'zgartiradi. Bu foydali bo'lsa-da, bu aysbergning faqat uchi.

CSS Custom Highlight Range API

CSS Custom Highlight Range API matnni belgilash uslublarini sozlashning yanada ilg'or va moslashuvchan usulini taqdim etadi. Bu API sizga aniq belgilash diapazonlarini aniqlash va ularga maxsus uslublarni qo'llash imkonini beradi. Bu, ayniqsa, vizual jihatdan jozibali va foydalanuvchi uchun qulay interfeyslarni yaratishda foydalidir.

Asosiy Tushunchalar

• Highlight API: Maxsus uslublash imkonini beruvchi asosiy texnologiya.
• Highlight Regions: Maxsus uslublash uchun nishonga olingan matnning aniq diapazonlari.
• Custom Styles: Highlight hududlariga qo'llaniladigan CSS xususiyatlari (faqat rang va fon rangidan tashqari).

CSS Custom Highlight Range-dan Foydalanishning Afzalliklari

• Kengaytirilgan sozlash: Gradientlar, chegaralar, soyalar va boshqalar kabi kengroq CSS xususiyatlarini qo'llash.
• Yaxshilangan foydalanuvchi tajribasi: Veb-saytingiz dizayni bilan mos keladigan yanada jozibali va izchil matn belgilash uslublarini yaratish.
• Qulaylik: Yetarli kontrast va aniq vizual belgilarni ta'minlash orqali maxsus belgilash uslublaringiz ko'rish qobiliyati cheklangan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qilish.
• Nozik nazorat: Aniqroq va kontekstga mos belgilash uchun maxsus uslublash uchun matnning aniq diapazonlarini nishonga olish.

CSS Custom Highlight Range-ni Amalga Oshirish

CSS Custom Highlight Range-ni amalga oshirish siz uslub bermoqchi bo'lgan matn diapazonlarini aniqlash uchun JavaScript-dan foydalanishni va keyin ushbu diapazonlarga kerakli CSS xususiyatlarini qo'llashni o'z ichiga oladi.

1-qadam: Matn Diapazonini Tanlash

Birinchi qadam - siz uslub bermoqchi bo'lgan matn diapazonini aniqlash. Buni turli JavaScript usullari yordamida amalga oshirish mumkin, masalan:

• document.getSelection(): Bu usul foydalanuvchi tomonidan tanlangan matn diapazonini ifodalovchi Selection obyektini qaytaradi.
• Range API: Bu API dasturiy ravishda matn diapazonlarini yaratish va boshqarish imkonini beradi.

document.getSelection() yordamida misol:

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Endi sizda ishlash uchun diapazon obyekti bor
}

            

              
                Copy
              
            
          

Range API yordamida misol:

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Endi sizda element ichidagi barcha tarkibni tanlaydigan diapazon mavjud

            

              
                Copy
              
            
          

2-qadam: Highlight Obyektini Yaratish

Range obyektingiz bo'lgandan so'ng, siz highlight obyektini yaratishingiz kerak. Bu obyekt maxsus belgilashni ifodalaydi va kerakli uslublarni qo'llash uchun ishlatiladi.

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

3-qadam: Highlight-ni Ro'yxatdan O'tkazish

Highlight-ni ko'rinadigan qilish uchun uni CSS.highlights obyekti bilan ro'yxatdan o'tkazishingiz kerak. Bu sahifadagi barcha maxsus belgilashlarni boshqaradigan global obyekt.

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API ushbu brauzerda qo\'llab-quvvatlanmaydi.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

Bu yerda, 'my-custom-highlight' - bu siz o'z belgilashingizni aniqlash uchun tanlagan ixtiyoriy nom.

4-qadam: CSS yordamida Maxsus Uslublarni Qo'llash

Nihoyat, siz o'zingizning CSS-ingizda ::highlight() psevdo-elementidan foydalanib, belgilashga maxsus uslublar qo'llashingiz mumkin.

            
::highlight(my-custom-highlight) {
  background-color: rgba(255, 200, 0, 0.5);
  color: #333;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Ushbu CSS parchasi 'my-custom-highlight' diapazonidagi matnga yarim shaffof sariq fon, to'q kulrang matn, qalin shrift og'irligi va yengil matn soyasini qo'llaydi.

To'liq Misol

Bu yerda CSS Custom Highlight Range-dan qanday foydalanishni ko'rsatuvchi to'liq misol keltirilgan:

HTML:

            
Bu tanlanishi mumkin bo'lgan matn. Biz CSS Custom Highlight Range yordamida belgilash uslubini sozlaymiz.

            

              
                Copy
              
            
          

JavaScript:

            
const textElement = document.getElementById('myText');

textElement.addEventListener('mouseup', () => {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const highlight = new Highlight(range);

    if (!window.CSS.highlights) {
      console.error('CSS Custom Highlight API ushbu brauzerda qo\'llab-quvvatlanmaydi.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS:

            
::highlight(custom-selection) {
  background-color: lightgreen;
  color: darkgreen;
  font-style: italic;
}

            

              
                Copy
              
            
          

Ushbu misolda, foydalanuvchi paragraf ichidagi matnni tanlab, sichqoncha tugmasini qo'yib yuborganda, JavaScript kodi highlight yaratadi va uni ro'yxatdan o'tkazadi. Keyin CSS tanlangan matnga och yashil fon, to'q yashil matn rangi va kursiv shrift uslubini qo'llaydi.

Ilg'or Sozlash Texnikalari

CSS Custom Highlight Range yanada ilg'or sozlash usullarini, jumladan, quyidagilarni taqdim etadi:

Gradientlardan Foydalanish

Siz vizual jihatdan ajoyib belgilash effektlarini yaratish uchun CSS gradientlaridan foydalanishingiz mumkin.

            
::highlight(gradient-highlight) {
  background-image: linear-gradient(to right, #f00, #ff0);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

Chegaralar va Soyalar Qo'shish

Siz belgilashni yanada ko'zga ko'rinarli qilish uchun unga chegaralar va soyalar qo'shishingiz mumkin.

            
::highlight(border-highlight) {
  background-color: rgba(0, 0, 255, 0.2);
  border: 2px solid blue;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  color: black;
}

            

              
                Copy
              
            
          

Shartli Belgilash

Siz ma'lum shartlarga asoslanib, belgilash uslublarini dinamik ravishda o'zgartirish uchun JavaScript-dan foydalanishingiz mumkin. Masalan, har xil turdagi matnlarni turli xil ranglar bilan belgilashingiz mumkin.

            
// Misol: Kalit so'zlarni boshqa rangda belgilash
const keywords = ['keyword1', 'keyword2', 'keyword3'];

// (Kalit so'zlarni topish va diapazonlarni yaratish uchun implementatsiya shu yerda bo'ladi)

// Keyin, CSS-da:
::highlight(keyword-highlight) {
  background-color: yellow;
  color: red;
}

            

              
                Copy
              
            
          

Qulaylik Masalalari

Maxsus belgilash uslublarini amalga oshirishda qulaylikni hisobga olish juda muhim. Belgilash uslublaringiz ko'rish qobiliyati cheklangan foydalanuvchilar uchun yetarli kontrast va aniq vizual belgilarni ta'minlashiga ishonch hosil qiling.

Kontrast Nisbati

Belgilash uslublaringizdagi fon rangi va matn rangi o'rtasidagi kontrast nisbati WCAG (Web Content Accessibility Guidelines) talablariga javob berishiga ishonch hosil qiling. Oddiy matn uchun kamida 4.5:1, katta matn uchun esa 3:1 kontrast nisbati tavsiya etiladi.

Vizual Belgilar

Matn tanlanganligini ko'rsatish uchun aniq vizual belgilar taqdim eting. Buni ajralib turadigan ranglar, chegaralar yoki soyalar yordamida amalga oshirish mumkin.

Yordamchi Texnologiyalar bilan Sinov

Maxsus belgilash uslublaringiz barcha foydalanuvchilar uchun qulay ekanligiga ishonch hosil qilish uchun ularni ekran o'quvchilari kabi yordamchi texnologiyalar bilan sinab ko'ring.

Brauzer Muvofiqligi

CSS Custom Highlight Range API nisbatan yangi texnologiya bo'lib, brauzerlarda qo'llab-quvvatlash farq qilishi mumkin. 2023-yil oxiriga kelib, u Chromium asosidagi brauzerlarda (Chrome, Edge, Brave) va Safari (Technology Preview) da qo'llab-quvvatlanadi. Firefox qiziqish bildirgan, ammo qo'llab-quvvatlash hali amalga oshirilmagan.

Ushbu API-ni ishlab chiqarishda ishlatishdan oldin eng so'nggi brauzer muvofiqligi ma'lumotlarini tekshirish muhim. Siz CSS Custom Highlight Range uchun brauzer qo'llab-quvvatlashini kuzatish uchun "Can I use..." kabi veb-saytlardan foydalanishingiz mumkin.

API-ni qo'llab-quvvatlamaydigan brauzerlar uchun zaxira sifatida ::selection psevdo-elementidan foydalanishingiz mumkin.

Foydalanish Holatlari va Misollar

Bu yerda CSS Custom Highlight Range-dan qanday foydalanish mumkin bo'lgan ba'zi amaliy foydalanish holatlari va misollar keltirilgan:

Kod Muharrirlari

O'qish qulayligi va vizual jozibadorlikni oshirish uchun kod muharririda tanlangan kod uchun belgilash uslublarini sozlang. Turli dasturlash tillari hatto turli xil belgilash sxemalariga ega bo'lishi mumkin.

Hujjat Ko'ruvchilar

Hujjat dizayniga mos keladigan maxsus belgilash uslublarini taqdim etish orqali hujjat ko'ruvchilarning foydalanuvchi tajribasini yaxshilang.

E-ta'lim Platformalari

Asosiy tushunchalarni yoki muhim ma'lumotlarni maxsus uslubda belgilash orqali interaktiv o'quv tajribalarini yarating.

Qidiruv Natijalarini Belgilash

Mos keladigan atamalarni alohida maxsus uslub bilan belgilash orqali qidiruv natijalarining ko'rinishini yaxshilang. Bu ko'p tilli qidiruvda qanday ko'rinishi mumkinligini o'ylab ko'ring, bu yerda belgilash ranglari mos kelgan atamaning tilini nozik tarzda ko'rsatishi mumkin.

Annotatsiya Asboblari

Foydalanuvchilarga muhim parchalarni belgilash yoki eslatmalar qo'shish uchun matnni maxsus belgilash uslublari bilan izohlashga ruxsat bering. Turli foydalanuvchilarga hamkorlikdagi annotatsiya uchun turli xil belgilash ranglari tayinlanishi mumkin.

Eng Yaxshi Amaliyotlar

• Semantik HTML-dan foydalaning: Kontentingizni tuzish uchun semantik HTML elementlaridan foydalaning. Bu siz uslub bermoqchi bo'lgan matn diapazonlarini aniqlashni osonlashtiradi.
• Oddiy saqlang: Juda murakkab yoki chalg'ituvchi belgilash uslublaridan foydalanishdan saqlaning. Maqsad foydalanuvchi tajribasini yaxshilash, foydalanuvchini chalg'itmaslikdir.
• Puxta sinovdan o'tkazing: Maxsus belgilash uslublaringiz kutilganidek ishlashiga ishonch hosil qilish uchun ularni turli brauzerlar va qurilmalarda sinab ko'ring.
• Ishlash samaradorligini hisobga oling: Juda ko'p belgilash diapazonlarini yaratishdan saqlaning, chunki bu ishlashga ta'sir qilishi mumkin. Matn diapazonlarini samarali aniqlash va uslublash uchun JavaScript kodingizni optimallashtiring.

Xulosa

CSS Custom Highlight Range internetdagi matn tanlovlarini uslublash uchun kuchli va moslashuvchan usulni taklif etadi. Ushbu API yordamida siz foydalanuvchi tajribasini yaxshilaydigan va veb-saytingiz dizayni bilan mos keladigan vizual jihatdan jozibali va foydalanuvchi uchun qulay interfeyslarni yaratishingiz mumkin. Brauzerlarni qo'llab-quvvatlash hali rivojlanayotgan bo'lsa-da, ushbu texnologiyaning potentsial afzalliklari uni veb-dasturchilar va dizaynerlar uchun qimmatli vositaga aylantiradi. Maxsus belgilash uslublarini amalga oshirishda qulaylik va ishlash samaradorligiga ustunlik berishni unutmang. Internet rivojlanishda davom etar ekan, CSS Custom Highlight Range kabi xususiyatlar foydalanuvchi tajribasini shakllantirishda tobora muhim rol o'ynaydi.