recursal/MDN huggingface dataset:
-webkit-box-reflect
===================

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

**`-webkit-box-reflect`** は CSS のプロパティで、要素の内容を特定の方向に反射させることができます。


```css
/\* 方向の値 \*/
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/\* オフセット値 \*/
-webkit-box-reflect: below 10px;

/\* マスク値 \*/
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/\* グローバル値 \*/
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;
```


**警告:** この機能は**ウェブサイトで使うためのものではありません**。ウェブで反射効果を実現する上で、標準の方法は CSS の `element()` 関数を使用することです。

構文
--

### 値

`above`*,* `below`*,* `right`*,* `left`

どの方向に反射するかを示すキーワードです。

`<length>`

反射の大きさを示します。

`<image>`

反射に適用されるマスクを記述します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item仕様書
---

標準には含まれていません。反射効果を CSS で実現する標準の方法は、 CSS の `element()` 関数を使用することです。

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

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

関連情報
----

* Apple のドキュメント
* Webkit の仕様書.
* Lea Verou's article on reflection using CSS features on the standard track.
outline-style
=============

CSS の **`outline-style`** プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 `border` よりも外側です。

試してみましょう
--------

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ `outline` を使ったほうが便利です。

構文
--


```css
/\* キーワード値 \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/\* グローバル値 \*/
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;
```


`outline-style` プロパティは、以下に挙げた値のうちの一つで指定します。

### 値

`auto`

ユーザーエージェントに輪郭線の描画を任せます。

`none`

輪郭線を描きません。`outline-width` は `0` です。

`dotted`

点線の輪郭線です。

`dashed`

破線の輪郭線です。

`solid`

1 本の実線の輪郭線です。

`double`

2 本の実線の輪郭線です。`outline-width` は 2 本の線とその隙間の合計です。

`groove`

ページに刻まれたかのように見える輪郭線です。

`ridge`

`groove` の逆で、ページから押し出されたように見える輪郭線です。

`inset`

領域がページに埋め込まれたかのように見える輪郭線です。

`outset`

`inset` の逆で、領域がページから隆起しているように見える輪郭線です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

outline-style =   
  auto                  |  
  <outline-line-style>    
  
```

例
-

### 輪郭線のスタイルを auto に設定

`auto` の値は、輪郭線のスタイルが独自のものであることを表します。仕様書によれば、「典型的には、プラットフォーム用のユーザーインターフェイスの既定のスタイル、または、CSS で詳細に記述できるスタイルよりも表現豊かなスタイル 、例えば、輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線」となっています。

#### HTML


```html
<div>
  <p class="auto">Outline デモ</p>
