recursal/MDN huggingface dataset:
font-display
============

**`font-display`** 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。

構文
--


```css
/\* キーワード値 \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### 値

`auto`

フォントの表示戦略はユーザーエージェントが定義します。

`block`

フォントに対して短いブロック時間の後、永続的にスワップ時間を置きます。

`swap`

フォントに対して非常に短いブロック時間の後、永続的にスワップ時間を置きます。

`fallback`

フォントに対して非常に短いブロック時間の後、短いスワップ時間を置きます。

`optional`

フォントに対して非常に短いブロック時間の後、スワップ時間を置きません。


**メモ:** Firefox では、 `gfx.downloadable_fonts.fallback_delay` および `gfx.downloadable_fonts.fallback_delay_short` の設定項目で、それぞれ "short" および "extremely small" の時間が利用できます。

解説
--

### フォント表示の過程

フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時間に分かれます。

フォントブロック時間

フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は*不可視の*代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。

フォントスワップ時間

フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。

フォント失敗時間

フォントが読み込まれていなければ、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `auto` |
| 計算値 | 指定通り |

形式文法
----
```

font-display =   
  auto      |  
  block     |  
  swap      |  
  fallback  |  
  optional    
  
```

例
-

### font-display のフォールバックの指定


```css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-display-desc |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range`
prefers-reduced-motion
======================

**`prefers-reduced-motion`** は CSS のメディア特性で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。

**警告:** このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。

構文
--

`no-preference`

システムが把握している設定をユーザーが行っていないことを示します。

`reduce`

前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。

ユーザー設定
------

Firefox では、 `reduce` の要求は以下の場合に尊重されます。

* GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。
    + 他にも、 `gtk-enable-animations = false` を GTK 3 configuration file の `[Settings]` に追加する方法もあります。
* Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する
* Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合)
* macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制
* iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす
* Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除
* Firefox では `about:config`: 数値型の設定項目 `ui.prefersReducedMotion` を追加し、値を `1` とします。この設定の変更は直ちに効果が現れます。
例
-

この例では、既定でで拡大縮小アニメーションが使用されています。アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされます。

### HTML


```html
<div class="animation">animated box</div>
```

### CSS


```css
.animation {
  animation: pulse 1s linear infinite both;
}

