Kursor dan penunjuk

Di perangkat non-layar sentuh, kursor adalah cara penting bagi pengguna Anda untuk mengetahui apa yang mereka interaksikan. Anda juga dapat memberikan petunjuk berguna tentang cara berinteraksi dengan elemen, atau cara gerakan dengan trackpad atau mouse akan memengaruhi situs Anda.

Kursor

Browser secara otomatis menangani beberapa kasus penggunaan umum untuk kursor.

Jika Anda membaca ini di perangkat dengan kursor, jelajahi halaman. Mungkin Anda belum pernah memperhatikan perubahan kursor sebelumnya, tetapi perhatikan petunjuk yang diberikannya. Saat kursor Anda diarahkan ke teks, kursor akan berubah menjadi I-beam pilihan yang menunjukkan bahwa Anda dapat memilih teks tersebut. Jika Anda mengarahkan kursor ke link, kursor akan berubah menjadi tangan yang menunjuk dengan jari telunjuk, yang menunjukkan bahwa Anda dapat melakukan tindakan. Tempat lain akan memiliki kursor default, yang sering kali berupa panah.

Saat membuat situs yang lebih interaktif, Anda akan ingin menyesuaikan kursor agar pengguna dapat lebih mudah memahami interaksi.

Browser mendukung berbagai kata kunci untuk properti kursor yang memberikan petunjuk untuk menarik, mengubah ukuran, memilih, dan lainnya.

Jika tidak ada kursor yang didukung yang mengomunikasikan interaksi elemen, Anda juga dapat memberikan gambar SVG atau PNG untuk digunakan sebagai kursor.

Tanda sisipan

Karet penyisipan digunakan untuk menunjukkan posisi Anda dalam teks yang dapat diedit. Hal ini berbeda dengan kursor Anda, karena tidak mengikuti mouse Anda. Anda dapat mengubah warna dengan caret-color.

Merespons input penunjuk pengguna

Pengguna dengan mouse atau trackpad dapat berinteraksi dengan titik yang lebih presisi di layar daripada pengguna dengan layar sentuh. Jika Anda hanya mendesain untuk presisi mouse, pengguna dengan layar sentuh atau masalah kontrol motorik halus mungkin tidak dapat berinteraksi dengan halaman Anda sesuai kebutuhan mereka.

Masalah umum mencakup tombol yang terlalu kecil atau elemen interaktif yang terlalu berdekatan satu sama lain. Hal ini menyulitkan pengguna untuk berinteraksi dengan elemen yang benar.

Memastikan tombol dan target interaktif lainnya cukup besar adalah langkah penting untuk memastikan situs Anda dapat diakses. Anda juga dapat menyesuaikan gaya berdasarkan presisi perangkat input pengguna dengan kueri media pointer dan any-pointer.

Fitur media pointer merujuk pada perangkat input utama pengguna, sedangkan any-pointer merujuk pada semua perangkat input. Anda dapat mencocokkan perangkat seperti mouse dengan fine dan perangkat seperti layar sentuh dengan coarse. Nilai none menunjukkan bahwa pengguna tidak menggunakan perangkat input dengan pointer.

Peristiwa pointer dan sentuh

Menonaktifkan gestur layar sentuh tertentu

Saat Anda menggunakan layar sentuh, browser menangani beberapa gestur umum. Misalnya, menyentuh layar dengan dua jari dan merenggangkannya biasanya akan memperbesar situs. Meskipun Anda tidak harus menerapkan perilaku tersebut di situs Anda, Anda mungkin ingin menonaktifkan atau mengganti perilaku tersebut dalam kasus tertentu.

Untuk memilih tidak ikut serta dalam penanganan beberapa tindakan oleh browser, cantumkan tindakan yang Anda inginkan untuk ditangani oleh elemen. pan-x dan pan-y mengaktifkan gestur penggeseran satu jari. Fitur ini dapat diaktifkan bersama dengan pinch-zoom yang memungkinkan zoom dan penggeseran multi-jari.

Kata kunci manipulation setara dengan pan-x pan-y pinch-zoom. manipulation mengecualikan perilaku sentuhan lain yang memerlukan beberapa sentuhan dalam waktu singkat, seperti ketuk dua kali untuk melakukan zoom.

Setelah menonaktifkan penanganan tindakan oleh browser dengan mengecualikannya dari touch-action, Anda dapat menyiapkan peristiwa penunjuk untuk tindakan tersebut.

Menonaktifkan semua peristiwa dan tindakan

যাবৎ, Anda mungkin ingin menentukan bahwa suatu elemen tidak interaktif. Dengan menyetel pointer-events: none pada tombol, misalnya, Anda tidak akan dapat mengklik tombol, atau bahkan memicu status pengarahan kursor.

Periksa pemahaman Anda