</div>
```


#### CSS


```css
.auto {
  outline-style: auto; /\* "outline: auto" と同じ \*/
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


#### 結果

### 輪郭線を dashed と dotted に設定

#### HTML


```html
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>
```


#### CSS


```css
.dotted {
  outline-style: dotted; /\* "outline: dotted" と同じ \*/
}
.dashed {
  outline-style: dashed;
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


#### 結果

### 輪郭線のスタイルを solid と double に設定

#### HTML


```html
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>
```


#### CSS


```css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


#### 結果

### 輪郭線のスタイルを groove と ridge に設定

#### HTML


```html
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>
```


#### CSS


```css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


#### 結果

### 輪郭線のスタイルを inset と outset に設定

#### HTML


```html
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>
```


#### CSS


```css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* デモを見やすく \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-style |

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

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

関連情報
----

* `outline`
* `outline-color`
* `outline-width`
mask-border-width
=================

**`mask-border-width`** は CSS のプロパティで、要素のマスク境界の幅を設定します。

構文
--


```css
/\* キーワード値 \*/
mask-border-width: auto;

/\* <length> 値 \*/
mask-border-width: 1rem;

/\* <percentage> 値 \*/
mask-border-width: 25%;

/\* <number> 値 \*/
mask-border-width: 3;

/\* 上下 | 左右 \*/
mask-border-width: 2em 3em;

/\* 上 | 左右 | 下 \*/
mask-border-width: 5% 15% 10%;

/\* 上 | 右 | 下 | 左 \*/
mask-border-width: 5% 2em 10% auto;

/\* グローバル値 \*/
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: revert;
mask-border-width: unset;
```


`mask-border-width` プロパティは、以下の値のリストの中から 1 ～ 4 つの値を使って指定することができます。

* 値が **1 つ**指定された場合、**全 4 辺**に同じマージンが適用される。
* 値が **2 つ**指定された場合、1 つ目のマージンは**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目のマージンは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、マージンはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
### 値

`<length-percentage>`

マスク境界の幅を、 `<length>` または `<percentage>` で指定します。パーセント値は左右のオフセットについては境界領域の*幅*に対する相対値、上下のオフセットについては境界領域の*高さ*に対する相対値です。負の数であってはなりません。

`<number>`

マスク境界の幅を、対応する `border-width` の倍数で指定します。負の数であってはなりません。

`auto`

マスク境界の幅は、対応する `mask-border-slice` の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する `border-width` が代わりに使用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | 境界マスク画像領域の幅/高さに対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-border-width =   
  [ <length-percentage> | <number> | auto ]{1,4}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクの幅を定義することになります。このプロパティを `mask-border-slice` と異なる値に設定すると、スライスは境界マスクに合わせて拡大縮小されます。


```css
mask-border-width: 30 fill;
```


Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-width` — に接頭辞つきで対応しています。


```css
-webkit-mask-box-image-width: 20px;
```


**メモ:** `mask-border` ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-width |

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

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

関連情報
----

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
:-moz-locale-dir(ltr)
=====================

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

**`:-moz-locale-dir(ltr)`** は CSS の擬似クラスで、 Mozilla 拡張であり、ユーザーインターフェイスが左から右へ向けて表示される要素に一致します。これは設定の `intl.uidirection.locale` （*`locale`* は現在のロケール）が "ltr" に設定されていることで特定されます。

**メモ:** 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。

**警告:** このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致します。

構文
--


```css
:-moz-locale-dir(ltr) {}
```

例
-

この例は、Firefoxを使用していない場合は動作しません。また、セレクタがHTMLコンテンツで正しく動作しない問題があるため、Firefoxでも動作しない場合があります。XUL](/ja/docs/Archive/Mozilla/XUL)で使用するために設計されています。

### HTML


```html
<p>If you're using a left-to-right interface, this should be red.</p>
```

### CSS


```css
p:-moz-locale-dir(ltr) {
  color: red;
}
```

### 結果

仕様書
---

どの標準にも含まれていません。

関連情報
----

* `:dir(…)`
* `:-moz-locale-dir(rtl)`
column-fill
===========

**`column-fill`** は CSS のプロパティで、段組みレイアウトで要素の内容物が複数の段に分割されるとき、どのようにバランスを取るのかを制御します。

試してみましょう
--------

構文
--


```css
/\* キーワード値 \*/
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

/\* グローバル値 \*/
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: unset;
```


`column-fill` プロパティは、以下に挙げたキーワード値のうちの 1 つで指定します。初期値は `balance` で、コンテンツは段の間で均等になります。

### 値

`auto`

段は順に埋められます。コンテンツは必要な余地があるときだけ分割されるので、一部の段は空になることがあります。

`balance`

コンテンツは各段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、最後の断片のみが均等に分割されます。従ってページ付きメディアでは、最後のページのみが均等に分割されます。

`balance-all`

コンテンツは格段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、すべての断片が均等になります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `balance` |
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

column-fill =   
  auto         |  
  balance      |  
  balance-all    
  
```

例
-

### 段の内容を均等にする

#### HTML


```html
<p class="fill-auto">
  この段落では、段を 1 つずつ埋めていきます。すべてのテキストが最初の段に収まるので、他の段は空白になります。
</p>

<p class="fill-balance">
  この段落では、それぞれの段で内容量のバランスを取ろうとします。
</p>
```


#### CSS


```css
p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # cf |

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

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

**警告:** 仕様上の未解決の問題により、 `column-fill` にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。

特に、 `column-fill: auto` を使用して連続的に段を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の段をすべての内容物で埋めます。

関連情報
----

* 段組みレイアウト
* `column-count`
* `column-width`
scroll-padding-bottom
=====================

`scroll-padding-bottom` プロパティは、スクロールポートの*最適表示領域*の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

試してみましょう
--------

構文
--


```css
/\* キーワード値 \*/
scroll-padding-bottom: auto;

/\* <length> 値 \*/
scroll-padding-bottom: 10px;
scroll-padding-bottom: 1em;
scroll-padding-bottom: 10%;

/\* グローバル値 \*/
scroll-padding-bottom: inherit;
scroll-padding-bottom: initial;
scroll-padding-bottom: revert;
scroll-padding-bottom: unset;
```

### 値

`<length-percentage>`

スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。

`auto`

オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding-bottom =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap
scroll-margin-block
===================

`scroll-margin-block` は一括指定プロパティで、ブロック方向のスクロールマージンを設定します。

試してみましょう
--------

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `scroll-margin-block-end`
* `scroll-margin-block-start`
構文
--


```css
/\* <length> 値 \*/
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

/\* Global values \*/
scroll-margin-block: inherit;
scroll-margin-block: initial;
scroll-margin-block: revert;
scroll-margin-block: unset;
```

### 値

`<length>`

スクロールコンテナーの対応する辺からの距離です。

解説
--

`scroll-margin` の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-margin-block-start`: `0`
* `scroll-margin-block-end`: `0`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-margin-block-start`: 指定通り
* `scroll-margin-block-end`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-margin-block =   
  <length>{1,2}    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-block |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap
カスタムプロパティ (--\*): CSS 変数
========================

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

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

* Learn more
* See full compatibility
* Report feedback
接頭辞 `--` が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 `var()` 関数を用いて他の宣言の中で使用することができる値を持ちます。

カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。

|  |  |
| --- | --- |
| 初期値 | 本文を参照 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 変数を代入して指定した通り |
| アニメーションの種類 | 離散値 |

構文
--


```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```


`<declaration-value>`

この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。


**メモ:** カスタムプロパティ名は大文字・小文字の区別があります。 `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。

### 形式文法

Error: could not find syntax for this item例
-

### HTML


```html
<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p>
<div id="container">
  <p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p>
</div>
```

### CSS


```css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |

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

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

関連情報
----

* CSS 変数の使用
* `var()` 関数
CSS 構文
======

**CSS 構文**モジュールは、一般的な用語として、カスケーディングスタイルシート (CSS) の構造と構文について記述しています。 CSS は、ウェブや他の場所での構造化文書（HTML や XML など）のレンダリングを記述するための言語として定義されています。

このモジュールはプロパティ、データ型、関数、アットルールを定義していません。むしろ、これらの機能すべてがどのように定義されるべきか、そしてユーザーエージェントがどのように CSS を構文解析すべきかを詳しく説明しています。

### アットルール

* なし

**メモ:** このモジュールは、 `@charset` は実際のアットルールではなく、スタイルシートが文法チェックされるときに省略されるべき認識されない古いルールであると明示しています。

リファレンス
------

### 主要概念

* `アットルール`
* 文字エスケープ
* CSS コメント
* CSS 宣言
* CSS 宣言ブロック
* CSS 関数
* 無効なもの
* スタイルルール
### 用語集の用語

* CSS 記述子
* 構文解析
* スタイルシート
* ホワイトスペース
ガイド
---

構文

CSS 宣言、宣言ブロック、ルールセット、文などの CSS 構文の概要です。

値の定義構文

CSS プロパティと関数の有効な値を定義するための正式な文法を、意味づけ制約とともに説明します。 CSS の成分値の型、結合子、乗算子を理解するためのガイドです。

CSS 構文のエラー処理

ユーザーエージェントが不正な CSS を処理する方法の概要です。

CSS 第一歩の学習: CSS の構文

CSS の構文入門を含む CSS 入門ガイドです。

関連概念
----

CSS セレクターモジュール:

* CSS 詳細度

CSS カスケードモジュール:

* `@import` アットルール
* `important` フラグ
* 初期値
* 計算値
* 使用値
* 実効値
* CSS 継承
* CSS プロパティ

変数のカスケードのための CSS カスタムプロパティモジュール:

* カスタムプロパティ (`--*`)
* `var()` 関数

CSS 条件付きルール モジュール:

* `@media` アットルール
* `@supports` アットルール

CSS オブジェクトモデル (CSSOM) API:

* `cssText` プロパティ
* `insertRule(rule)` メソッド
* `replace(text)` メソッド

WHATWG 仕様書:

* `<style>` 要素
* `<link>` 要素
* `class` 属性
* `rel` 属性
仕様書
---

| Specification |
| --- |
| Unknown specification  |

関連情報
----

* CSS セレクターモジュール
* CSS 値と単位モジュール
scroll-timeline-name
====================

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

**`scroll-timeline-name`** は CSS のプロパティで、スクロール可能な要素（*スクローラー*）を上下（または左右）にスクロールすることで進行する名前付きスクロール進行タイムラインの名前を定義するために使用します。 `scroll-timeline-name` はタイムラインを提供するスクローラーに設定します。

この名前はその後、 `animation-timeline` 宣言で参照され、スクロールアクションを通してアニメーションの進行を使用するコンテナーの要素を示します。

**メモ:** 要素が軸方向の寸法においてそのコンテナーをオーバーフローしない場合、またはオーバーフローが非表示またはクリップされる場合、タイムラインは作成されません。

`scroll-timeline-axis` および `scroll-timeline-name` プロパティは `scroll-timeline` 一括指定プロパティを使用して設定することもできます。

構文
--


```css
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
```

### 値

`scroll-timeline-name` で許可されている値は次の通りです。

`none`

このタイムラインには名前がありません。

`<dashed-ident>`

Aスクロール進行タイムラインの名前を定義する任意のカスタム識別子で、 `animation-timeline` プロパティで参照することができます。

**メモ:** `<dashed-ident>` の値は `--` から始める必要があり、これによって CSS の標準キーワードとの名前の衝突を避けることができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| 計算値 | `none` または識別子の順序付きリスト |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

scroll-timeline-name =   
  [ none | <dashed-ident> ]#    
  
```

例
-

### 名前付きスクロール進行タイムラインのアニメーションの作成

 この例では、`--squareTimeline` という名前のスクロールタイムラインを `container` という ID の要素に `scroll-timeline-name` プロパティを使用して定義しています。
 これを `#square` 要素のアニメーションに適用するには、 `animation-timeline: --squareTimeline` を使用します。

#### HTML

この例の HTML は次の通りです。


```html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>
```


#### CSS

コンテナー用の CSS では、`--squareTimeline` という名前のスクロールタイムラインのソースとして、`scroll-timeline-name` プロパティを使用して設定します。既定で縦軸を使用するので、スクロールバー軸は定義しません。

コンテナーの高さは `300px` に設定し、コンテナーがはみ出した場合は垂直スクロールバーを作成するように設定します（下記の `stretcher` 要素の CSS `height` ルールはコンテンツをコンテナーからはみ出させます）。


```css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --squareTimeline;
  position: relative;
}
```


下記の CSS は `animation-timeline` プロパティで指定されたタイムラインに従って回転する正方形を定義しています（このプロパティは上記の `--squareTimeline` タイムラインに設定されています）。


```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
  animation-timeline: --squareTimeline;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
```


`stretcher` の CSS ルールでは、ブロックの高さを `600px` に設定します。これにより、コンテナー要素をはみ出すコンテンツが作成され、スクロールバーが作成されます。
 この要素がなければ、コンテナーからコンテンツがはみ出さないので、スクロールバーが存在せず、したがってアニメーションタイムラインに関連付けるスクロールタイムラインも存在しません。

#### 結果

垂直バーをスクロールすると、正方形がアニメーションします。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # scroll-timeline-name |

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

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

関連情報
----

* `animation-timeline`
* `scroll-timeline`, `scroll-timeline-axis`
* `timeline-scope` (en-US)
* CSS スクロール駆動アニメーション (en-US)
CSS 条件付き規則
==========

**CSS 条件付き規則** (CSS Conditional Rules) は CSS のモジュールの一つで、プロセッサーの能力やスタイルシートが適用される文書の条件などに基づいて一連の規則を定義することができます。

リファレンス
------

### アットルール

* `@document`
* `@media`
* `@supports`
* `@import`
仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 5  |
| CSS Conditional Rules Module Level 4  |
| CSS Conditional Rules Module Level 3  |

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

### `@document` ルール

{{Compat}}### `@import` ルール

{{Compat}}### `@media` ルール

{{Compat}}### `@supports` ルール

{{Compat}}
box-ordinal-group
=================

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

**警告:** これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

**`box-ordinal-group`** は CSS のプロパティで、フレックスボックスの子要素を順序付きグループに割り当てます。


```css
/\* <integer> 値 \*/
box-ordinal-group: 1;
box-ordinal-group: 5;

/\* グローバル値 \*/
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;
```


順序付きグループは、ボックスの直接の子が現れる順序を制御するために、 `box-direction` プロパティとの組み合わせで使用されることがあります。 `box-direction` の計算値が normal である場合、ボックスは小さい番号が付いた順序付きグループから要素を表示し、それらの要素がコンテナーの左 (水平ボックスの場合) または上端 (垂直ボックスの場合) に現れます。同じ順序付きグループの要素は、ソースの文書ツリーに現れる順序で流れます。逆の方向では、順序付きグループは要素が逆に現れた場合を除き、順序付きグループは同じ順序で現れようとします。

構文
--

`box-ordinal-group` プロパティは任意の正の `<integer>` で指定されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | ボックス要素の子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### 基本的な使用方法の例

古いバージョンの仕様では、 `box-ordinal-group` はフレックスコンテナー内の子の表ジュ順序を変更するために含まれていました。


```css
article:nth-child(1) {
  -webkit-box-ordinal-group: 2
  -moz-box-ordinal-group: 2
  box-ordinal-group: 2
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1
  -moz-box-ordinal-group: 1
  box-ordinal-group: 1
}
```


現在のフレックスボックスの同等の機能は `order` です。

仕様書
---

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

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

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

関連情報
----

* `box-flex`
* `box-flex-group`
* `box-pack`
text-emphasis-style
===================

**`text-emphasis-style`** は CSS のプロパティで、圏点の表示を設定します。設定やリセットに一括指定の `text-emphasis` を使用することもできます。

試してみましょう
--------

構文
--


```css
/\* 初期値 \*/
text-emphasis-style: none; /\* 圏点なし \*/

/\* <string> 値 \*/
text-emphasis-style: "x";
text-emphasis-style: "点";
text-emphasis-style: "\25B2";
text-emphasis-style: "\*";
text-emphasis-style: "foo"; /\* 使用するべきではない。計算されるか 'f' のみが表示される \*/

/\* キーワード値 \*/
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

/\* グローバル値 \*/
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: revert-layer;
text-emphasis-style: unset;
```

### 値

`none`

圏点なし。

`filled`

図形は単色で塗りつぶされます。 `filled` も `open` も指定されない場合は、これが既定値です。

`open`

図形は中抜きになります。

`dot`

記号として小さな円を表示します。 filled dot は `'•'` (`U+2022`)、 open dot は `'◦'` (`U+25E6`) です。

`circle`

記号として大きな円を表示します。 filled circle は `'●'` (`U+25CF`)、 open circle は `'○'` (`U+25CB`) です。

`double-circle`

記号として二重丸を表示します。 filled double-circle は `'◉'` (`U+25C9`)、 open double-circle は `'◎'` (`U+25CE`) です。

`triangle`

記号として三角形を表示します。 filled triangle は `'▲'` (`U+25B2`)、 open triangle は `'△'` (`U+25B3`) です。

`sesame`

記号としてゴマを表示します。 filled sesame は `'﹅'` (`U+FE45`)、 open sesame は `'﹆'` (`U+FE46`) です。

`<string>`

記号として文字列を表示します。`<string>` には 1 *文字*を超える文字列を指定しないでください。ユーザーエージェントは、2 文字以上の書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

text-emphasis-style =   
  none                                                |  
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |  
  <string>                                              
  
```

例
-

### 基本的な例


```css
h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-style-property |

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

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

関連情報
----

* 関連プロパティ: `text-emphasis-color`, `text-emphasis`
* 圏点の位置の定義を可能にする `text-emphasis-position` プロパティ