模擬 CSS 媒體功能

Sofia Emelianova

利用「Rendering」分頁中的模擬選項參考資料，模擬各種 CSS 媒體功能。

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

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

如要模擬這種情況，請按照下列步驟操作：

1. 在「prefers-color-scheme」頁面中，開啟「Rendering」分頁。

2. 在「模擬 CSS 媒體功能」prefers-color-scheme 下方，從下拉式清單中選取下列其中一個選項：

   • 無模擬作業
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

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

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

「列印媒體查詢」可控管頁面列印後的外觀。

如何強制使用列印預覽模式：

1. 開啟「轉譯」分頁，然後在「模擬 CSS 媒體類型」下方選取「列印」。

   

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

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

forced-colors CSS 媒體功能會指出使用者代理程式是否已啟用強制色彩模式。舉例來說，Windows 高對比度就是強制色彩模式的範例。

如要模擬這種情況，請按照下列步驟操作：

1. 開啟「算繪」分頁。

2. 在「模擬 CSS 媒體功能」下方，從下拉式清單中選取下列其中一個選項：forced-colors

   • 不模擬
   • forced-colors:active
   • forced-colors:none

透過 forced-colors:active 模擬：

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

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

如要模擬這個條件：

1. 開啟「算繪」分頁。

2. 在「模擬 CSS 媒體功能」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 媒體功能：指出使用者是否要求減少裝置上使用的透明或半透明圖層效果。

Chrome 118 版提供 prefers-reduced-transparency 功能，可讓您根據使用者指定的偏好設定調整網頁內容，降低作業系統的透明度，例如 macOS 的「減少透明度」設定。

如要模擬這種情況，請按照下列步驟操作：

1. 開啟「算繪」分頁。
2. 在「模擬 CSS 媒體功能 prefers-reduced-transparency」下方，選取 prefers-reduced-transparency: reduce。
3. 檢查網頁是否正確顯示。

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

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

如要模擬這種情況，請按照下列步驟操作：

1. 開啟「Rendering」分頁。

2. 在「模擬 CSS 媒體功能」下方，從下拉式清單中選取下列其中一個選項：color-gamut

   • 無模擬作業
   • color-gamut:srgb：約為 sRGB 大或以上
   • color-gamut:p3：約略等於 Display P3 色彩空間中指定的範圍
   • color-gamut:rec2020：大約等於 Rec. 2020 中指定的色域或更大