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 nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng giúp bạn định kiểu trải nghiệm web 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 họ.

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 3 bước sau:

  1. Khám phá các khả năng. Tìm hiểu tất cả 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.
  2. Tạo kiểu cho trải nghiệm trên web. Ví dụ: triển khai các thay đổi về màu sắc, bố cục và kích thước phần tử dựa trên 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 thử cách hoạt động của trang web.

DevTools hỗ trợ nhiều tuỳ chọn mô phỏng. Để giúp bạn tránh phải tìm kiếm và điều chỉnh chế độ cài đặt 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ẻ Rendering (Hiển thị) trong DevTools.

Thẻ Kết xuất.

Các tuỳ chọn mô phỏng theo 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 – có giảm thiểu chuyển động hay không
  • prefers-reduced-data – tiêu thụ ít lưu lượng truy cập hơn hay không

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

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

Ngoài ra, với DevTools, khả năng kiểm thử của bạn không chỉ giới hạn ở một thiết bị mà bạn đang sử dụng. Bạn có thể Mô phỏng thiết bị di động bằng Chế độ thiết bị.