Tương tác

Các thiết bị có màn hình nhỏ như điện thoại di động thường có màn hình cảm ứng. Các thiết bị màn hình lớn như máy tính xách tay và máy tính để bàn thường đi kèm phần cứng như chuột hoặc bàn di chuột. Thật hấp dẫn khi đánh đồng màn hình nhỏ với màn hình cảm ứng và màn hình lớn với con trỏ.

Nhưng thực tế còn chi tiết hơn. Một số máy tính xách tay có chức năng màn hình cảm ứng. Người dùng có thể tương tác với màn hình cảm ứng hoặc bàn di chuột hoặc cả hai. Tương tự, bạn cũng có thể sử dụng bàn phím hoặc chuột bên ngoài với thiết bị màn hình cảm ứng, chẳng hạn như máy tính bảng.

Thay vì cố gắng suy luận cơ chế nhập dựa trên kích thước màn hình, hãy sử dụng các tính năng đa phương tiện trong CSS.

Con trỏ

Bạn có thể kiểm thử ba giá trị có thể có bằng tính năng đa phương tiện pointer: none, coarse và fine.

Nếu một trình duyệt báo cáo giá trị pointer là none thì có thể người dùng đang sử dụng bàn phím để tương tác với trang web của bạn.

Nếu một trình duyệt báo cáo giá trị pointer là coarse, thì có nghĩa là cơ chế nhập dữ liệu chính không chính xác lắm. Ngón tay trên màn hình cảm ứng là con trỏ thô.

Nếu một trình duyệt báo cáo giá trị pointer là fine, thì cơ chế nhập chính có khả năng kiểm soát chi tiết. Chuột hoặc bút cảm ứng là một con trỏ nhỏ.

Bạn có thể điều chỉnh kích thước của các thành phần giao diện cho phù hợp với giá trị pointer. Hãy thử truy cập trang web này trên các loại thiết bị khác nhau để xem giao diện thích ứng như thế nào.

Trong ví dụ này, các nút được làm lớn hơn cho con trỏ thô:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Bạn cũng có thể làm cho các phần tử nhỏ hơn để có các con trỏ nhỏ, nhưng hãy cẩn thận khi thực hiện việc này:

Không nên

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Ngay cả khi ai đó có cơ chế đầu vào chính có khả năng kiểm soát chi tiết, hãy suy nghĩ kỹ trước khi giảm kích thước của các phần tử tương tác. Luật của Fitts vẫn áp dụng. Mục tiêu nhỏ hơn đòi hỏi mức độ tập trung cao hơn ngay cả với một con trỏ nhỏ. Khu vực mục tiêu rộng hơn sẽ mang lại lợi ích cho tất cả mọi người bất kể thiết bị trỏ nào.

Con trỏ bất kỳ

Tính năng đa phương tiện pointer báo cáo độ chính xác của cơ chế nhập chính. Tuy nhiên, nhiều thiết bị có nhiều cơ chế đầu vào. Có thể ai đó đang tương tác với trang web của bạn bằng cả màn hình cảm ứng và chuột cùng lúc.

any-pointer khác với tính năng đa phương tiện của pointer ở chỗ nó báo cáo nếu có bất kỳ thiết bị trỏ nào vượt qua kiểm thử.

Giá trị any-pointer none có nghĩa là không có thiết bị trỏ nào.

Giá trị any-pointer coarse có nghĩa là có ít nhất một thiết bị trỏ không chính xác lắm. Nhưng đó có thể không phải là cơ chế nhập dữ liệu chính.

Giá trị any-pointer fine có nghĩa là có ít nhất một thiết bị trỏ có khả năng kiểm soát chi tiết. Nhưng xin nhắc lại, đây có thể không phải là cơ chế nhập dữ liệu chính.

