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, bevor Sie diese produktiv verwenden.

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

Das prefers-reduced-data CSS Media-Feature wird verwendet, um zu erkennen, ob der Benutzer Webinhalte angefordert hat, die weniger Internet-Datenverkehr verbrauchen.

Syntax

no-preference

Gibt an, dass der Benutzer keine Präferenz im System bekannt gegeben hat. Dieser Schlüsselwortwert wird im boolean Kontext als falsch ausgewertet.

reduce

Gibt an, dass der Benutzer die Präferenz für alternativen, leichteren Inhalt ausgedrückt hat.

Benutzerpräferenzen

Derzeit implementiert kein Benutzeragent dieses Feature, obwohl verschiedene Betriebssysteme solche Präferenzen unterstützen. Wenn diese Media Query jemals implementiert wird, werden Benutzeragenten wahrscheinlich auf die Einstellungen zurückgreifen, die vom Betriebssystem bereitgestellt werden.

Beispiele

Hinweis: Kein Browser implementiert derzeit dieses Feature, daher wird das folgende Beispiel nicht funktionieren.

In diesem Beispiel wird die montserrat-regular.woff2-Schriftartdatei weder vorab geladen 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

BCD tables only load in the browser

Siehe auch