touch-action CSS özelliği, geliştiricilerin kullanıcının bir öğe ile nasıl etkileşim kurabileceğini kısıtlamasına olanak tanır. Bu özellik, gerekli olmadığında etkinliklerin gönderilmesini önlemede özellikle faydalıdır.
Chrome, 55 sürümünden önce öğelerin tek yönde kaydırılmasını kısıtlayan pan-x ve pan-y özelliklerini destekliyordu.
Aşağıdaki videoda, dokunma eylemi tanımlı olmayan (sol) bir öğe örneğinin yanı sıra, x ve pan-y (orta ve sağ) kaydır.
Orta ve sağ el ekran yayınları için CSS şu şekildedir:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Chrome 55'te pan-left, pan-right, pan-up ve pan-down eklendi. Bu özelliklerin davranış açısından küçük ama önemli bir farkı vardır.
Bu özellikler, öğe yanıt vermeden önce kullanıcıyı tek yönde hareket etmeye zorlar. Bu, yalnızca kullanıcı ekranda aşağı hareket ettiğinde yanıt veren "yenilemek için çek" hareketine benzer.
Aşağıdaki videoda, hareketlerin sırasıyla sağdan sola ve aşağıdan yukarıya doğru başlamasını gerektiren pan-right ve pan-down gösterilmektedir.
Hareket başladığında aslında
geri ve ileri kaydırabilirsiniz. Yalnızca başlangıç yönü etkilenir.
Video bu davranışı gösterse de siz de örneği inceleyerek kendiniz de deneyebilirsiniz.
Bu demonun CSS'si:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Dokunma eylemi dünyasında en son gerçekleşen şey pinch-zoom özelliğidir. Chrome 55'te, bir işaretin arkasında yer alan yeni bir özelliktir ve herhangi bir kaydırma seçeneğiyle (yani pan-x, pan-y, pan-left, pan-right, pan-down, pan-up) kullanılabilir.
Bir web sitesinde iki parmak ucunuzu uzaklaştırırsanız genellikle sayfanın içeriği yakınlaştırılır.
touch-action tanımlamak bu davranışı önler. Ancak sıkıştırarak yakınlaştırma özelliği eklendiğinde bu davranış yeniden etkinleştirilir.
Bu videoda touch-action: pan-x ile touch-action: pan-x pinch-zoom arasındaki fark gösterilmektedir;
Bu özelliklerin tümü, pointer-events kullanan geliştiriciler tarafından uygulanması gereken mantığın bir kısmını basitleştirmelidir.