Áp dụng các hiệu ứng khác: bật giao diện tối tự động, mô phỏng tiêu điểm và nhiều tính năng khác

Sofia Emelianova

Khám phá các hiệu ứng hữu ích để áp dụng cho trang của bạn thông qua tài liệu tham khảo về các tuỳ chọn trong thẻ Kết xuất.

Làm nổi bật khung quảng cáo

Để kiểm tra xem khung hình có được gắn thẻ là quảng cáo hay không, hãy làm như sau:

1. Mở thẻ Hiển thị trên bản minh hoạ này rồi chọn Làm nổi bật khung quảng cáo.
2. Quan sát khung quảng cáo được đánh dấu bằng màu đỏ.

Mô phỏng một trang được đặt tiêu điểm

Nếu bạn chuyển tiêu điểm từ trang sang Công cụ cho nhà phát triển, một số phần tử lớp phủ sẽ tự động ẩn nếu chúng được kích hoạt bằng tiêu điểm. Ví dụ: danh sách thả xuống, trình đơn hoặc bộ chọn ngày. Tuỳ chọn check_box Mô phỏng một trang được lấy tiêu điểm cho phép bạn gỡ lỗi một phần tử như vậy như thể phần tử đó đang được lấy tiêu điểm.

Thận trọng: Khi bạn bật tuỳ chọn này, document.visibilityState sẽ được đặt thành visible và sự kiện visibilitychange sẽ không kích hoạt. Để biết thêm thông tin, hãy xem bài viết API Mức độ hiển thị trang.

Cách mô phỏng một trang được đặt tiêu điểm:

1. Mở một trang có phần tử cần gỡ lỗi, chẳng hạn như trang web YouTube cùng với thanh tìm kiếm.

2. Trên trang này, hãy mở thẻ Kết xuất, sau đó đánh dấu và xoá Mô phỏng một trang được đặt tiêu điểm.

   

Bạn cũng có thể thấy tuỳ chọn tương tự trong nút :hov trên thanh thao tác trong phần Phần tử > Kiểu.

Tắt phông chữ trên máy

Kiểm tra xem các phông chữ thay thế trên máy có hoạt động như dự kiến hay không bằng cách tắt các nguồn local() trong quy tắc @font-face.

Thông thường, các nhà phát triển và nhà thiết kế sử dụng hai bản sao của cùng một phông chữ trong quá trình phát triển:

• Phông chữ cục bộ cho các công cụ thiết kế của bạn và
• Phông chữ web cho mã của bạn

Việc tắt phông chữ trên máy sẽ giúp bạn dễ dàng:

• Gỡ lỗi và đo lường hiệu suất tải và tối ưu hoá phông chữ web
• Xác minh tính chính xác của các quy tắc @font-face của CSS
• Tìm hiểu mọi điểm khác biệt giữa phông chữ trên web và phiên bản trên máy

Chrome sẽ hiển thị câu này trong Courier New nếu tìm thấy phông chữ này trên thiết bị của bạn.

Mô phỏng các nguồn local() bị thiếu trong các quy tắc @font-face:

1. Kiểm tra câu ở trên, mở Phần tử > Tính toán, di chuyển xuống hết cỡ và trong phần Phông chữ hiển thị, phát hiện rằng Chrome đã tìm thấy Courier New trong các tệp cục bộ.

   

2. Mở thẻ Kết xuất, chọn Tắt phông chữ trên máy rồi tải lại trang.

3. Hãy quan sát câu bằng chữ Roboto được tìm thấy trên web.

   

Bật chế độ tối tự động

Xem trang web của bạn trông như thế nào ở chế độ tối, ngay cả khi bạn không triển khai.

Chrome 96 đã ra mắt Bản dùng thử theo nguyên gốc cho Giao diện tối tự động trên Android. Với tính năng này, trình duyệt sẽ áp dụng giao diện tối được tạo tự động cho các trang web có giao diện sáng nếu người dùng chọn sử dụng giao diện tối trong hệ điều hành.

Cách bật chế độ tối tự động:

1. Trên trang này, hãy mở thẻ Kết xuất rồi đánh dấu vào mục Bật chế độ tối tự động.
2. Quan sát trang này ở chế độ tối.

Lưu ý quan trọng: Khi bạn bật tính năng Giao diện tối tự động, danh sách thả xuống Mô phỏng tính năng đa phương tiện của CSS prefers-color-scheme sẽ tự động bị tắt và tự động đặt thành prefers-color-scheme: dark.

Mô phỏng khiếm khuyết thị giác

Mọi người đều cần có quyền truy cập và tận hưởng thế giới web. Google cam kết hiện thực hoá điều đó.

Với Công cụ của Chrome cho nhà phát triển, bạn có thể xem cách những người bị khiếm khuyết về thị lực xem trang web của bạn để bạn có thể cải thiện trang web cho họ. Để biết thêm thông tin, hãy xem bài viết Mô phỏng khiếm khuyết về thị lực màu.

Cách mô phỏng khiếm khuyết thị giác:

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

2. Trong phần Mô phỏng khiếm khuyết về thị lực, hãy chọn một trong các trường hợp sau đây từ danh sách thả xuống:

   • Không mô phỏng.
   • Mờ mắt.
   • Độ tương phản giảm.
   • Mù màu đỏ (không có màu đỏ). Nhận thức thấp về màu đỏ; dễ nhầm lẫn màu xanh lục, màu đỏ và màu vàng.
   • Mù màu xanh lục (không có màu xanh lục). Nhận thức thấp về màu xanh lục; nhầm lẫn màu xanh lục, màu đỏ và màu vàng.
   • Mù màu xanh dương (không có màu xanh dương). Nhận thức thấp về màu xanh lam; dễ nhầm lẫn màu xanh lục và màu xanh lam.
   • Mù màu (không màu). Không nhìn thấy màu sắc một phần hoặc toàn bộ.

Tắt định dạng hình ảnh AVIF và WebP

Các mô phỏng này giúp nhà phát triển dễ dàng thử nghiệm nhiều tình huống tải hình ảnh khác nhau mà không cần phải chuyển đổi trình duyệt.

Giả sử bạn có mã HTML sau để phân phát hình ảnh ở định dạng AVIF và WebP cho các trình duyệt mới hơn, với hình ảnh PNG dự phòng cho các trình duyệt cũ hơn.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Cách tắt tất cả hình ảnh AVIF trên một trang (hoặc tương tự như hình ảnh WebP):

1. Mở thẻ Hiển thị, chọn Tắt định dạng hình ảnh AVIF.
2. Tải lại trang và di chuột qua img src. Hình ảnh src (currentSrc) hiện tại hiện là hình ảnh WebP dự phòng.

Tương tự, bạn có thể tắt hình ảnh WebP.

Lưu ý quan trọng: Các tuỳ chọn này tự động tắt tính năng lưu hình ảnh vào bộ nhớ đệm.