Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

prefers-reduced-data media query

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

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

メディアクエリパフォーマンス

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.at-rules.media.prefers-reduced-data` 実験的	85	85			85

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

@media (prefers-reduced-data: reduce) {
  .hero {
    background-image: url('hero-low.jpg');
  }
  body {
    font-family: system-ui;
  }
}

CSS Normal time (highimage) demo.

CSS de-tasection time demo.

CSS No-preference demo.