CSS Custom Highlight API: تسلط بر استایل‌دهی انتخاب متن

عمل ساده انتخاب متن در یک صفحه وب، کاری است که اکثر کاربران بدون فکر کردن انجام می‌دهند. با این حال، ما به عنوان توسعه‌دهندگان، اغلب به دنبال بهبود حتی ظریف‌ترین تعاملات هستیم. CSS Custom Highlight API به ما این قدرت را می‌دهد که تجربه انتخاب متن را متحول کنیم و کنترل بی‌سابقه‌ای بر نحوه نمایش متن انتخاب‌شده ارائه دهیم. این قابلیت فراتر از تغییرات ساده رنگ پس‌زمینه و متن است و امکان ایجاد رابط‌های کاربری پیچیده و جذاب را فراهم می‌کند.

CSS Custom Highlight API چیست؟

CSS Custom Highlight API یک استاندارد وب مدرن است که راهی برای استایل‌دهی به ظاهر انتخاب‌های متن (و سایر محدوده‌های هایلایت‌شده) با استفاده از CSS فراهم می‌کند. این API شبه‌عنصر ::highlight() را معرفی می‌کند که محدوده‌های خاصی از متن را بر اساس معیارهای تعریف‌شده توسط توسعه‌دهنده هدف قرار می‌دهد. این API بر محدودیت‌های شبه‌عنصر سنتی ::selection که گزینه‌های استایل‌دهی بسیار ابتدایی ارائه می‌دهد، غلبه می‌کند. با Custom Highlight API، می‌توانید استایل‌های انتخاب متن بسیار سفارشی و آگاه از محتوا ایجاد کنید.

چرا از CSS Custom Highlight API استفاده کنیم؟

Custom Highlight API چندین مزیت نسبت به روش‌های سنتی استایل‌دهی انتخاب متن ارائه می‌دهد:

• تجربه کاربری بهبودیافته: انتخاب‌های متنی جذاب و آموزنده ایجاد کنید که کاربران را راهنمایی کرده و خوانایی را بهبود می‌بخشد.
• استایل‌دهی آگاه از محتوا: استایل‌های مختلف را بر اساس محتوای متن انتخاب‌شده اعمال کنید، مانند هایلایت کردن قطعه‌های کد یا تأکید بر اصطلاحات کلیدی.
• دسترسی‌پذیری بهبودیافته: نشانه‌های بصری واضح برای متن انتخاب‌شده فراهم کنید، که به کاربران دارای اختلالات بینایی کمک می‌کند تا محتوا را راحت‌تر پیمایش کنند.
• ظاهر قابل سفارشی‌سازی: فراتر از تغییرات ساده رنگ پس‌زمینه و متن بروید تا استایل‌های انتخاب متن منحصر به فرد و جذاب ایجاد کنید.
• استایل‌دهی پویا: ظاهر انتخاب‌های متن را بر اساس تعاملات کاربر یا وضعیت برنامه تغییر دهید.

درک مفاهیم کلیدی

قبل از پرداختن به مثال‌های کد، درک مفاهیم اصلی CSS Custom Highlight API ضروری است:

۱. ثبت هایلایت (Highlight Registration)

فرآیند با ثبت یک نام هایلایت سفارشی با استفاده از جاوا اسکریپت آغاز می‌شود. این نام سپس در CSS برای هدف قرار دادن انتخاب‌های متن خاص استفاده خواهد شد.

۲. محدوده‌های هایلایت (Highlight Ranges)

محدوده‌های هایلایت، بخش‌های مشخصی از متن را که باید استایل‌دهی شوند، تعریف می‌کنند. این محدوده‌ها به صورت برنامه‌نویسی با استفاده از APIهای Highlight و StaticRange یا Range ایجاد می‌شوند. آن‌ها نقاط شروع و پایان متنی را که باید هایلایت شود، مشخص می‌کنند.

۳. شبه‌عنصر ::highlight()

این شبه‌عنصر در CSS برای اعمال استایل‌ها به نام‌های هایلایت ثبت‌شده استفاده می‌شود. این عنصر به عنوان یک انتخابگر عمل می‌کند و بخش‌های متنی تعریف‌شده توسط محدوده‌های هایلایت را هدف قرار می‌دهد.

مثال‌های عملی: پیاده‌سازی CSS Custom Highlight API

بیایید چندین مثال عملی را برای نشان دادن نحوه استفاده از CSS Custom Highlight API بررسی کنیم.

مثال ۱: استایل‌دهی پایه انتخاب متن

این مثال نحوه تغییر رنگ پس‌زمینه و متنِ متن انتخاب‌شده را نشان می‌دهد.

HTML:

            <p id="myText">This is some text that can be selected.</p>
            

              
                Copy
              
            
          

JavaScript:

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

// Select the entire paragraph.
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
              
            
          

توضیح:

