Á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
Sofia Emelianova
GitHub

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ẻ Hiển thị.

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

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

  1. Mở thẻ Hiển thị trên demo 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 đỏ.

Quảng cáo được đánh dấu 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 Mô phỏng một trang được đặt tiêu điểm cho phép bạn gỡ lỗi một phần tử như thể phần tử đó đang ở 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, hãy mở thẻ Rendering (Hiển thị), sau đó đánh dấu và xoá Emulate a focused page (Mô phỏng một trang được lấy làm tâm điểm).

    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ự 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ữ thay thế cục bộ có hoạt động như mong đợi 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:

  • Phông chữ cục bộ cho các công cụ thiết kế 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 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 lệnh ở trên, mở Elements (Thành phần) > Computed (Đã tính toán), cuộn xuống hết và trong Rendered Fonts (Phông chữ đã kết xuất), bạn sẽ thấy Chrome tìm thấy Courier New trong các tệp cục bộ.

    Phông chữ được kết xuất: cục bộ

  2. Mở thẻ Hiển thị, 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 Roboto trên web.

    Phông chữ đã hiển thị: tài nguyên mạng

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 đã 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 chọn Bật chế độ tối tự động.
  2. Quan sát trang này ở chế độ tối.

Đã bật chế độ tối tự động

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 biến điều đó thành hiện thực.

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 phần Mô phỏng tình trạng thiếu thị lực màu.

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

  1. Mở thẻ Rendering (Hiển thị).

  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.
    • Mắt mờ.
    • Độ tương phản giảm.
    • Mù màu đỏ (không có màu đỏ). Nhận biết màu đỏ kém; nhầm lẫn giữa màu 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.
    • Mù màu xanh dương (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.

Mù màu xanh dương đã chọn (không có màu xanh dương).

Tắt đị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 kiểm thử 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 đây để phân phát hình ảnh ở định dạng AVIF và WebP cho các trình duyệt mới hơn, cùng với hình ảnh PNG dự phòng cho các trình duyệt cũ.

<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ẻ Rendering (Hiển thị), đánh dấu vào Disable AVIF image format (Tắt định dạng hình ảnh AVIF).
  2. Tải lại trang và di chuột qua img src. src hình ảnh hiện tại (currentSrc) hiện là hình ảnh WebP dự phòng.

Mô phỏng các loại hình ảnh

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