محدوده هایلایت سفارشی CSS: استایل‌دهی پیشرفته برای انتخاب متن

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

درک اصول اولیه انتخاب متن

قبل از پرداختن به محدوده‌های هایلایت سفارشی، مهم است که نحوه عملکرد انتخاب متن در مرورگرها را درک کنید. هنگامی که کاربر ماوس خود را می‌کشد (یا از روش‌های ورودی دیگر استفاده می‌کند) تا متنی را انتخاب کند، مرورگر محدوده متن انتخاب‌شده را شناسایی کرده و استایل هایلایت پیش‌فرض را اعمال می‌کند. این کار توسط موتور رندر داخلی مرورگر انجام می‌شود و به طور پیش‌فرض، مستقیماً با CSS قابل کنترل نیست.

استایل‌دهی پیش‌فرض انتخاب

استایل‌دهی پیش‌فرض انتخاب متن توسط شیوه‌نامه عامل کاربر (user agent stylesheet) مرورگر کنترل می‌شود. این شیوه‌نامه استایل‌دهی اولیه را برای تمام عناصر HTML فراهم می‌کند و شامل استایل هایلایت پیش‌فرض است. رنگ‌ها و استایل‌های خاص استفاده‌شده ممکن است بین مرورگرها و سیستم‌عامل‌های مختلف کمی متفاوت باشد.

معرفی شبه‌المان ::selection

CSS شبه‌المان ::selection را برای هدف قرار دادن متن انتخاب‌شده فراهم می‌کند. این به شما امکان می‌دهد تا ویژگی‌های background-color و color متن انتخاب‌شده را تغییر دهید. با این حال، این رویکرد محدودیت‌هایی دارد. این فقط به شما اجازه می‌دهد رنگ پس‌زمینه و متن را تغییر دهید و کنترل دقیق‌تری بر روی محدوده هایلایت ارائه نمی‌دهد.

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

            

              
                Copy
              
            
          

این قطعه کد CSS ساده، رنگ پس‌زمینه متن انتخاب‌شده را به زرد و رنگ متن را به سیاه تغییر می‌دهد. اگرچه مفید است، اما این تنها نوک کوه یخ است.

API محدوده هایلایت سفارشی CSS

API محدوده هایلایت سفارشی CSS روشی پیشرفته‌تر و انعطاف‌پذیرتر برای استایل‌دهی به بخش‌های انتخاب‌شده متن ارائه می‌دهد. این API به شما امکان می‌دهد تا محدوده‌های هایلایت خاصی را تعریف کرده و استایل‌های سفارشی را به آنها اعمال کنید. این به ویژه برای ایجاد رابط‌های کاربری جذاب‌تر و کاربرپسندتر مفید است.

مفاهیم کلیدی

• Highlight API: فناوری زیربنایی که استایل‌دهی سفارشی را امکان‌پذیر می‌کند.
• Highlight Regions: محدوده‌های مشخصی از متن که برای استایل‌دهی سفارشی هدف قرار می‌گیرند.
• Custom Styles: خصوصیات CSS (فراتر از رنگ و رنگ پس‌زمینه) که به مناطق هایلایت شده اعمال می‌شوند.

مزایای استفاده از محدوده هایلایت سفارشی CSS

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

پیاده‌سازی محدوده هایلایت سفارشی CSS

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

مرحله ۱: انتخاب محدوده متن

اولین قدم، شناسایی محدوده متنی است که می‌خواهید استایل‌دهی کنید. این کار را می‌توان با استفاده از تکنیک‌های مختلف جاوااسکریپت انجام داد، مانند:

• document.getSelection(): این متد یک شیء Selection را برمی‌گرداند که نشان‌دهنده محدوده متنی است که توسط کاربر انتخاب شده است.
• Range API: این API به شما امکان می‌دهد تا محدوده‌های متنی را به صورت برنامه‌نویسی ایجاد و دستکاری کنید.

مثال با استفاده از document.getSelection():

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Now you have the range object to work with
}

            

              
                Copy
              
            
          

مثال با استفاده از Range API:

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Now you have a range that selects all content inside element

            

              
                Copy
              
            
          

مرحله ۲: ایجاد یک شیء هایلایت

هنگامی که یک شیء Range دارید، باید یک شیء هایلایت ایجاد کنید. این شیء نمایانگر هایلایت سفارشی خواهد بود و برای اعمال استایل‌های مورد نظر استفاده خواهد شد.

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

مرحله ۳: ثبت هایلایت

برای قابل مشاهده کردن هایلایت، باید آن را در شیء CSS.highlights ثبت کنید. این یک شیء سراسری است که تمام هایلایت‌های سفارشی صفحه را مدیریت می‌کند.

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API is not supported in this browser.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

در اینجا، 'my-custom-highlight' یک نام دلخواه است که شما برای شناسایی هایلایت خود انتخاب می‌کنید.

مرحله ۴: اعمال استایل‌های سفارشی با CSS

