Hướng Dẫn Thuộc Tính CSS Cursor

Con trỏ chuột xuất hiện từ "The Mother of All Demos" nơi Douglas Englebart giới thiệu chuột và GUI vào cuối những năm 60. Con trỏ cho chúng ta biết vị trí trên màn hình. Là công cụ UX tuyệt vời cho thấy có thể làm gì tại mỗi điểm trên màn hình hoặc máy tính đang làm gì. Bài này giới thiệu cách dùng con trỏ chuột trên webpage để cải thiện UX.

Cú Pháp

Trong CSS selector, dùng cú pháp sau để đổi cursor không phải mũi tên mặc định:

cursor: [ url(1.png), url(2.png) ], etc., <mandatory keyword value>

Trong cặp ngoặc vuông đầu: danh sách url cách nhau bởi dấu phẩy – giá trị tùy chọn. Cho phép custom cursor – có nhiều công cụ tạo custom cursor online.

Danh sách cách nhau bởi dấu phẩy nghĩa là trình duyệt thử load cái đầu. Nếu không tìm thấy hoặc url sai, thử cái tiếp theo cho đến khi tìm được hoặc fallback về mandatory keyword cuối cùng.

Tham số đầu (urls) là tùy chọn. Tham số thứ hai BẮT BUỘC. Phải có keyword chỉ định loại cursor. Dưới đây là một số giá trị có sẵn:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>Example of CSS custom cursor</title> 
    <style> 
      table { width:100%; text-align: center; border-collapse: collapse; font-family: 'Roboto', sans-serif; } 
      thead { width: 100%; background: lightblue; } 
      tr:nth-child(even) { background-color: lightgrey; } 
      td { width: 32%; height: 50px; padding: 10px; } 
      td.test { color: red; font-weight: bold; } 
      td#auto { cursor: auto; } 
      td#cell { cursor: cell; } 
      td#crosshair { cursor: crosshair; } 
      td#default { cursor: default; } 
      td#none { cursor: none; } 
      td#pointer { cursor: pointer; } 
      td#help { cursor: help; } 
      td#progress { cursor: progress; } 
      td#wait { cursor: wait; } 
      td#text { cursor: text; } 
      td#vertical-text { cursor: vertical-text; } 
      td#zoom-in { cursor: zoom-in; } 
      td#zoom-out { cursor: zoom-out; } 
    </style> 
  </head> 
  <body> 
    <table> 
      <thead> <td>Cursor Type:</td> <td>Description:</td> <td>Test it Out: </td> </thead> 
      <tr> <td>auto</td> <td>Tự động xác định cursor theo context.</td> <td class="test" id="auto"> TEST </td> </tr> 
      <tr> <td>default</td> <td>Thường là mũi tên, phụ thuộc platform.</td> <td class="test" id="default"> TEST </td> </tr> 
      <tr> <td>help</td> <td>Chỉ ra có help available</td> <td class="test" id="help"> TEST </td> </tr> 
      <tr> <td>none</td> <td>Không có cursor</td> <td class="test" id="none"> TEST </td> </tr> 
      <tr> <td>pointer</td> <td>Dùng khi hover link/button để chỉ có thể click.</td> <td class="test" id="pointer"> TEST </td> </tr> 
      <tr> <td>progress</td> <td>Kết hợp pointer và wait - UI vẫn tương tác được trong khi xử lý...</td> <td class="test" id="progress"> TEST </td> </tr> 
      <tr> <td>text</td> <td>Báo user có thể highlight text.</td> <td class="test" id="text"> TEST </td> </tr> 
      <tr> <td>wait</td> <td>Máy tính đang xử lý, user KHÔNG tương tác được UI...</td> <td class="test" id="wait"> TEST </td> </tr> 
      <tr> <td>zoom-in</td> <td>Chỉ ra có thể zoom in.</td> <td class="test" id="zoom-in"> TEST </td> </tr> 
      <tr> <td>zoom-out</td> <td>Chỉ ra có thể zoom out.</td> <td class="test" id="zoom-out"> TEST </td> </tr> 
    </table> 
  </body> 
</html>

Code trên chỉ chia sẻ một số cursor có sẵn. Xem MDN để biết thêm.

Kết Luận

Hôm nay đã xem qua các cách thêm cursor vào website để cải thiện UX. Bằng cách dùng cursor chỉ ra action có thể làm tại mỗi điểm, user biết sẽ xảy ra gì khi navigate site. Còn nhiều cursor hơn những cái đề cập.

Khuyên bạn khám phá các cách tùy chỉnh cursor phù hợp nhu cầu. Và nhớ: cursor chỉ là một nửa của UX. Nửa kia là implement những gì user mong đợi cursor làm. Sẽ nói đến lần sau. Happy coding!