خيارات إجراءات اللمس

تسمح سمة CSS‏ touch-action للمطوّر بتقييد كيفية تعامل المستخدِم مع عنصر معيّن، ما يُعدّ مفيدًا بشكل خاص لمنع إرسال الأحداث عندما لا يكون ذلك ضروريًا.

قبل الإصدار 55، كان Chrome يتيح استخدام pan-x وpan-y اللذَين يحصران عناصر المحتوى بإمكانية الانتقال في اتجاه واحد.

يعرض الفيديو أدناه مثالاً على عنصر بدون تحديد إجراء لمس (على يمين الشاشة)، بالإضافة إلى pan-x وpan-y (في الوسط وعلى يمين الشاشة).

تنسيق CSS لتسجيلات الشاشة في الوسط واليمين هو:

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

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

في الإصدار 55 من Chrome، تمت إضافة pan-left وpan-right وpan-up وpan-down. هناك اختلاف بسيط ولكن مهم في سلوك هذين السمةَين.

تفرض هذه السمات على المستخدم بدء الإيماءات في اتجاه واحد قبل أن يتفاعل العنصر. يشبه ذلك إيماءة "السحب لإعادة التحميل"، والتي لا تستجيب إلا عندما يشير المستخدم إلى الأسفل على الشاشة.

يوضّح الفيديو التالي رمزَي pan-right وpan-down اللذَين يتطلبان البدء بإشارات من اليمين إلى اليسار ومن الأسفل إلى الأعلى على التوالي. بعد بدء الإيماءة، يمكنك التمرير للخلف وللأمام. ولا يتأثر سوى الاتجاه الأوّلي.

على الرغم من أنّ الفيديو يوضّح هذا السلوك، قد يكون من الأسهل تجربته بنفسك من خلال الاطّلاع على العيّنة.

رمز CSS لهذا الإصدار التجريبي هو:

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

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

آخر ما يحدث في عالم إجراءات اللمس هي السمة pinch-zoom. هذه خاصية جديدة في الإصدار 55 من Chrome، وهي متاحة بعد تفعيل علامة، ويمكن استخدامها مع أي من خيارات التمرير (أي pan-x وpan-y وpan-left وpan-right وpan-down وpan-up).

إذا استخدمت إصبعَين لتكبير المحتوى على موقع إلكتروني، سيتم تكبير المحتوى في الصفحات بشكل عام. سيؤدي تحديد touch-action إلى منع هذا السلوك، ولكن سيؤدي إضافة ميزة التصغير/التكبير باستخدام إصبعَين إلى إعادة تفعيل هذا السلوك.

يوضّح هذا الفيديو الفرق بين touch-action: pan-x و touch-action: pan-x pinch-zoom.

من المفترض أن تعمل كل هذه السمات على تبسيط بعض المنطق الذي كان على المطوّرين تنفيذه باستخدام pointer-events.