اگر تا به حال در دستگاه‌های لمسی مانند تلفن‌های همراه یا تبلت‌ها مرورگر وب باز کرده‌اید، احتمالاً متوجه شده‌اید که زمانی که المانی را لمس می‌کنید، در اطراف آن یک هایلایت رنگی ظاهر می‌شود. این ویژگی برای ارائه فهم بصری از اینکه المنتی کلیک شده، طراحی شده است. اما اگر به عنوان طراحی وب سوال کنید که این ویژگی چگونه کنترل می‌شود، پاسخ -webkit-tap-highlight-color است.
این ویژگی به شما اجازه می‌دهد تا رنگ این هایلایت لمسی را تغییر دهید. به طور پیش‌فرض، رنگ این هایلایت معمولاً آبی است، اما با استفاده از -webkit-tap-highlight-color می‌توانید آن را به آسانی به رنگ دلخواه خود تغییر دهید تا با طراحی کلی صفحات وب شما هماهنگ شود.
مثلاً ممکن است نیاز داشته باشید که هنگام لمس شدن لینک‌ها در سایتتان، برای هماهنگی بصری بیشتر، رنگ آن ها با پالت رنگی شما همخوانی داشته باشد. در چنین شرایطی می‌توانید از این ویژگی استفاده کنید.
دستکاری این ویژگی به خصوص در برنامه‌های وب که تعامل کاربر با صفحه مهم است اهمیت ویژه دارد؛ چرا که می‌تواند تجربه کاربری بهتری را فراهم آورد.
بیایید نگاهی داشته باشیم به چگونگی استفاده از این ویژگی در CSS با استفاده از یک نمونه کد.
a {
-webkit-tap-highlight-color: rgba(255, 0, 0, 0.5);
}
توضیح خط به خط کد
a: این خط نشان‌دهنده انتخابگر تمامی لینک‌های <a> در اسناد HTML است.-webkit-tap-highlight-color: rgba(255, 0, 0, 0.5);: این خط تعیین می‌کند که هنگام لمس لینک‌ها، رنگ هایلایت به قرمز با شفافیت متوسط تغییر کند.