Vì truy vấn nội dung đa phương tiện any-pointer sẽ báo cáo kết quả dương nếu bất kỳ cơ chế đầu vào nào vượt qua thử nghiệm, nên trình duyệt có thể báo cáo kết quả cho any-pointer: fine cũng như báo cáo kết quả cho any-pointer: coarse. Trong trường hợp đó, thứ tự truy vấn phương tiện của bạn rất quan trọng. Mục cuối cùng sẽ được ưu tiên.

Trong ví dụ này, nếu thiết bị có cả cơ chế nhập chi tiết và cơ chế nhập thô, thì kiểu thô sẽ được áp dụng.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Khoảng cách di

Tính năng đa phương tiện hover báo cáo về việc cơ chế nhập chính có thể di chuột qua các phần tử hay không. Điều này thường có nghĩa là có một số loại con trỏ trên màn hình được điều khiển bằng chuột hoặc bàn di chuột.

Không giống như tính năng đa phương tiện pointer dùng để phân biệt con trỏ chi tiết và con trỏ thô, tính năng đa phương tiện hover là tệp nhị phân. Nếu thiết bị đầu vào chính có thể di chuột lên các phần tử, thì thiết bị sẽ báo cáo giá trị là hover. Nếu không, giá trị sẽ là none.

Trong ví dụ này, một số biểu tượng bổ sung sẽ xuất hiện khi di chuột nhưng chỉ khi thiết bị đầu vào chính có thể di chuột lên một phần tử.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Nếu bạn sử dụng chuột để di qua nút đó, biểu tượng sẽ xuất hiện. Nhưng nếu bạn sử dụng bàn phím để nhấn phím tab, biểu tượng vẫn ẩn. Khi sử dụng bàn phím, bạn đang tập trung thay vì di chuột. Thiết bị máy tính có gắn chuột sẽ báo cáo rằng cơ chế nhập chính có khả năng di chuột. Điều này là đúng. Tuy nhiên, bất cứ ai sử dụng bàn phím khi đang gắn chuột sẽ không nhận được lợi ích của các kiểu :hover. Vì vậy, bạn nên kết hợp kiểu :hover và :focus để bao gồm cả hai hoạt động tương tác.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Ngay cả khi thiết bị đầu vào chính có thể di chuột lên các phần tử, hãy cẩn thận khi ẩn thông tin đằng sau một tương tác di chuột. Thông tin đó sẽ trở nên khó tìm thấy hơn. Không sử dụng thao tác di chuột để ẩn thông tin quan trọng hoặc thành phần giao diện quan trọng.

Bất kỳ thao tác di chuột nào

Truy vấn nội dung nghe nhìn hover chỉ báo cáo về cơ chế nhập chính. Một số thiết bị có nhiều cơ chế nhập: màn hình cảm ứng, chuột, bàn phím, bàn di chuột.

Giống như khi any-pointer báo cáo về bất kỳ cơ chế đầu vào nào, any-hover sẽ là true nếu có bất kỳ cơ chế đầu vào nào có thể di chuột lên các phần tử.

Nếu đã quyết định đảo ngược logic trong ví dụ trước, bạn có thể đặt các kiểu di chuột làm mặc định rồi xoá chúng nếu any-hover có giá trị là none.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

Trên thiết bị không có cơ chế nhập liệu có khả năng di chuột, biểu tượng bổ sung sẽ luôn hiển thị.

Bàn phím ảo

Mọi người sử dụng con trỏ và ngón tay để khám phá các giao diện, nhưng khi đến lúc nhập thông tin, họ lại cần có một bàn phím. Sẽ không có vấn đề gì nếu thiết bị của họ có bàn phím vật lý, nhưng nếu họ đang sử dụng thiết bị màn hình cảm ứng thì mọi thứ sẽ phức tạp hơn một chút. Các thiết bị này cung cấp bàn phím ảo trên màn hình.

Loại dữ liệu đầu vào

