prefers-reduced-data
注意:此功能不受任何用户代理支持,其具体细节可能会发生变化。
语法
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 表格仅在浏览器中加载
另请参阅
Save-Data
HTTP 标头