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

Sofia Emelianova

Mô phỏng nhiều tính năng đa phương tiện của CSS bằng nội dung tham chiếu các tuỳ chọn mô phỏng trên thẻ Rendering (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 prefers-color-scheme CSS 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:

1. Trên trang ưu tiên-lược đồ màu, hãy mở thẻ Hiển thị.

2. Trong Mô phỏng tính năng đa phương tiện của CSS prefers-color-scheme, chọn một trong các tuỳ chọn sau từ danh sách thả xuống:

   • Không mô phỏng
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. refresh Tải lại trang. Ví dụ:

Mô phỏng loại phương tiện CSS (Bật tính năng xem trước bản in)

Truy vấn phương tiện in kiểm soát giao diện trang của bạn khi được in.

Cách buộc trang của bạn chuyển sang chế độ xem trước bản in:

1. Mở thẻ Rendering và trong phần Emulate CSS media type (Mô phỏng loại đa phương tiện của CSS), hãy chọn print.

   

2. Từ đây, bạn có thể xem và thay đổi CSS của mình, giống như mọi trang web khác. Xem bài viết Bắt đầu 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 forced-colors CSS cho biết liệu tác nhân người dùng có bật chế độ bắt buộc sử dụng màu sắc hay không. Ví dụ về chế độ bắt buộc màu là Độ tương phản cao của Windows.

Cách mô phỏng điều kiện này:

1. Mở thẻ Kết xuất.

2. Trong Mô phỏng tính năng đa phương tiện của CSS forced-colors, chọn một trong các tuỳ chọn sau từ danh sách thả xuống:

   • Không mô phỏng
   • forced-colors:active
   • forced-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 prefers-contrast CSS 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:

1. Mở thẻ Kết xuất.

2. Trong Mô phỏng tính năng đa phương tiện của CSS prefers-contrast, chọn một trong các tuỳ chọn sau từ danh sách thả xuống:

   • Không mô phỏng
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-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 prefers-reduced-motion CSS cho biết liệu người dùng đã yêu cầu giảm thiểu lượng chuyển động trên một trang hay chưa.

Cách mô phỏng điều kiện này:

1. Mở thẻ Kết xuất trên bản minh hoạ này rồi thử cuộn để xem nhiều ảnh động.
2. Trong phần Mô phỏng tính năng đa phương tiện của CSS prefers-reduced-motion, chọn prefers-reduced-motion:reduce.
3. 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 prefers-reduced-transparency CSS cho biết liệu người dùng có yêu cầu giảm các hiệu ứng lớp trong suốt hoặc trong suốt được sử dụng trên thiết bị hay không.

Tính năng prefers-reduced-transparency có trên Chrome 118 và cho phép bạn điều chỉnh nội dung trên web theo lựa chọn ưu tiên do người dùng chọn để giảm độ trong suốt trong hệ điều hành, chẳng hạn như chế độ cài đặt Giảm độ trong suốt trên macOS.

Cách mô phỏng điều kiện này:

1. Mở thẻ Kết xuất.
2. Trong phần Mô phỏng tính năng đa phương tiện của CSS prefers-reduced-transparency, chọn prefers-reduced-transparency: reduce.
3. Kiểm tra xem trang của bạn có hiển thị chính xác hay 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 color-gamut CSS 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:

1. Mở thẻ Kết xuất.

2. Trong Mô phỏng tính năng đa phương tiện của CSS color-gamut, chọn một trong các tuỳ chọn sau từ danh sách thả xuống:

   • Không mô phỏng
   • color-gamut:srgb — khoảng sRGB gam màu trở lên
   • color-gamut:p3 – khoảng gam được chỉ định trong Không gian màu hiển thị P3 trở lên
   • color-gamut:rec2020 – khoảng gam được chỉ định trong Rec. 2020 trở lên