recursal/MDN huggingface dataset:
-webkit-animation
=================

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

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

Apple には Safari CSS リファレンスに説明があります。eference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple\_ref/doc/uid/TP40007601-SW3).

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

構文
--

`-webkit-animation` メディア特性は論理型で、ベンダー接頭辞つきの CSS アニメーションプロパティに対応していれば `true` になります。

### 値

`true`

ブラウザーが `-webkit` の接頭辞の付いた CSS `animation` に対応しています。

`false`

ブラウザーは接頭辞つきの CSS アニメーションに対応していません。

例
-

### -webkit-animation の例


```css
@media (-webkit-animation) {
  /\* CSS to use if animations are supported \*/
}
```

仕様書
---

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

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

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

関連情報
----

* `-webkit-transform-3d`
* `-webkit-transform-2d`
* `-webkit-transition`
* Test page at quirksmode.org
prefers-color-scheme
====================

**`prefers-color-scheme`** は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

ユーザーはオペレーティングシステムの設定 (ライトまたはダークモードなど) やユーザーエージェントの設定で、この設定を示す場合があります。

構文
--

`light`

ユーザーがシステムに、明色のテーマを持つインターフェイスにしたいと通知したか、アクティブな設定を示さなかったことを示します。

`dark`

ユーザーがシステムに、暗色のテーマを持つインターフェイスにしたいと通知したことを示します。

例
-

以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。

### HTML


```html
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
```

### CSS


```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

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

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

関連情報
----

* Firefox での prefers-color-scheme のシミュレーション (Firefox Page Inspector > Examine and edit CSS)
* Video tutorial: Coding a Dark Mode for your Website
* Redesigning your product and website for dark mode
* 色スキームの変更: Windows、macOS、Android、その他のプラットフォーム
inverted-colors
===============

**`inverted-colors`** は CSS のメディア特性で、ユーザーエージェントまたはその下の OS が色を反転しているかどうかを調べるために使用することができます。

構文
--

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

`none`

色が通常通り表示されます。

`inverted`

表示領域内のすべてのピクセルが反転されています。

例
-

### HTML


```html
<p>
  If you're using inverted colors, this text should be blue on white (the
  inverse of yellow on black). If you're not, it should be red on light gray.
</p>
<p>
  If the text is gray, your browser doesn't support the `inverted-colors` media
  feature.
</p>
```

### CSS


```css
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

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

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

`aural` は CSS のメディア種別で、音声出力の能力を持った機器に使用されます。

**メモ:** このメディア種別は `speech` に置き換えられ、非推奨になりました。

構文
--

CSS の `aural` メディア種別は — `speech` メディア種別に置き換えられて非推奨になりましたが — 音声合成装置を使ってコンテンツを表示する場合にのみ適用される CSS のブロックを指定するために使用されていました。


```css
@media aural {
  /\* ここで音声に関するスタイルを定義 \*/
}
```


既存の CSS を `speech` メディアタイプを使用するように更新するのは、`aural` を `speech` に置き換えるだけの簡単な作業です。

例
-

### 基本的な例


```css
@media aural {
  body {
    voice-family: Paul;
  }
}
```

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |

関連情報
----

* メディアクエリー
* メディアクエリーの使用
* `@media`
* `speech`
grid
====

**`grid`** は CSS のメディア特性で、出力機器がグリッドベースの画面を使用しているかどうかを調べるために使用します。

現在のパソコンやスマートフォンの大部分は、ビットマップベースの画面を持っています。グリッドベースの画面とは、例えばテキストのみの端末や、固定フォントのみで表示する基本的な電話などです。

構文
--

`grid` 特性は `<mq-boolean>` (en-US) 値 (`0` または `1`) として指定し、出力機器がグリッドベースであるかどうかを表します。

例
-

### HTML


```html
<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>
```

### CSS


