it-swarm-vi.com

Tại sao mặc định <button> các phần tử HTML có con trỏ CSS theo mặc định?

Một người bạn là hỏi tôi tại sao <button> Các phần tử HTML không có con trỏ CSS pointer theo mặc định?

Đây là hành vi mặc định cho các liên kết và có thể đạt được trên một nút với

button { cursor:pointer; }

Tuy nhiên, tại sao sự khác biệt này? Nguồn là một cộng.

85
Édouard Lopez

Thật đáng để xem xét trật tự lịch sử trong đó những điều này ra đời.

Các nút tồn tại từ rất sớm trong thời kỳ tính toán GUI. Chúng có hiệu ứng đổ bóng để tạo ấn tượng sai lệch về việc chúng giống với các nút vật lý, được dùng để chỉ ra rằng chúng có thể được bấm nhiều vì người ta sẽ nhấn một nút vật lý như vậy. Thật vậy, vì bạn có thể nhấp vào một nút vật lý trên chuột để làm như vậy (giả sử bạn không gõ bàn phím để điều hướng), tính đa dạng đã được hỗ trợ bởi hành động vật lý đó.

Khi con trỏ ở trên chúng, chúng có con trỏ mặc định chỉ ra rằng trong khi có thể nhấp hoặc nhấp đúp vào bất cứ thứ gì nằm dưới con trỏ, chúng không thể được nhập vào và chúng cũng không phải là Cạnh kéo của đối tượng có thể thay đổi kích thước . Chủ yếu là thực tế rằng chúng trông hơi giống các nút vật lý được xác định để chỉ ra rằng chúng có thể nhấp được.

Khi siêu văn bản (trong đó web không phải là ví dụ đầu tiên, nhưng là ứng dụng sát thủ đã đưa nó đến với nhiều đối tượng) đã xuất hiện các đoạn văn bản có thể nhấp được biểu thị thông qua gạch chân và (khi có màu) các màu khác nhau không phải là màu khác văn bản liên kết. Nó vẫn còn tương đối yếu như một tín hiệu vật lý nên con trỏ hình bàn tay được phát minh như một dấu hiệu khác.

Đó là một thời gian trước khi <input> Đưa ra các nút khi typesubmit hoặc reset. Giống như các loại <input> Khác, chúng được triển khai thông qua các cơ chế mà HĐH có cho các vật dụng tiêu chuẩn và sẽ có các nút tiêu chuẩn. Khi các hệ điều hành đặt con trỏ mũi tên vào các vật dụng như vậy, chúng có con trỏ mũi tên. Điều đó cũng ổn vì trong phạm vi các tính năng tương đối hạn chế mà người ta có thể có trong một trang web vào thời điểm đó, chúng rõ ràng là các nút và rõ ràng có thể nhấp được. Cũng có một chút kỳ lạ khi có bất cứ điều gì khác ngoài hành vi hệ điều hành bình thường vào thời điểm đó, vì điều đó có nghĩa là các trình duyệt web đang hoạt động kỳ lạ so với các chương trình khác. Nếu thậm chí nhiều ứng dụng được định dạng phong phú (như trò chơi và một số phần mềm văn phòng cao cấp có thể tùy chỉnh các tính năng UI ngoài tiêu chuẩn của HĐH), tại sao một thứ tương đối nhàm chán như trang web, chỉ có một màu đen xám văn bản với một số bit màu xanh và có thể một vài hình ảnh nổi sang một bên hoặc bên kia?

Khi CSS tạo cơ hội trình bày cho các trang web phong phú hơn nhiều (mặc dù hiện tại chúng đã có các lựa chọn về màu sắc và phông chữ, mặc dù các cách mã đáng sợ) vẫn được hiển thị bằng cách gọi vào các lệnh gọi hệ thống cửa sổ của hệ điều hành, do đó không bị ảnh hưởng bởi CSS. Khi CSS sau đó tạo ra các con trỏ một trong những điều có thể thay đổi cho một phần tử, các nút không bị ảnh hưởng vì chúng nằm ngoài phạm vi của những gì CSS có thể thay đổi.

Các trình duyệt bắt đầu vẽ các nút riêng của họ để CSS có thể thay đổi giao diện và do đó chúng sẽ không "tỏa sáng" các phần tử được định vị "phía trên" chúng trong các hiệu ứng lớp, nhưng đến nay đã có hơn một thập kỷ con trỏ bàn tay là con trỏ bình thường cho một liên kết và một con trỏ mũi tên là con trỏ bình thường cho một nút. Ngay cả khi bây giờ người ta sẽ lập luận rằng các nút trong trình duyệt không còn giống với các nút trong các ứng dụng khác (vẫn còn là một đối số đáng nghi ngờ), tính nhất quán sẽ chống lại sự thay đổi đó, đặc biệt là mặc định; Được rồi, về mặt kỹ thuật có thể dễ dàng thay đổi ngay bây giờ, nhưng về mặt kỹ thuật, người thiết kế trang cũng dễ dàng thay đổi ngay bây giờ, vậy tại sao lại thay đổi giao diện trang của những người chưa quyết định họ muốn thay đổi?

28
Jon Hanna

Đây là lý do tại sao:

