prefers-reduced-data media query

概要

prefers-reduced-dataは、ユーザーがデータ通信量の削減を希望しているかどうかを検出するCSSメディアクエリです。このクエリに基づいて、大きなWebフォントの読み込みを避けてシステムフォントを使用したり、高解像度画像の代わりに軽量な画像を提供できます。モバイルネットワークや従量課金制の環境にいるユーザーへの配慮として重要な機能です。

対応ブラウザ

基本構文

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

実務での使いどころ

• 低帯域幅ユーザーへの最適化

  データ節約モードが有効な場合に、軽量な画像やシステムフォントに切り替えてデータ転送量を削減します。

注意点

アクセシビリティ

• データ削減モードでコンテンツや機能が失われないよう、装飾的な要素のみを軽量化の対象にしてください。

参考リンク

• MDN Web Docs — prefers-reduced-data media query