```css
:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

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

**`overflow-block`** は CSS のメディア特性は、初期包含ブロックをブロック軸方向にあふれたコンテンツを機器がどのように扱うかを調べるために使用します。

構文
--

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

`none`

ブロック軸方向にあふれたコンテンツは表示されません。

`scroll`

ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができます。

`optional-paged`

ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができますが、ページ区切りを手動で (`break-inside` などによって) 入れることができ、その後のコンテンツを次のページに表示させることができます。

`paged`

コンテンツは不連続のページに分割されます。１ページをブロック方向にあふれるコンテンツは、次のページに表示されます。

例
-

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS


```css
@media (overflow-block: scroll) {
  p {
    color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-block |

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

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

関連情報
----

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

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

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

構文
--

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

例
-

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


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

仕様書
---

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

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

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

関連情報
----

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

**`overflow-inline`** は CSS のメディア特性で、初期包含ブロックをインライン軸方向にあふれたコンテンツを端末がどのように扱うかを調べるために使用します。

構文
--

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

`none`

インライン軸方向にあふれたコンテンツは表示されません。

`scroll`

インライン軸方向にあふれたコンテンツは、スクロールすることで見ることができます。

例
-

### HTML


```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS


```css
p {
  white-space: nowrap;
}

@media (overflow-inline: scroll) {
  p {
    color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-inline |

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

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

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

**メモ:** この特性は*端末*の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。

構文
--

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

### キーワード値

`portrait`

ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。

`landscape`

ビューポートは横長です。つまり、幅が高さよりも大きい状態です。

例
-

### HTML


```html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
```

### CSS


```css
body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

### 結果

仕様書
---

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

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

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

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

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

**`-webkit-transition`** は CSS の論理メディア特性で、 Chrome 拡張であり、閲覧コンテキストが CSS トランジションに対応していれば値が `true` になります。 WebKit または Blink 以外を使用したブラウザーでは対応していません。

Apple には Safari CSS リファレンスに説明があります。ここでは `transition` と呼ばれるようになりました。

**メモ:** このメディア特性は使用しないでください。これは仕様化されておらず、広く実装されておらず、すべてのブラウザーから削除されています。代わりに `@supports` 特性クエリーを使用してください。

構文
--


```css
@media (-webkit-transition) {
  /\* トランジションに対応している場合に使用される CSS \*/
}
```

例
-

代わりに @supports を使用してください
------------------------

`-webkit-transition` メディア特性を使用しないでください。代わりに、次のように CSS の `@supports` アットルールを用いてトランジションの対応を検査してください。


```css
@supports (transition: initial) {
  /\* トランジションに対応している場合に使われる CSS \*/
}
```

### 廃止された例

廃止される以前、次のように `-webkit-transition` を使用することができました。


```css
@media (-webkit-transition) {
  /\* トランジションに対応している場合に使われる CSS \*/
}
```

仕様書
---

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

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

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

関連情報
----

* メディアクエリーの使用
* CSS トランジションの使用
* `@supports`
* `transition`
shape
=====

`shape` は CSS のメディア特性で、端末の形状が矩形であるか丸いディスプレイであるかを区別するために使用することができます。

構文
--

`shape` は識別機能であり、四角い画面を表す `rect` または丸や楕円の画面を表す `round` の二つの文字列のうちの一つで指定します。

`rect`

形状は長方形か正方形、または角丸矩形などの軸であり、伝統的なデザインが適しています。

`round`

形状は丸や、卵型、楕円などの円に似た形状であり、独特の丸いデザインが適しています。

例
-

### 基本的な例

#### HTML

#### HTML


```html
<h1>Hello World!</h1>
```


#### CSS


```css
h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}
```

### カスタムスタイルシート

この HTML は、丸い画面を持つ端末に特殊なスタイルシートを適用します。


```html
<head>
  <link rel="stylesheet" href="default.css" />
  <link
 media="screen and (shape: rect)"
 rel="stylesheet"
 href="rectangle.css" />
  <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
</head>
```

仕様書
---

| Specification |
| --- |
| CSS Round Display Level 1 # shape-media-feature |

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

{{Compat}}関連情報
----

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

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

**`-webkit-device-pixel-ratio`** は CSS の標準外の論理メディア特性で、標準の`resolution`メディア特性の代替です。

**メモ:** このメディア特性は WebKit の機能です。可能であれば、代わりに `resolution` メディア特性クエリーを使用してください。

構文
--

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

### 値

`<number>`

CSS の `px` を表すために使われるデバイスピクセルの数です。この値は `<number>` であり、構文的に単位を許可しておらず、暗黙の単位は `dppx` です。

実装
--


```css
/\* "dppx" の単位が含まれています。 \*/
@media (-webkit-min-device-pixel-ratio: 2) { ... }
/\* ... は以下のものと同じです。 \*/
@media (min-resolution: 2dppx) { ... }

/\* 同様に \*/
@media (-webkit-max-device-pixel-ratio: 2) { ... }
/\* ... は以下のものと同じです。 \*/
@media (max-resolution: 2dppx) { ... }
```

例
-

### HTML


```html
<p>This is a test of your device's pixel density.</p>
```

### CSS


```css
/\* 正確な解像度 \*/
@media (-webkit-device-pixel-ratio: 1) {
  p {
    color: red;
  }
}

/\* 最低解像度 \*/
@media (-webkit-min-device-pixel-ratio: 1.1) {
  p {
    font-size: 1.5em;
  }
}

/\* 最高解像度 \*/
@media (-webkit-max-device-pixel-ratio: 3) {
  p {
    background: yellow;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-device-pixel-ratio |

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

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

関連情報
----

* メディアクエリーの使用
* `<resolution>`
* `-webkit-transform-2d`
* `-webkit-transform-3d`
* `-webkit-transition`
* `-webkit-animation`
* W3C Suggested Method to UnPrefix
device-aspect-ratio
===================

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

CSS の **`device-aspect-ratio`** メディア特性は、出力機器の幅対高さのアスペクト比を調べるために使用します。

構文
--

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

例
-

### min-device-aspect-ratio の使用


```css
article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}
```

仕様書
---

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

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

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

**`any-hover`** は CSS のメディア特性で、要素の上で停止することができる入力メカニズムが*何らか*利用できるかどうかを検査するために使用することができます。

構文
--

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

`none`

差支えなく停止することができる入力メカニズムがないか、またはポインティング入力メカニズムがない。

`hover`

一つ以上の入力メカニズムが、要素の上で差支えなく停止することができる。

例
-

### 入力手段が停止をすることができるかどうかを検査

#### HTML


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


#### CSS


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


#### 結果

仕様書
---

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

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

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

関連情報
----

* `hover` メディア特性
height
======

**`height`** は CSS のメディア特性で、ビューポートの高さ (またはページ付きメディアのページボックスの高さ) に基づいてスタイルを適用するために使用することができます。

構文
--

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

例
-

### HTML


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

### CSS


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

/\* 最小高 \*/
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/\* 最大高 \*/
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

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

**`resolution`** は CSS のメディア特性で、出力端末のピクセル解像度をテストするために使用することができます。

構文
--

`resolution` 特性は、出力端末のピクセル解像度を表す `<resolution>` 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-resolution`** および **`max-resolution`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

### HTML


```html
<p>This is a test of your device's pixel density.</p>
```

### CSS


```css
/\* 正確な解像度 \*/
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/\* 最小解像度 \*/
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

/\* 最大解像度 \*/
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `window.devicePixelRatio`
* `image-resolution` プロパティ
color-gamut
===========

**`color-gamut`** は CSS のメディア特性で、ユーザーエージェントおよび出力機器が対応している色のおよその範囲を調べるために使用することができます。

構文
--

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

`srgb`

出力機器が sRGB 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。

`p3`

出力機器が DCI P3 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、またsRGB色域を含んでいます。

`rec2020`

出力機器がおよそ ITU-R 勧告 BT.2020 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 REC2020 色域は P3 色域よりも広く、またP3色域を含んでいます。

例
-

### HTML


```html
<p>This is a test.</p>
```

### CSS


```css
@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

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

**`color-index`** は CSS のメディア特性で、出力端末の色参照テーブルの項目数を調べるために使用します。

構文
--

`color-index` 特性は `<integer>` 値で指定し、出力端末の色参照テーブルの項目数を表します。 (端末がそのようなテーブルを使用していなければ、値はゼロになります)。これは範囲を持つ特性であり、つまり接頭辞の付いた **`min-color-index`** および **`max-color-index`** という変化形を使用して、それぞれ最小値と最大値を問い合わせることができます。

例
-

### 基本的な例

#### HTML


```html
<p>これはテストです。</p>
```


#### CSS


```css
p {
  color: black;
}

@media (color-index) {
  p {
    color: red;
  }
}

@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}
```


#### 結果

### 独自スタイルシート

この HTML は、256色以上を持つ端末に専用のスタイルシートを適用します。


```html
<link rel="stylesheet" href="http://foo.bar.com/base.css" />
<link
 rel="stylesheet"
 media="all and (min-color-index: 256)"
 href="http://foo.bar.com/color-stylesheet.css" />
```

仕様書
---

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

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

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

関連情報
----

* メディアクエリーの使用
* @media
WOFF (Web Open Font Format)
===========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
**WOFF (Web Open Font Format)** は、Mozilla が Type Supply や LettError、他の組織と提携して開発した新しい Web フォント形式です。これは、TrueType および OpenType, Open Font Format に使用されているテーブルベースの `sfnt` 構造と同じ圧縮されたバージョンを使用しています。WOFF には、これにメタデータと個人利用のためのデータ構造が追加されており、作成者とベンダーがライセンス情報を書き込むことができる予約フィールドも含まれています。

WOFF の使用には 3 つの利点があります:

1. フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。
2. 自社の TrueType や OpenType 形式のフォントが Web 上で使用されることを許可したくない多くのフォントベンダーは、WOFF 形式のフォントなら使用を許可できるでしょう。これは、サイトのデザイナーに対してフォントの可用性を高めることになります。
3. プロプライエタリなブラウザベンダーもフリーソフトウェアのブラウザベンダーも、WOFF 形式を好んでいます。つまり、他の既存のフォント形式と異なり、WOFF 形式のフォントが、Web のための真にユニバーサルで相互運用が可能なフォント形式になる可能性があります。

WOFF と WOFF2 という、2 つのバージョンの WOFF があります。これらの主な違いは、使用する圧縮アルゴリズムです。`@font-face` では `format` 記述子で、それぞれ `'woff'` と `'woff2'` で識別されます。

WOFF の使用
--------

Web コンテンツのテキストに WOFF フォントを使用するには、`@font-face` CSS プロパティを使用します。これは、OpenType や TrueType 形式のフォントの使用方法と同じです。WOFF 形式のフォントは圧縮されているため、より効率的にコンテンツがダウンロードされるでしょう。

WOFF フォントを扱うためのツール
------------------

* WOFF フォントを扱うためのツールを利用できます。`sfnt2woff` および `woff2sfnt` は、WOFF と OpenType の間の変換を行います。
仕様
--

| Specification |
| --- |
| WOFF File Format 1.0 # OverallStructure |
| WOFF File Format 2.0 # FileStructure |

ブラウザ実装状況
--------

### css.at-rules.font-face.WOFF

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

### css.at-rules.font-face.WOFF\_2

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

関連情報
----

* `@font-face`
negative
========

カスタムカウンターのスタイルを定義する際、 **`negative`** 記述子により、値が負のときにカウンターの表現に付加または前置する記号を指定する方法を提供することで、負のカウンターの表現を変更することができます。

構文
--


```css
/\* <symbol> 値 \*/
negative: "-"; /\* 負の値の場合に先頭に '-' を付ける \*/
negative: "(" ")"; /\* 負の値の場合に '(' と ')' で囲む \*/
```

### Values

first `<symbol>`

カウンターが負の時に、この記号がその表現の前に付きます。

second `<symbol>`

存在する場合、カウンターが負の時に、この記号がその表現の後に追加されます。

解説
--

カウンターの値が負の場合、記述子の値として指定された記号がカウンター表現の前に置かれ、指定された場合は 2 番目の記号が表現の後に追加されます。 negative 記述子は、 `system` の値が `symbolic`, `alphabetic`, `numeric`, `additive`, `extends` の何れかで、拡張カウンタースタイル自体が負の符号を使用している場合のみ有効になります。負のカウンター値に対応していない他のシステムで negative 記述子が指定された場合、その記述子は無視されます。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `"-" hyphen-minus` |
| 計算値 | 指定通り |

形式文法
----
```

<symbol> <symbol>?

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### 負のカウンターを描画する

#### HTML


```html
<ol class="list" start="-3">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>
```


#### CSS


```css
@counter-style neg {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  negative: "(-" ")";
}

.list {
  list-style: neg;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-system |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`, 無名のカウンタースタイルを生成する関数記法。