Медиафункция CSS `prefers-reduced-data`

Медиафункция prefers-reduced-data CSS медиафункция используется для определения того, запросил ли пользователь веб-контент, потребляющий меньше интернет-трафика.

Обычно браузер делает это, проверяя настройки операционной системы, связанные с сокращением потребления данных.

Синтаксис

no-preference

Указывает, что пользователь не сообщил системе о своих предпочтениях. В логическом контексте это ключевое слово принимает значение false.

reduce

Указывает, что пользователь предпочитает облегчённый альтернативный контент.

Примеры

Основное использование

В этом примере файл шрифта montserrat-regular.woff2 не будет предварительно загружен или скачан, если пользователь предпочитает экономить трафик; в этом случае запасным шрифтом будет «системный стек шрифтов»:

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

@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;
}

Спецификации

Совместимость с браузерами

См. также

• HTTP-заголовок Save-Data