• کد جاوا اسکریپت یک شیء Highlight ایجاد می‌کند و یک محدوده اضافه می‌کند که کل پاراگراف با شناسه myText را پوشش می‌دهد.
• متد CSS.highlights.set() هایلایت را با نام 'myHighlight' ثبت می‌کند.
• کد CSS از شبه‌عنصر ::highlight(myHighlight) برای استایل‌دهی به متن انتخاب‌شده با پس‌زمینه زرد و رنگ متن سیاه استفاده می‌کند.

مثال ۲: هایلایت کردن کلمات خاص

این مثال نحوه هایلایت کردن کلمات خاص در یک پاراگراف را نشان می‌دهد.

HTML:

            <p id="myText">This is a paragraph with the word highlight that we want to highlight.</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
              
            
          

توضیح:

• کد جاوا اسکریپت کلمات موجود در پاراگراف را پیمایش کرده و شاخص‌های کلمه "highlight" را شناسایی می‌کند.
• برای هر رخداد، یک شیء Range ایجاد کرده و آن را به شیء Highlight اضافه می‌کند.
• کد CSS کلمات هایلایت‌شده را با پس‌زمینه سبز روشن و وزن فونت ضخیم (bold) استایل‌دهی می‌کند.

مثال ۳: هایلایت پویا بر اساس ورودی کاربر

این مثال نحوه هایلایت پویا متن بر اساس ورودی کاربر در یک کادر جستجو را نشان می‌دهد.

HTML:

            <input type="text" id="searchInput" placeholder="Enter text to highlight">
<p id="myText">This is some text that will be dynamically highlighted based on user input.</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(); // Clear previous highlights

  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
              
            
          

توضیح:

• کد جاوا اسکریپت به تغییرات ورودی در کادر جستجو گوش می‌دهد.
• هر هایلایت موجود را پاک کرده و سپس متن وارد شده را در پاراگراف جستجو می‌کند.
• برای هر رخداد، یک شیء Range ایجاد کرده و آن را به شیء Highlight اضافه می‌کند.
• کد CSS متن هایلایت‌شده پویا را با پس‌زمینه زرد و رنگ متن سیاه استایل‌دهی می‌کند.

مثال ۴: سفارشی‌سازی ظاهر هایلایت با ::highlight()

قدرت Custom Highlight API در توانایی آن برای سفارشی‌سازی ظاهر و حس متن هایلایت‌شده نهفته است. در اینجا نحوه اعمال سایه‌ها، گرادیان‌ها و سایر جلوه‌های بصری را مشاهده می‌کنید.

HTML:

            <p id="customText">Select this text to see a custom highlight effect.</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
              
            
          

توضیح:

• این مثال یک پس‌زمینه گرادیان خطی، متن سفید، سایه متن، گوشه‌های گرد و پدینگ به متن هایلایت‌شده اعمال می‌کند.
• این نشان می‌دهد که چگونه می‌توانید از ویژگی‌های استاندارد CSS در داخل شبه‌عنصر ::highlight() برای دستیابی به استایل‌های انتخاب بصری جذاب و منحصر به فرد استفاده کنید.

ملاحظات دسترسی‌پذیری

در حالی که بهبود ظاهر بصری انتخاب‌های متن مهم است، دسترسی‌پذیری باید همیشه یک نگرانی اصلی باشد. در اینجا چند دستورالعمل برای اطمینان از دسترسی‌پذیر بودن استایل‌های هایلایت سفارشی شما آورده شده است:

• کنتراست رنگ: از کنتراست کافی بین رنگ پس‌زمینه و متن هایلایت‌شده اطمینان حاصل کنید. از ابزارهایی مانند WebAIM Contrast Checker برای تأیید انطباق با استانداردهای دسترسی‌پذیری (WCAG) استفاده کنید.
• نشانه‌های بصری: نشانه‌های بصری واضح برای متن انتخاب‌شده فراهم کنید. از تغییرات رنگی ظریف که ممکن است برای کاربران دارای اختلالات بینایی دشوار باشد، خودداری کنید.
• ناوبری با صفحه‌کلید: اطمینان حاصل کنید که استایل‌های هایلایت سفارشی با ناوبری صفحه‌کلید تداخل ندارند. کاربران باید بتوانند به راحتی متن را با استفاده از صفحه‌کلید انتخاب و پیمایش کنند.
• سازگاری با صفحه‌خوان: استایل‌های هایلایت سفارشی خود را با صفحه‌خوان‌ها آزمایش کنید تا اطمینان حاصل شود که متن انتخاب‌شده به درستی اعلام می‌شود.

سازگاری مرورگر

CSS Custom Highlight API یک استاندارد وب نسبتاً جدید است و سازگاری مرورگرها ممکن است متفاوت باشد. از اواخر سال ۲۰۲۳/اوایل ۲۰۲۴، پشتیبانی در حال افزایش است اما به طور جهانی پیاده‌سازی نشده است. شما می‌توانید وضعیت پشتیبانی فعلی مرورگرها را در وب‌سایت‌هایی مانند "Can I use..." بررسی کنید تا از به‌روزرسانی‌های سازگاری مطلع بمانید.

