1. Web
  2. CSS
  3. @media
  4. prefers-reduced-data

prefers-reduced-data

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

注意：此特性未被任何使用者代理支援，其具體細節可能會發生變化。

prefers-reduced-data CSS 媒體特性用於檢測使用者是否請求了消耗更少網際網路流量的網頁內容。

語法

no-preference

表示使用者未向系統表明任何偏好。此關鍵字值在布林上下文中評估為假。

reduce

表示使用者已表達了對輕量級替代內容的偏好。

使用者偏好

目前沒有使用者代理實現此特性，儘管各種作業系統確實支援此類偏好，並且如果此媒體查詢將來得以實現，使用者代理可能會依賴於作業系統提供的設定。

示例

注意：目前沒有任何瀏覽器實現此特性，因此以下示例將不起作用。

在此示例中，如果使用者偏好減少資料，則不會預載入或下載 montserrat-regular.woff2 字型檔案，在這種情況下，“系統字型堆疊”將作為備用字型。

HTML

html
<head>
  <link
    rel="preload"
    href="fonts/montserrat-regular.woff2"
    as="font"
    media="(prefers-reduced-data: no-preference)"
    crossorigin />
  <link rel="stylesheet" href="style.css" />
</head>

CSS

css
@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    /* latin */
    src:
      local("Montserrat Regular"),
      local("Montserrat-Regular"),
      url("fonts/montserrat-regular.woff2") format("woff2");
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
      U+FEFF, U+FFFD;
  }
}

body {
  font-family:
    "Montserrat",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Helvetica",
    "Arial",
    sans-serif;
}

規範

規範
媒體查詢 Level 5
# prefers-reduced-data

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者在修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.