Á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

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

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

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

1. Mở thẻ Hiển thị trên bản minh hoạ này và 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 đượ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 trang có tiêu điểm cho phép bạn gỡ lỗi cho một phần tử như vậy như thể phần tử đó đang được đặt tiêu điểm.

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ó thanh tìm kiếm.

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

   

Bạn cũng có thể thấy tuỳ chọn tương tự bên dưới 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ữ cục bộ thay thế 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, nhà phát triển và nhà thiết kế sử dụng hai bản sao khác nhau của cùng một phông chữ trong quá trình phát triển:

• Một phông chữ cục bộ cho các công cụ thiết kế của bạn và
• Phông chữ trên 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 và tối ưu hoá khi tải phông chữ trên web
• Xác minh tính chính xác của các quy tắc @font-face về 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

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ở Elements > Đã tính toán, di chuyển xuống dưới hết cỡ và trong phần Phông chữ hiển thị, hãy khám phá rằng Chrome đã tìm thấy Courier New trong tệp cục bộ.

   

2. Mở thẻ Hiển thị, chọn Tắt phông chữ trên máy rồi refresh tải lại trang.

3. Hãy quan sát câu bằng Roboto trên web.

   

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

Xem giao diện trang web của bạn khi ở chế độ tối ngay cả khi bạn không triển khai.

Chrome 96 đã giới thiệu 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 chọn Bật chế độ tối tự động.
2. Xem trang này ở chế độ tối.

Mô phỏng khiếm khuyết thị lực

Mọi người đều có thể truy cập và tận hưởng web. Google cam kết sẽ 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ể biết cách những người khiếm thị 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 nội dung Mô phỏng hội chứng mù màu.

Cách mô phỏng khiếm khuyết thị lự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 mục sau trong danh sách thả xuống:

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

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

Các quy trình 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 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>

Để 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ẻ Kết xuất, chọn Tắt định dạng hình ảnh AVIF.
2. refresh Tải lại trang và di chuột qua img src Hình ảnh hiện tại src (currentSrc) hiện là hình ảnh WebP dự phòng.

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