Mô phỏng nhiều tính năng đa phương tiện của CSS bằng cách tham khảo các tuỳ chọn mô phỏng trên thẻ Hiển thị.
Mô phỏng tính năng đa phương tiện prefers-color-scheme của CSS
Tính năng đa phương tiện của CSS prefers-color-scheme cho biết người dùng thích bảng phối màu sáng hay tối.
Cách mô phỏng điều kiện này:
- Trên trang prefers-color-scheme, hãy mở thẻ Kết xuất.
Trong phần Mô phỏng tính năng đa phương tiện CSS
prefers-color-scheme, hãy chọn một trong các mục sau trong danh sách thả xuống:- Không mô phỏng
prefers-color-scheme:lightprefers-color-scheme:dark
Hãy tải lại trang. Ví dụ:
Mô phỏng loại nội dung đa phương tiện CSS (Bật chế độ xem trước bản in)
Truy vấn phương tiện in kiểm soát giao diện của trang khi được in.
Cách buộc trang của bạn chuyển sang chế độ xem trước bản in:
Mở thẻ Rendering (Hiển thị) và trong mục Emulate CSS media type (Mô phỏng loại nội dung đa phương tiện CSS), hãy chọn print (in).
Từ đây, bạn có thể xem và thay đổi CSS của mình, như bất kỳ trang web nào khác. Xem bài viết Bắt đầu tìm hiểu cách xem và thay đổi CSS.
Mô phỏng tính năng đa phương tiện forced-colors của CSS
Tính năng đa phương tiện của CSS forced-colors cho biết liệu tác nhân người dùng có bật chế độ màu bắt buộc hay không. Ví dụ về chế độ màu bắt buộc là Độ tương phản cao của Windows.
Cách mô phỏng điều kiện này:
- Mở thẻ Kết xuất.
Trong phần Mô phỏng tính năng đa phương tiện của CSS
forced-colors, hãy chọn một trong các mục sau trong danh sách thả xuống:- Không mô phỏng
forced-colors:activeforced-colors:none
Với forced-colors:active được mô phỏng:
Mô phỏng tính năng đa phương tiện prefers-contrast của CSS
Tính năng đa phương tiện của CSS prefers-contrast cho biết liệu người dùng có yêu cầu nội dung web hiển thị với giá trị tương phản cao hơn, thấp hơn hay cụ thể.
Cách mô phỏng điều kiện này:
- Mở thẻ Kết xuất.
Trong phần Mô phỏng tính năng đa phương tiện của CSS
prefers-contrast, hãy chọn một trong các mục sau trong danh sách thả xuống:- Không mô phỏng
prefers-contrast:moreprefers-contrast:lessprefers-contrast:custom
Mô phỏng tính năng đa phương tiện prefers-reduced-motion của CSS
Tính năng đa phương tiện CSS prefers-reduced-motion cho biết liệu người dùng có yêu cầu giảm thiểu chuyển động trên trang hay không.
Cách mô phỏng điều kiện này:
- Mở thẻ Kết xuất trên bản minh hoạ này và thử di chuyển để xem nhiều ảnh động.
- Trong mục Mô phỏng tính năng đa phương tiện
prefers-reduced-motioncủa CSS, hãy chọnprefers-reduced-motion:reduce. - Hãy thử cuộn lại.
Mô phỏng tính năng đa phương tiện prefers-reduced-transparency của CSS
Tính năng đa phương tiện của CSS prefers-reduced-transparency cho biết liệu người dùng có yêu cầu giảm hiệu ứng lớp trong suốt hoặc mờ được sử dụng trên thiết bị hay không.
Tính năng prefers-reduced-transparency có trong Chrome 118 và cho phép bạn điều chỉnh nội dung web theo lựa chọn ưu tiên của người dùng để giảm độ trong suốt trong hệ điều hành, chẳng hạn như chế độ cài đặt Reduce transparency (Giảm độ trong suốt) trên macOS.
Cách mô phỏng điều kiện này:
- Mở thẻ Kết xuất.
- Trong mục Mô phỏng tính năng đa phương tiện
prefers-reduced-transparencycủa CSS, hãy chọnprefers-reduced-transparency: reduce. - Kiểm tra xem trang của bạn có hiển thị chính xác không.
Mô phỏng tính năng đa phương tiện color-gamut của CSS
Tính năng đa phương tiện CSS color-gamut cho biết phạm vi màu mà tác nhân người dùng và thiết bị đầu ra hỗ trợ.
Cách mô phỏng điều kiện này:
- Mở thẻ Kết xuất.
Trong phần Mô phỏng tính năng đa phương tiện CSS
color-gamut, hãy chọn một trong các mục sau trong danh sách thả xuống:- Không mô phỏng
color-gamut:srgb– gam màu khoảng sRGB trở lêncolor-gamut:p3– gần đúng với gam màu được chỉ định trong Không gian màu Display P3 trở lêncolor-gamut:rec2020– khoảng không gian màu được chỉ định trong Rec. 2020 trở lên