模擬 CSS 媒體功能

Sofia Emelianova
Sofia Emelianova
GitHub

參考「算繪」分頁的模擬選項參照，來模擬各種 CSS 媒體功能。

模擬 CSS 媒體功能「prefers-color-scheme」

prefers-color-scheme CSS 媒體功能會指出使用者偏好淺色或深色色彩配置。

如何模擬這項條件：

  1. 在「prefers-color-scheme」頁面上開啟「算繪」分頁。

  2. 在「Emulate CSS media feature」prefers-color-scheme下方，選取下列其中一個選項：

    • 沒有模擬
    • prefers-color-scheme:light
    • prefers-color-scheme:dark

  3. 重新載入頁面。例如：

模擬偏好顏色-顏色：dark

模擬 CSS 媒體類型 (啟用列印預覽)

列印媒體查詢可控管網頁列印後的外觀。

如何強制將頁面進入列印預覽模式：

  1. 開啟「Rendering」分頁，然後在「Emulate CSS media type」下方選取「print」。

    列印預覽模式

  2. 您可以在這裡查看及變更 CSS，就像任何其他網頁一樣。請參閱「開始使用查看及變更 CSS」一文。

模擬 CSS 媒體功能「forced-colors」

forced-colors CSS 媒體功能會指出使用者代理程式是否啟用強制色彩模式。強制色彩模式的例子包括「Windows 高對比」。

如何模擬這項條件：

  1. 開啟「轉譯」分頁。

  2. 在「Emulate CSS media feature」forced-colors下方，選取下列其中一個選項：

    • 沒有模擬
    • forced-colors:active
    • forced-colors:none

模擬 forced-colors:active 後：

forced-colors:active

模擬 CSS 媒體功能「prefers-contrast」

prefers-contrast CSS 媒體功能會指出使用者是否要求以較高、較低或特定對比值來要求網頁內容。

如何模擬這項條件：

  1. 開啟「轉譯」分頁。

  2. 在「Emulate CSS media feature」prefers-contrast下方，選取下列其中一個選項：

    • 沒有模擬
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

模擬 CSS 媒體功能「prefers-reduced-motion」

prefers-reduced-motion CSS 媒體功能會指出使用者是否已請求盡可能減少網頁上的動作量。

如何模擬這項條件：

  1. 開啟這個示範上的「算繪」分頁，然後嘗試捲動畫面查看各種動畫。
  2. 在「Emulate CSS media feature」prefers-reduced-motion下方，選取「prefers-reduced-motion:reduce」。
  3. 請嘗試再捲動一次。

模擬 CSS 媒體功能「prefers-reduced-transparency」

prefers-reduced-transparency CSS 媒體功能會指出使用者是否要求減少裝置使用的透明或半透明圖層效果。

prefers-reduced-transparency 功能自 Chrome 118 版推出，可讓您根據使用者所選的偏好設定調整網頁內容，降低 OS 的透明度，例如 macOS 的「減少透明度」設定。

如何模擬這項條件：

  1. 開啟「轉譯」分頁。
  2. 在「Emulate CSS media feature」prefers-reduced-transparency下方，選取「prefers-reduced-transparency: reduce」。
  3. 檢查網頁是否能正確顯示。

模擬 CSS 媒體功能「color-gamut」

color-gamut CSS 媒體功能會指出使用者代理程式和輸出裝置所支援的顏色範圍。

如何模擬這項條件：

  1. 開啟「轉譯」分頁。

  2. 在「Emulate CSS media feature」color-gamut下方，選取下列其中一個選項：

    • 沒有模擬
    • color-gamut:srgb：約 sRGB 色域或以上
    • color-gamut:p3：大約在 Display P3 色域中指定的域名
    • color-gamut:rec2020：大約在 Rec. 2020 或以上指定的域名