برای مرورگرهایی که هنوز از این API پشتیبانی نمی‌کنند، استفاده از تشخیص ویژگی (feature detection) را برای ارائه استایل‌های جایگزین (fallback) در نظر بگیرید.

            if ('CSS' in window && 'highlights' in CSS) {
  // Use the Custom Highlight API
} else {
  // Provide fallback styles using ::selection
}
            

              
                Copy
              
            
          

موارد استفاده در دنیای واقعی

CSS Custom Highlight API کاربردهای متعددی در دنیای واقعی دارد، از جمله:

• ویرایشگرهای کد: هایلایت کردن عناصر سینتکس، خطاها و هشدارها در ویرایشگرهای کد.
• پلتفرم‌های آموزش الکترونیکی: تأکید بر مفاهیم و تعاریف کلیدی در مواد آموزشی.
• نمایشگرهای اسناد: به کاربران اجازه می‌دهد متن را در اسناد هایلایت و حاشیه‌نویسی کنند.
• نتایج جستجو: هایلایت کردن عبارات جستجو شده در نتایج جستجو.
• تجسم داده‌ها: هایلایت کردن نقاط داده یا روندهای خاص در نمودارها و گراف‌ها.

بهترین شیوه‌ها و نکات

• از نام‌های هایلایت توصیفی استفاده کنید: نام‌های هایلایتی را انتخاب کنید که به وضوح هدف هایلایت را نشان دهند.
• در صورت لزوم هایلایت‌ها را پاک کنید: به یاد داشته باشید که وقتی هایلایت‌ها دیگر مورد نیاز نیستند، آنها را پاک کنید تا از مشکلات استایل‌دهی غیرمنتظره جلوگیری شود.
• عملکرد را بهینه کنید: از ایجاد محدوده‌های هایلایت بیش از حد خودداری کنید، زیرا این می‌تواند بر عملکرد تأثیر بگذارد.
• به طور کامل آزمایش کنید: استایل‌های هایلایت سفارشی خود را در مرورگرها و دستگاه‌های مختلف آزمایش کنید تا از سازگاری و دسترسی‌پذیری اطمینان حاصل کنید.
• جایگزین‌ها را در نظر بگیرید: برای مرورگرهایی که هنوز از Custom Highlight API پشتیبانی نمی‌کنند، استایل‌های جایگزین ارائه دهید.

تکنیک‌های پیشرفته

۱. ترکیب چندین هایلایت

شما می‌توانید چندین هایلایت را برای ایجاد جلوه‌های استایل‌دهی پیچیده‌تر ترکیب کنید. به عنوان مثال، ممکن است بخواهید هم کلمات کلیدی و هم متن انتخاب‌شده توسط کاربر را با استایل‌های مختلف هایلایت کنید.

۲. استفاده از رویدادها برای به‌روزرسانی هایلایت‌ها

شما می‌توانید از رویدادهای جاوا اسکریپت، مانند mouseover یا click، برای به‌روزرسانی پویا محدوده‌های هایلایت بر اساس تعاملات کاربر استفاده کنید.

۳. ادغام با کتابخانه‌های شخص ثالث

شما می‌توانید Custom Highlight API را با کتابخانه‌های شخص ثالث ادغام کنید تا راه‌حل‌های هایلایت پیچیده‌تری ایجاد کنید. به عنوان مثال، می‌توانید از یک کتابخانه پردازش زبان طبیعی (NLP) برای شناسایی و هایلایت خودکار اصطلاحات کلیدی در یک سند استفاده کنید.

آینده استایل‌دهی انتخاب متن

CSS Custom Highlight API نشان‌دهنده یک پیشرفت قابل توجه در استایل‌دهی انتخاب متن است. این API به توسعه‌دهندگان قدرت می‌دهد تا رابط‌های کاربری جذاب‌تر، دسترسی‌پذیرتر و آگاه از محتوا ایجاد کنند. با ادامه رشد پشتیبانی مرورگرها، Custom Highlight API در آستانه تبدیل شدن به یک ابزار ضروری برای توسعه‌دهندگان وب در سراسر جهان است.

نتیجه‌گیری

CSS Custom Highlight API دنیایی از امکانات را برای سفارشی‌سازی تجربه انتخاب متن باز می‌کند. با درک مفاهیم کلیدی، بررسی مثال‌های عملی و در نظر گرفتن دستورالعمل‌های دسترسی‌پذیری، می‌توانید از این API قدرتمند برای ایجاد رابط‌های کاربری واقعاً استثنایی استفاده کنید. Custom Highlight API را بپذیرید و پروژه‌های توسعه وب خود را به سطوح جدیدی ارتقا دهید.

با مثال‌های ارائه‌شده آزمایش کنید، آنها را با نیازهای خاص خود تطبیق دهید و پتانسیل کامل CSS Custom Highlight API را کشف کنید. کاربران شما از توجه به جزئیات و تجربه کاربری بهبودیافته قدردانی خواهند کرد.