Hướng dẫn thiết kế của Microsoft nói về khả năng chi trả yếu:

Các liên kết văn bản và đồ họa sử dụng một con trỏ [[]] []] vì khả năng chi trả yếu. Mặc dù các liên kết có thể có các manh mối trực quan khác để chỉ ra rằng chúng là các liên kết (chẳng hạn như gạch chân và vị trí đặc biệt), hiển thị con trỏ tay khi di chuột là dấu hiệu rõ ràng của liên kết. Để tránh nhầm lẫn, bắt buộc không sử dụng con trỏ tay cho các mục đích khác. Ví dụ, các nút lệnh đã có khả năng chi trả mạnh, vì vậy chúng không cần một con trỏ tay. Con trỏ bàn tay phải có nghĩa là mục tiêu này là một liên kết và không có gì khác.

Nguyên tắc giao diện con người của Apple nói rằng nên sử dụng con trỏ bàn tay khi nội dung là một liên kết URL.

Hướng dẫn giao diện người dùng W3C nói lại điều tương tự với con trỏ Con trỏ là một con trỏ biểu thị một liên kết.

Từ "Các nút không nên có con trỏ tay" của Adam Silver

81
DPS

Theo con trỏ W3C :

con trỏ Con trỏ là con trỏ chỉ ra một liên kết.

Đặc tả chỉ cho biết các liên kết có nghĩa là có con trỏ con trỏ. Các nút không có nghĩa là có con trỏ con trỏ trong đặc tả và có lẽ đó là lý do tại sao Trình duyệt không gán nó theo mặc định và chúng tôi phải làm nó bằng tay.

Về lý do tại sao các liên kết cần con trỏ con trỏ, ngoài ra câu trả lời của Dipak , tôi hiểu rằng đặc tả được coi là có thể không rõ ràng (so với văn bản xung quanh) rằng liên kết văn bản là liên kết.

27
Alvaro

 - Được sử dụng cho hầu hết các đối tượng.   - Được sử dụng cho các liên kết văn bản.

Ví dụ về con trỏ chuột

Thay đổi con trỏ di chuột trong hình ảnh động bên phải là một ví dụ về con trỏ chuột di chuyển xung quanh màn hình dưới dạng mũi tên nhọn, trên văn bản dưới dạng con trỏ dầm chữ I, sau đó di chuột qua một liên kết dưới dạng con trỏ tay.


(nguồn: computerhope.com )

Kết luận:

Mũi tên chuột được định sẵn để chọn hầu hết các đối tượng (nút thích)

Con trỏ tay được định sẵn để chọn một đối tượng hoặc liên kết văn bản

2
Artiom S.

Tôi chỉ muốn chỉ ra rằng, trái với hướng dẫn của họ, các nút gửi phản hồi trên các trang web của Apple và Microsoft đều có một con trỏ trỏ khi di chuột. Cả hai đều là yếu tố đầu vào [type = submit].

0
tylertrotter

Một trong những nguyên lý chính của UX là "đừng khiến tôi phải suy nghĩ" .... nếu bạn không có một con trỏ tay trên một nút thì bạn phải nghĩ "đây có phải là một nút không?" ... Vì vậy, bạn đang phá vỡ nguyên tắc chính này và làm cho UX tồi tệ hơn.

Đây có lẽ là lý do tại sao (như @tyletrotter nói) Apple và Microsoft đều sử dụng điều này trên trang web của họ.

0
72GM

Đầu tiên, <button> không phải là một liên kết vì vậy bất kỳ câu trả lời nào quy định điều gì xảy ra khi bạn di chuột qua một liên kết không được áp dụng. Thứ hai, CSS là một đặc tả độc lập, riêng biệt với HTML. Một người không chỉ định những gì người khác nên làm. Chính nhà cung cấp trình duyệt quyết định CSS được cung cấp cho bất kỳ hành động nào trong nhiều trường hợp mặc dù họ có xu hướng dính vào điều tương tự nếu nó không có trong đặc tả.

Đã lâu rồi tôi mới đọc phần này của thông số kỹ thuật và tôi phải xem lại nó để biết những gì ở đó nhưng tôi khá chắc chắn rằng có một dấu hiệu không có gì xảy ra trong trường hợp này vì một nút nên là một và nếu không phải là nút thì nó phải là một cái gì đó khác!

0
Rob

Quy tắc đơn giản tôi sử dụng là:

Nếu đó là một nút nhưng trông giống như một liên kết văn bản, hãy cho nó một con trỏ tay.

Đôi khi bạn muốn một nút trông giống như một liên kết vì các nút đôi khi thuận tiện và ngữ nghĩa hơn (ví dụ: không cần phải giả mạo href like "#login-modal" Và làm event.preventDefault() if nó không đi đâu cả). Giả sử bạn có một điều hướng với: Home, About, Login.

HomeAbout là các liên kết đi đến một trang khác. Tuy nhiên, mặc dù Login trông giống như chúng, nhưng thực sự đó là một nút mở một phương thức đăng nhập. Nó có ý nghĩa ngữ nghĩa hơn là một nút vì nó không thay đổi URL. Trong trường hợp này, nó có ý nghĩa tuyệt đối rằng nó có cùng con trỏ với liên kết.

0
Dominic