‏قابلیت CSS Custom Highlight API وارد Baseline شد

این API یه راه تازه به CSS و جاوااسکریپت اضافه می‌کنه تا بشه بخش‌های دلخواه یه متن رو، بدون دست زدن به ساختار HTML، رنگ و استایل داد. تا الان مرورگرها فقط چندتا حالت از پیش تعریف‌شده مثل ::selection (متن انتخاب‌شده) یا ::spelling-error (غلط املایی) رو پشتیبانی می‌کردن؛ حالا با این API خودت تعیین می‌کنی کدوم بخش از متن هایلایت بشه. کاربردهای رایجش نرم‌افزارهای ویرایش متن (برای نشون دادن غلط‌های املایی یا گرامری) و ادیتورهای کد (برای رنگ کردن خطاهای سینتکس) هستن.

روند کار چهار قدم داره: اول با شیء Range بازه‌ی متنی رو تو جاوااسکریپت مشخص می‌کنی، بعد یه یا چند Range رو تو یه شیء Highlight می‌ذاری، سوم اونو با یه اسم دلخواه تو رجیستری CSS.highlights (که شبیه Map عمل می‌کنه) ثبت می‌کنی، و آخر سر با ::highlight() تو CSS استایلش می‌دی:

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

مثلاً می‌شه یه اپ ویرایش متن مشترک ساخت که هر کاربر رنگ هایلایت خودشو داشته باشه؛ کافیه برای هر کاربر یه Highlight جدا بسازی و جدا استایلش بدی. نکته‌ی مهم اینه که این هایلایت‌ها به‌خودی‌خود هیچ معنای semantic به تکنولوژی‌های کمکی (مثل صفحه‌خوان‌ها) نمی‌دن. ویژگی type می‌تونه یه‌جورایی نوع هایلایت (مثلاً غلط املایی) رو به این ابزارها معرفی کنه، ولی پشتیبانیش بین پلتفرم‌ها فرق داره. برای همین اگه دسترس‌پذیری برات مهمه، بهتره کنار این API از عنصرهای معنادار مثل هم استفاده کنی.

نکات کلیدی:

• از ژوئن ۲۰۲۵ به Baseline رسیده، یعنی روی آخرین نسخه‌ی همه‌ی مرورگرهای اصلی کار می‌کنه.
• روند کار: ساخت Range، ساخت Highlight، ثبت تو CSS.highlights و استایل دادن با ::highlight().
• بدون دست‌کاری DOM یا HTML، فقط با جاوااسکریپت و CSS متن هایلایت می‌شه.
• ویژگی type به صفحه‌خوان‌ها کمک می‌کنه ولی پشتیبانیش کامل نیست؛ کنارش از هم استفاده کن.