From 59eca4b00edb35a92d724ee98598ed882cf3e3a2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 9 Jan 2022 00:15:26 +0900 Subject: 2021/08/13 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/@media/prefers-reduced-data/index.md | 79 ++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/ja/web/css/@media/prefers-reduced-data/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/@media/prefers-reduced-data/index.md b/files/ja/web/css/@media/prefers-reduced-data/index.md new file mode 100644 index 0000000000..927998e26e --- /dev/null +++ b/files/ja/web/css/@media/prefers-reduced-data/index.md @@ -0,0 +1,79 @@ +--- +title: prefers-reduced-data +slug: Web/CSS/@media/prefers-reduced-data +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.prefers-reduced-data +translation_of: Web/CSS/@media/prefers-reduced-data +--- +{{CSSRef}}{{SeeCompatTable}}{{draft}} + +> **Note:** この特性は、どのユーザーエージェントも対応しておらず、その仕様が変更される可能性があります。 + +**`prefers-reduced-data`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#メディア特性)で、ユーザーがウェブコンテンツのインターネット通信を削減するようリクエストしていることを検出するために使用します。 + +## 構文 + +- `no-preference` + - : ユーザーがシステムに対して何の設定もしていないことを示します。このキーワードの値は、論理値のコンテキストでは false として評価されます。 +- `reduce` + - : ユーザーが軽量な代替コンテンツを希望していることを示します。 + +## ユーザー設定 + +現在、この特性を実装しているユーザエージェントはありませんが、さまざまなオペレーティングシステムがこのような設定に対応しており、このメディアクエリーが実装された場合、ユーザーエージェントはオペレーティングシステムが提供する設定に依存する可能性が高いでしょう。 + +## 例 + +> **Note:** 現在、この特性を実装しているブラウザーはありませんので、以下の例は動作しません。 + +この例では、 `montserrat-regular.woff2` フォントファイルは先読みもダウンロードもされません。もしユーザーがデータを削減従っているのであれば、この場合「[システムフォントスタック](https://css-tricks.com/snippets/css/system-font-stack/)」が予備フォントとして機能することになります。 + +### HTML + +```html + + + + +``` + +### 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"; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- HTTP の {{HTTPHeader("Save-Data")}} ヘッダー -- cgit v1.2.3-54-g00ecf