Mẹo cho Công cụ cho nhà phát triển: Cách mô phỏng các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng CSS bằng Công cụ cho nhà phát triển

Sofia Emelianova
Sofia Emelianova

Các tính năng nghe nhìn theo lựa chọn ưu tiên của người dùng cho phép bạn điều chỉnh trải nghiệm trên web sao cho phù hợp với các lựa chọn ưu tiên và nhu cầu cụ thể của người dùng. Nói cách khác, các tính năng nội dung nghe nhìn ưu tiên cho phép bạn điều chỉnh trải nghiệm người dùng cho phù hợp với kỳ vọng của mình.

Bạn có thể nâng cao trải nghiệm người dùng trên trang web của mình bằng cách thực hiện ba bước sau:

  1. Khám phá những khả năng. Tìm hiểu về tất cả các tính năng đa phương tiện mà người dùng ưu tiên.
  2. Tạo kiểu cho trải nghiệm web. Triển khai các thay đổi chẳng hạn như thay đổi màu sắc, bố cục và kích thước phần tử dựa trên các lựa chọn ưu tiên.
  3. Kiểm thử giao diện người dùng. Trong DevTools, hãy mô phỏng các lựa chọn ưu tiên và kiểm tra cách trang web của bạn hoạt động.

Công cụ cho nhà phát triển hỗ trợ nhiều tuỳ chọn mô phỏng. Để giúp bạn không phải tìm kiếm và điều chỉnh các chế độ cài đặt của hệ thống và trình duyệt, tất cả các tuỳ chọn mô phỏng đều nằm ở cùng một nơi – trong thẻ Hiển thị trong Công cụ cho nhà phát triển.

Thẻ Hiển thị.

Các lựa chọn mô phỏng lựa chọn ưu tiên của người dùng bao gồm nhưng không giới hạn ở:

  • prefers-color scheme – bảng phối màu sáng hoặc tối
  • prefers-contrast – độ tương phản thấp hơn hoặc cao hơn
  • prefers-reduced-motion – giảm thiểu chuyển động hoặc không
  • prefers-reduced-data – tiêu thụ ít lưu lượng truy cập hơn hoặc không

Để xem danh sách đầy đủ tất cả các tuỳ chọn mô phỏng, hãy xem bài viết Mô phỏng các tính năng đa phương tiện của CSS.

Để khám phá thêm các hiệu ứng khác mà bạn có thể áp dụng bằng thẻ Kết xuất, hãy xem Tổng quan về thẻ Hiển thị.

Ngoài ra, với Công cụ cho nhà phát triển, khả năng kiểm thử của bạn không bị giới hạn ở một thiết bị mà bạn đang xử lý. Bạn có thể Mô phỏng thiết bị di động bằng Chế độ thiết bị.