Không giống như bàn phím vật lý, bàn phím ảo có thể được điều chỉnh để phù hợp với phương thức nhập dự kiến. Nếu bạn cung cấp thông tin về dữ liệu đầu vào dự kiến, các thiết bị có thể sử dụng bàn phím ảo thích hợp nhất.

Các loại đầu vào HTML5 là cách hay để mô tả các phần tử input của bạn. Thuộc tính type chấp nhận các giá trị như email, number, tel, url, v.v.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

Chế độ nhập

Hỗ trợ trình duyệt

• 66 tuổi
• 79
• 95
• 12.1

Nguồn

Thuộc tính inputmode cung cấp cho bạn khả năng kiểm soát chi tiết các bàn phím ảo. Ví dụ: mặc dù có một input type có giá trị number, bạn có thể sử dụng thuộc tính inputmode để phân biệt số nguyên và số thập phân.

Nếu bạn muốn yêu cầu một số nguyên, chẳng hạn như tuổi của một người nào đó, hãy sử dụng inputmode="numeric".

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Nếu bạn đang yêu cầu một số có chứa chữ số thập phân, chẳng hạn như giá cả, hãy sử dụng inputmode="decimal".

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Tự động hoàn thành

Không ai thích điền vào biểu mẫu. Là một nhà thiết kế, bạn có thể cải thiện trải nghiệm cho người dùng bằng cách cho phép họ tự động điền vào các trường của biểu mẫu. Thuộc tính autocomplete cung cấp cho bạn nhiều tùy chọn để cải thiện biểu mẫu liên hệ, biểu mẫu đăng nhập và biểu mẫu thanh toán.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

Các thuộc tính HTML này (type, inputmode và autocomplete) là những thuộc tính bổ sung nhỏ cho các trường biểu mẫu nhưng có thể tạo ra sự khác biệt lớn đối với trải nghiệm người dùng. Bằng việc dự đoán và phản hồi các tính năng trên thiết bị của người dùng, bạn đang trao quyền cho người dùng. Để biết thêm thông tin chuyên sâu, chúng tôi có một khoá học giúp bạn tìm hiểu biểu mẫu.

Trong khoá học này, hãy cùng tìm hiểu một số mẫu giao diện phổ biến.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về tương tác

Bạn nên sử dụng tính năng nào thay vì cố gắng suy luận loại dữ liệu đầu vào của người dùng dựa trên kích thước màn hình?

Các tính năng đa phương tiện của CSS

Tương tự như @media (pointer: coarse) hoặc @media (-any-pointer: coarse)

Hỏi người dùng bằng prompt() của JavaScript

Không nên hỏi trực tiếp.

Loại phương tiện CSS handheld

Tính năng này không còn được dùng trong Truy vấn nội dung nghe nhìn 4.

Có gì khác biệt giữa @media (pointer) và @media (any-pointer)?

Con trỏ bất kỳ cũng bao gồm những mục như ngón tay của bạn đóng vai trò là con trỏ.

Con trỏ đã bao gồm thao tác chạm làm loại dữ liệu nhập.

Con trỏ không bao gồm những thứ như chuột.

Con trỏ có cả chuột làm thiết bị đầu vào.

Mọi con trỏ đều sẽ báo cáo giá trị true khi dữ liệu đầu vào bổ sung không phải là nguồn chính, chẳng hạn như bút cảm ứng, vượt qua bài kiểm thử.

any-pointer truy vấn mọi loại thiết bị đầu vào cho mọi kết quả trùng khớp.

Loại phương thức nhập nào hiển thị bàn phím ảo phù hợp hơn cho người dùng?

type="url"

Bàn phím sẽ có các nút để hỗ trợ nhập URL.

type="tel"

Bàn phím sẽ có các nút để hỗ trợ nhập số điện thoại.

type="number"

Bàn phím sẽ có các nút để hỗ trợ chỉ nhập số.

type="email"

Bàn phím sẽ có các nút để hỗ trợ nhập địa chỉ email.