prefers-reduced-data

实验性: 这是一个 实验性技术
在生产环境中使用此功能前,请仔细查看 浏览器兼容性表

注意:此功能不受任何用户代理支持,其具体细节可能会发生变化。

prefers-reduced-data CSS 媒体特性 用于检测用户是否已请求消耗较少网络流量的网页内容。

语法

no-preference

指示用户未向系统表达任何偏好。此关键字值在布尔上下文中计算为 false。

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: 400;
    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,
    "Microsoft YaHei",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

规范

规范
媒体查询级别 5
# prefers-reduced-data

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