/\* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. \*/
@media (prefers-reduced-motion) {
  .animation {
    animation-name: dissolve;
  }
}
```


```
.animation {
  background-color: #306;
  color: #fff;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-motion |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* An Introduction to the Reduced Motion Media Query (CSS Tricks)
* Responsive Design for Motion (WebKit Blog) includes vestibular motion trigger examples.
any-pointer
===========

**`any-pointer`** は CSS のメディア特性で、ユーザーが (マウスなどの) *何らかの*ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。

**メモ:** *第一の*ポインティングデバイスの正確性を調べたい場合は、代わりに `pointer` を使用してください。

構文
--

`any-pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。

`none`

利用できるポインティングデバイスがありません。

`coarse`

正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。

`fine`

正確性が高いポインティングデバイスが、少なくとも一つ含まれています。


**メモ:** 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 `none` はポインティングデバイスがない場合のみ一致します。

例
-

この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。

### HTML


```html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
```

### CSS


```css
input[type="checkbox"]:checked {
  background: gray;
}

@media (any-pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (any-pointer: coarse) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # any-input |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `pointer` メディア特性
aspect-ratio
============

**`aspect-ratio`** は CSS のメディア特性で、ビューポートのアスペクト比を調べるために使用します。

構文
--

`aspect-ratio` 特性は、ビューポートの幅対高さのアスペクト比を表現する `<ratio>` 値で指定します。これは範囲の特性であり、接頭辞の付いた **`min-aspect-ratio`** および **`max-aspect-ratio`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

以下の例は独自のビューポートを生成する `<iframe>` に含まれています。 `<iframe>` の大きさを変更して `aspect-ratio` の変化を確認してください。

なお、メディアクエリーの条件がどれも true でない場合、背景は白になります。これは、以下のルールが `<iframe>` 内の `<div>` に適用されないためです。どの幅と高さの値がこれを起こすのか、見つけてみてください。

### HTML


```html
<div id="inner">
  ビューポートの幅と高さを変更しながら、この要素を見ていてください。
</div>
```

### CSS


```css
/\* 最小アスペクト比 \*/
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /\* blue \*/
  }
}

/\* 最大アスペクト比 \*/
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /\* cyan \*/
  }
}

/\* 正確なアスペクト比。上書きを防ぐために最下部に配置 \*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /\* red \*/
  }
}
```

### 結果
```

<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />

<iframe
 id="outer"
 src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>">
</iframe>
```


```
iframe {
  display: block;
}
```


```
outer.style.width = outer.style.height = "165px";

w.onchange = w.oninput = function () {
  outer.style.width = w.value + "px";
  wf.textContent = "width:" + w.value;
};
h.onchange = h.oninput = function () {
  outer.style.height = h.value + "px";
  hf.textContent = "height:" + h.value;
};
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # aspect-ratio |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリーの使用
* @media
monochrome
==========

**`light-level`** は CSS のメディア特性で、出力機器のモノクロフレームバッファのピクセルあたりのビット数を調べるために使用することができます。

構文
--

`monochrome` 特性は `<integer>` 値で指定し、モノクロフレームバッファのピクセルあたりのビット数を表します。機器がモノクロ機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた **`min-monochrome`** および **`max-monochrome`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

### HTML


```html
<p class="mono">この機器はモノクロピクセルに対応しています。</p>
<p class="no-mono">この機器はモノクロピクセルに対応していません。</p>
```

### CSS


```css
p {
  display: none;
}

/\* 任意のモノクロ機器 \*/
@media (monochrome) {
  p.mono {
    display: block;
    color: #333;
  }
}

/\* 任意のモノクロでない機器 \*/
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # monochrome |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
prefers-reduced-data
====================

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

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

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

構文
--

`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 |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTTP の `Save-Data` (en-US) ヘッダー
-webkit-transform-2d
====================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-webkit-transform-2d`** は CSS の論理メディア特性 で Chrome 拡張であり、ベンダー接頭辞付きの CSS の二次元 `transform` に対応していれば値が `true` になります。

Apple には Safari CSS リファレンスに説明があります。

構文
--

`-webkit-transform-2d` は CSS の論理メディア特性 で Chrome 拡張であり、 `-webkit` 接頭辞付きの CSS の二次元 `transform` に対応していれば値が `true` になります。

### 値

`true`

ブラウザーは二次元の CSS 座標変換に `-webkit` の接頭辞つきで対応しています。

`false`

二次元の CSS 座標変換で `-webkit` の接頭辞が付いたものはブラウザーが対応していません。

例
-

### 基本的な例


```css
@media (-webkit-transform-2d) {
  div {
    -webkit-transform: translate(100px, 100px);
  }
}
```


このメディア機能は WebKit でのみ対応しています。可能であれば、代わりに `@supports` 機能クエリを使用してください。


```css
@supports (-webkit-transform: translate(100px, 100px)) {
  div {
    -webkit-transform: translate(100px, 100px);
  }
}
```

仕様書
---

どの標準でも定義されていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `-webkit-transform-3d`
* `-webkit-transition`
* `-webkit-animation`
* Test page at quirksmode.org
prefers-contrast
================

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

**`prefers-contrast`** は CSS のメディア特性で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。

構文
--

`no-preference`

ユーザーが設定をシステムに通知していないことを示します。このキーワード値は、boolean のコンテキストでは false と評価されます。

`more`

ユーザーが、より高いコントラストをもつインターフェイスを好むことをシステムに通知したことを示します。

`less`

ユーザーが、より低いコントラストを持つインタフェース好むことをシステムに通知したことを示します。

ユーザー設定
------

様々なオペレーティングシステムがこのような設定をサポートしており、ユーザエージェントはオペレーティングシステムによって提供される設定に依存することになるでしょう。

例
-

この例では、既定でいまいましい低いコントラストが与えられています。

### HTML


```html
<div class="contrast">low contrast box</div>
```

### CSS


```css
.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-contrast |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Microsoft -ms-high-contrast メディア特性
* CSS の forced-colors メディアクエリー
display-mode
============

CSS の **`display-mode`** メディア特性は、アプリケーションの表示モードに基づいて選択的に CSS を適用するために使います。これは、サイトを URL から起動した場合とデスクトップアイコンから実行した場合の使い勝手に一貫性を持たせるために使用することができます。

この特性は、ウェブアプリマニフェストの `display` メンバーに対応しています。これは、最上位の閲覧コンテキストと子の閲覧コンテキストの両方に適用されます。このクエリーは、ウェブアプリマニフェストの有無にかかわらず適用されます。

構文
--

`display-mode` 特性は、以下の一覧のうち一つのキーワード値で指定します。

| 表示モード | 説明 | 代替表示モード |
| --- | --- | --- |
| `fullscreen` | 利用可能な表示領域がすべて使用され、ユーザーエージェントのクロームは表示されません。 | `standalone` |
| `standalone` | アプリケーションはスタンドアロンアプリケーションのような外観や操作感になります。これは、アプリケーションが個別のウィンドウを持ったり、アプリケーションランチャーに独自のアイコンを持ったりすることを含みます。このモードでは、ユーザーエージェントはナビゲーション制御のための UI 要素を除外しますが、ステータスバーなどその他の UI を含めることができます。 | `minimal-ui` |
| `minimal-ui` | アプリケーションはスタンドアロンアプリケーションのような外観や操作感になりますが、ナビゲーション制御のための最小限の UI 要素を持ちます。要素はブラウザーによって異なります。 | `browser` |
| `browser` | アプリケーションは、ブラウザーとプラットフォームに応じて、従来のブラウザータブまたは新しいウィンドウで開きます。 | (なし) |

例
-

### 端末が全画面モード時に使用される CSS


```css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # display-mode |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリーの使用
* @media
device-height
=============

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

CSS の **`device-height`** メディア特性は、出力機器の描画面の高さを調べるために使用することができます。

構文
--

`device-height` 特性は、 `<length>` 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-device-height`** および **`max-device-height`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

この HTML は、800 ピクセルより低い機器に特別のスタイルシートを適用します。


```html
<link
 rel="stylesheet"
 media="screen and (max-device-height: 799px)"
 href="http://foo.bar.com/short-styles.css" />
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # device-height |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリーの使用
* @media
pointer
=======

**`pointer`** は CSS のメディア特性で、ユーザーが（マウスなどの）ポインティングデバイスを持っているか、もしそうならば、*主要な*ポインティングデバイスにどれだけの正確性があるかを調べます。

**メモ:** *すべての*ポインティングデバイスの正確性を調べたい場合は、代わりに `[any-pointer](/ja/docs/Web/CSS/@media/any-pointer)` を使用してください。

構文
--

`pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。

`none`

主要な入力メカニズムに、ポインティングデバイスがありません。

`coarse`

主要な入力メカニズムにポインティングデバイスがありますが、その正確性が限定されています。

`fine`

主要な入力メカニズムにポインティングデバイスがあり、正確性も高いです。

例
-

次の例は、主要なポインティングデバイスの正確性によって、チェックボックスの大きさを変更しています。正確性が高い場合は小さく、低い場合は大きくなります。

### HTML


```html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
```

### CSS


```css
input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # pointer |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `any-pointer` メディア特性
-webkit-transform-3d
====================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-webkit-transform-3d`** は CSS の論理メディア特性で Chrome 拡張であり、ベンダー接頭辞付きの CSS 3D `transform` に対応していれば値が `true` になります。

**メモ:** このメディア特性は WebKit および Blink でのみ対応しています。可能であれば、 `@supports` 特性クエリーを代わりに使用してください。

構文
--

`-webkit-transform-3d` は CSS の論理メディア特性で Chrome 拡張であり、ベンダー接頭辞付きの CSS 3D `transform` に対応していれば値が `true` になります。

### Values

`true`

ブラウザーは三次元の CSS 座標変換に `-webkit` の接頭辞つきで対応しています。

`false`

三次元の CSS 座標変換で `-webkit` の接頭辞が付いたものはブラウザーが対応していません。

例
-

### -webkit-transform-3d のメディアクエリーの例


```css
@media (-webkit-transform-3d) {
  .foo {
    transform-style: preserve-3d;
  }
}

@media (-webkit-transform-3d: 1) {
  .foo {
    transform-style: preserve-3d;
  }
}
```

仕様書
---

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-transform-3d |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `-webkit-transform-2d`
* `-webkit-transition`
* `-webkit-animation`
* Test page at quirksmode.org
scripting
=========

**`scripting`** は CSS のメディア特性で、 (JavaScript などの) スクリプトが利用できるかどうかを調べるために使用することができます。

構文
--

`scripting` 特性は、以下の一覧のうち一つのキーワード値で指定します。

`none`

スクリプトは現在の文書で全く利用できません。

`initial-only`

スクリプトはページを読み込んでいる間は利用できますが、その後は利用できません。

`enabled`

現在の文書がスクリプトに対応しており、有効です。

例
-

### HTML


```html
<p class="script-none">スクリプトは利用できません。 :-(</p>
<p class="script-initial-only">
  スクリプトはページを読み込んでいる間だけ有効です。残念。
</p>
<p class="script-enabled">スクリプトは有効です。 :-)</p>
```

### CSS


```css
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # scripting |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリーの使用
* @media
-moz-device-pixel-ratio
=======================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

 **非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`-moz-device-pixel-ratio`** は Gecko 独自の CSS の Gecko のみのメディア特性で、 CSS ピクセルあたりのデバイスピクセル数に基づいてスタイルを適用することができます。

**警告:** この特性を使用しないでください。代わりに `resolution` 特性と `dppx` の単位を使用してください。

**メモ:** このメディア特性は Webkit および IE 11 for Windows Phone 8.1 でも `-webkit-device-pixel-ratio` として実装されています。 min および max 接頭辞は、 Gecko では `min--moz-device-pixel-ratio` および `max--moz-device-pixel-ratio` です。しかし、同じ接頭辞が Webkit では `-webkit-min-device-pixel-ratio` および `-webkit-max-device-pixel-ratio` として実装されています。

構文
--

`<number>`

CSS ピクセルあたりのデバイスピクセル数。


**メディア:** `@media`
**min/max 接頭辞の受付:** はい

例
-

### 基本的な互換コード

`-moz-device-pixel-ratio` は Firefox のバージョン 16 以前や、 `dppx` に未対応の WebKit ベースのブラウザーの `-webkit-device-pixel-ratio` との互換性のために使用されることがあります。

例:


```css
/\* Webkit ベースのブラウザー \*/
@media (-webkit-min-device-pixel-ratio: 2),
  (min--moz-device-pixel-ratio: 2) /\* 古い Firefox ブラウザー (firefox 16 以前) \*/,
  (min-resolution: 2dppx) /\* 標準の方法 \*/,
  (min-resolution: 192dpi); /\* dppx のフォールバック \*/
```


**メモ:** `resolution` および `dppx` に関わる互換性の良い習慣については、 CSSWG の記事を参照してください。

仕様書
---

どの仕様書にも含まれていません。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリーの使用
* @media
width
=====

**`width`** は CSS のメディア特性で、ビューポートの幅 (またはページ付きメディアのページボックスの幅) をテストするために使用することができます。

構文
--

`width` 特性は、ビューポートの幅を表す `<length>` 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-width`** および **`max-width`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

### HTML


```html
<div>ビューポートの幅を変更しながらこの要素を見ていてください。</div>
```

### CSS


```css
/\* 正確な幅 \*/
@media (width: 360px) {
  div {
    color: red;
  }
}

/\* 最小幅 \*/
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/\* 最大幅 \*/
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # width |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリーの使用
* @media
color
=====

**`color`** は CSS のメディア特性で、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を調べるために使用します。

構文
--

`color` 特性は `<integer>` 値で指定し、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を表します。機器がカラー機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた **`min-color`** および **`max-color`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

**メモ:** それぞれの色成分が異なるビット数で表現される場合は、最も小さい値が使用されます。例えば、ディスプレイが青と赤に 5 ビット、緑に 6 ビット使用する場合は、機器は色成分当たり 5 ビットを使用していると見なされます。機器がインデックス色を使用している場合は、色テーブル内の色成分当たりのビット数の最小値が使用されます。

CSS を使用して HTML に色を適用することについて、詳しくは CSS を使用した HTML 要素への色の適用をご覧ください。

例
-

### HTML


```html
<p>
  このテキストは白黒機器では黒で、色数が少ない機器では赤で、色数が多い機器では緑っぽく表示されます。
</p>
```

### CSS


```css
p {
  color: black;
}

/\* すべてのカラー機器 \*/
@media (color) {
  p {
    color: red;
  }
}

/\* 色成分当たり 8 ビット以上の色を持つ機器 \*/
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # color |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS を使った HTML の要素への色の適用
* CSS `color` プロパティ
* CSS `<color>` データ型
update
======

**`update`** は CSS のメディア特性で、出力端末がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。

構文
--

`update` 特性は、以下の一覧のうち一つのキーワード値で指定します。

`none`

いったん表示されると、レイアウトは更新されることはありません。例: 紙に印刷する文書。

`slow`

通常の CSS の規則によってレイアウトを動的に変更することができますが、出力端末はアニメーションが円滑に見えるほど変更をすばやく表示することができません。例: 電子ブックリーダーや一部の動力の低い端末。

`fast`

レイアウトは通常の CSS の規則によってレイアウトを動的に変更することができ、出力端末はふつう表示速度が制約されることがなく、 CSS アニメーションのような恒常的な更新を使用することができます。例: コンピューターの画面。

例
-

### HTML


```html
<p>このテキストが動いていれば、高速に更新できる端末を使用しています。</p>
```

### CSS


```css
@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # update |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリーの使用
* @media
hover
=====

CSS の **`hover`** メディア特性は、*第一の*入力機構が要素の上でホバー (停止) することができるかどうかを検査するために使用することができます。

構文
--

`hover` 特性は、以下の一覧のうち一つのキーワード値で指定します。

`none`

第一の入力機構が全くホバーができないか、差支えなくホバーをすることができない (例えば、多くのモバイル機器は便利ではないものの、ロングタップのユーザー操作で擬似的に停止を実現する)、または第一の入力機構がない。

`hover`

第一の入力機構が、要素の上で差支えなくホバーすることができる。

例
-

### HTML


```html
<a href="#">Try hovering over me!</a>
```

### CSS


```css
@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # hover |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* メディアクエリーの使用
* @media