M

MLOG

فارسی

استایل‌دهی پیشرفته انتخاب متن را با CSS Custom Highlight API باز کنید. یاد بگیرید چگونه تجربه انتخاب را برای تعامل بهتر کاربر سفارشی‌سازی کنید.

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>

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);

CSS:

::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}

توضیح:

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

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

HTML:

<p id="myText">This is a paragraph with the word highlight that we want to highlight.</p>

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);

CSS:

::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: 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>

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);
});

CSS:

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

توضیح:

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

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

HTML:

<p id="customText">Select this text to see a custom highlight effect.</p>

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);

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;
}

توضیح:

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

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

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

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
}

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

CSS 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 را کشف کنید. کاربران شما از توجه به جزئیات و تجربه کاربری بهبودیافته قدردانی خواهند کرد.