در نهایت، می‌توانید استایل‌های سفارشی را با استفاده از شبه‌المان ::highlight() در CSS خود به هایلایت اعمال کنید.

            
::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
              
            
          

این قطعه کد CSS یک پس‌زمینه زرد نیمه‌شفاف، متن خاکستری تیره، وزن فونت ضخیم (bold) و یک سایه متن ظریف را به متن داخل محدوده 'my-custom-highlight' اعمال می‌کند.

مثال کامل

در اینجا یک مثال کامل برای نشان دادن نحوه استفاده از محدوده هایلایت سفارشی CSS آورده شده است:

HTML:

            
This is some text that can be selected.  We will customize the highlight styling using CSS Custom Highlight Range.

            

              
                Copy
              
            
          

جاوااسکریپت:

            
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 is not supported in this browser.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS:

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

            

              
                Copy
              
            
          

در این مثال، هنگامی که کاربر دکمه ماوس را پس از انتخاب متن در پاراگراف رها می‌کند، کد جاوااسکریپت یک هایلایت ایجاد کرده و آن را ثبت می‌کند. سپس CSS یک پس‌زمینه سبز روشن، رنگ متن سبز تیره و استایل فونت کج (italic) را به متن انتخاب‌شده اعمال می‌کند.

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

محدوده هایلایت سفارشی CSS امکان تکنیک‌های سفارشی‌سازی پیشرفته‌تری را نیز فراهم می‌کند، از جمله:

استفاده از گرادینت‌ها

شما می‌توانید از گرادینت‌های CSS برای ایجاد جلوه‌های هایلایت بصری خیره‌کننده استفاده کنید.

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

            

              
                Copy
              
            
          

افزودن حاشیه و سایه

شما می‌توانید حاشیه و سایه به هایلایت اضافه کنید تا آن را بیشتر برجسته کنید.

            
::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
              
            
          

هایلایت شرطی

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

            
// Example: Highlight keywords in a different color
const keywords = ['keyword1', 'keyword2', 'keyword3'];

// (Implementation for finding keywords and creating ranges would go here)

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

            

              
                Copy
              
            
          

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

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

نسبت کنتراست

اطمینان حاصل کنید که نسبت کنتراست بین رنگ پس‌زمینه و رنگ متن استایل‌های هایلایت شما با الزامات WCAG (دستورالعمل‌های دسترس‌پذیری محتوای وب) مطابقت دارد. نسبت کنتراست حداقل ۴.۵:۱ برای متن معمولی و ۳:۱ برای متن بزرگ توصیه می‌شود.

نشانه‌های بصری

نشانه‌های بصری واضحی برای نشان دادن انتخاب شدن متن فراهم کنید. این کار را می‌توان با استفاده از رنگ‌ها، حاشیه‌ها یا سایه‌های متمایز انجام داد.

تست با فناوری‌های کمکی

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

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

API محدوده هایلایت سفارشی CSS یک فناوری نسبتاً جدید است و پشتیبانی مرورگرها ممکن است متفاوت باشد. تا اواخر سال ۲۰۲۳، این API در مرورگرهای مبتنی بر Chromium (Chrome, Edge, Brave) و Safari (Technology Preview) پشتیبانی می‌شود. فایرفاکس علاقه خود را نشان داده است، اما پشتیبانی هنوز پیاده‌سازی نشده است.

مهم است که قبل از استفاده از این API در محیط تولید، آخرین اطلاعات سازگاری مرورگرها را بررسی کنید. می‌توانید از وب‌سایت‌هایی مانند "Can I use..." برای پیگیری پشتیبانی مرورگرها از محدوده هایلایت سفارشی CSS استفاده کنید.

برای مرورگرهایی که از این API پشتیبانی نمی‌کنند، می‌توانید از شبه‌المان ::selection به عنوان جایگزین (fallback) استفاده کنید.

موارد استفاده و مثال‌ها

در اینجا چند مورد استفاده عملی و مثال از نحوه استفاده از محدوده هایلایت سفارشی CSS آورده شده است:

ویرایشگرهای کد

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

نمایشگرهای اسناد

تجربه کاربری نمایشگرهای اسناد را با ارائه استایل‌های هایلایت سفارشی که با طراحی سند مطابقت دارند، بهبود ببخشید.

پلتفرم‌های آموزش الکترونیکی

با هایلایت کردن مفاهیم کلیدی یا اطلاعات مهم با یک استایل سفارشی، تجربه‌های یادگیری تعاملی ایجاد کنید.

هایلایت نتایج جستجو

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

ابزارهای حاشیه‌نویسی

به کاربران اجازه دهید تا متن را با استایل‌های هایلایت سفارشی حاشیه‌نویسی کنند تا بخش‌های مهم را علامت‌گذاری کرده یا یادداشت اضافه کنند. می‌توان به کاربران مختلف رنگ‌های هایلایت متفاوتی برای حاشیه‌نویسی مشترک اختصاص داد.

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

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

نتیجه‌گیری

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