درک ویژگی touch-action در CSS

مقدمه

وقتی صحبت از طراحی و توسعه صفحات وب می‌شود، همیشه باید به تجربه کاربری و نحوه تعامل کاربران با وب‌سایت توجه ویژه‌ای داشت. یکی از جنبه‌های مهم تعامل کاربران با صفحات وب زمانی است که آن‌ها از طریق دستگاه‌های لمسی مانند تلفن همراه یا تبلت وارد می‌شوند. ویژگی touch-action در CSS یکی از ابزارهایی است که به توسعه‌دهندگان اجازه می‌دهد کنترل بیشتری بر رفتار تعاملات لمسی داشته باشند.

در حالت عادی، مرورگرها به صورت خودکار برخی از تعاملات لمسی را مدیریت می‌کنند، مانند اسکرول کردن یا زوم. ویژگی touch-action به شما این امکان را می‌دهد که رفتار پیش‌فرض مرورگر را تنظیم کنید و یا حتی تغییر دهید. این ویژگی مخصوصاً در برنامه‌های وبی که قابلیت لمس بهینه‌سازی شده‌ای نیاز دارند، حیاتی است.

استفاده عملی

استفاده از touch-action برای اطمینان از عملکرد صحیح در دستگاه‌های لمسی مختلف یک نیاز حیاتی است. به عنوان مثال، در سایت‌های پیچیده‌ای که از نقشه‌ها یا بازی‌های تعاملی استفاده می‌کنند، کنترل کامل روی تعاملات لمسی ضروری است تا اطمینان حاصل شود که تمام ویژگی‌ها به درستی کار می‌کنند.

مثال از کد

<style>
  .no-touch-action {
    touch-action: none;
  }

  .pan-x {
    touch-action: pan-x;
  }

  .pan-y {
    touch-action: pan-y;
  }
</style>

<div class="no-touch-action">من هیچ اکشنی ندارم</div>
<div class="pan-x">من تنها در محور x قابل اسکرول هستم</div>
<div class="pan-y">من تنها در محور y قابل اسکرول هستم</div>

توضیح خط به خط

<style> - این خط شروع بخش استایل CSS است که تعریف ما از ویژگی های CSS قرار می‌گیرد.
.no-touch-action - این کلاس هیچ رفتار لمسی پیش‌فرضی اجازه نمی‌دهد. touch-action: none; یعنی هیچ کدام از اعمال پیش‌فرض مرورگر انجام نمی‌شود.
.pan-x - این کلاس اسکرول کردن در محور x را اجازه می‌دهد. touch-action: pan-x; فقط اسکرول کردن افقی را فعال می‌کند.
.pan-y - این کلاس اسکرول کردن در محور y را اجازه می‌دهد. touch-action: pan-y; فقط اسکرول کردن عمودی را فعال می‌کند.
</style> - این خط پایان بخش استایل CSS است.
<div class="no-touch-action"> - آغاز یک بلاک div که هیچ اکشنی ندارد.
من هیچ اکشنی ندارم - متن داخل div که کلاس .no-touch-action دارد.
</div> - پایان بلاک div.
همین روند برای دیگر کلاس‌های .pan-x و .pan-y توضیح داده شده است.