prefers-reduced-data

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Hinweis: Dieses Feature wird von keinem Benutzeragent unterstützt und seine Spezifikationen können sich ändern.

Das prefers-reduced-data CSS Medienmerkmal wird verwendet, um zu erkennen, ob der Benutzer Inhalte angefordert hat, die weniger Internet-Traffic verbrauchen.

Syntax

no-preference

Gibt an, dass der Benutzer dem System keine Präferenz mitgeteilt hat. Dieser Schlüsselwortwert wird im booleschen Kontext als false bewertet.

reduce

Gibt an, dass der Benutzer die Präferenz für leichtere Alternativinhalte ausgedrückt hat.

Benutzerpräferenzen

Derzeit implementiert kein Benutzeragent dieses Feature, obwohl verschiedene Betriebssysteme solche Präferenzen unterstützen. Sollte diese Medienanfrage jemals implementiert werden, werden sich Benutzeragenten wahrscheinlich auf die Einstellungen des Betriebssystems stützen.

Beispiele

Hinweis: Kein Browser implementiert derzeit dieses Feature, sodass das folgende Beispiel nicht funktioniert.

In diesem Beispiel wird die Schriftartdatei montserrat-regular.woff2 weder vorgeladen noch heruntergeladen, wenn der Benutzer reduzierte Daten bevorzugt. In diesem Fall wird der "System Font Stack" als Ersatzschriftart dienen:

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

Spezifikationen

Specification
Media Queries Level 5
# prefers-reduced-data

Browser-Kompatibilität

Siehe auch