prefers-reduced-data

Limited availability

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

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

メモ: この特性は、どのユーザーエージェントも対応しておらず、その仕様が変更される可能性があります。

prefers-reduced-dataCSSメディア特性で、ユーザーがウェブコンテンツのインターネット通信を削減するようリクエストしていることを検出するために使用します。

構文

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

結果

仕様書

Specification
Media Queries Level 5
# prefers-reduced-data

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
prefers-reduced-data media feature
Experimental

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.

関連情報