知らなかったCSSプロパティ 3選

# はじめに
意外と知らなかったCSSプロパティを3つ紹介します。
## 1. `currentColor`
[currentColor（CSS:カスケーディングスタイルシート）](https://developer.mozilla.org/ja/docs/Web/CSS/color_value#currentcolor_%E3%82%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89)
特定の要素に指定されている色を参照するCSSプロパティです。

要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。

`currentColor`の利点は、色の変更が親要素のcolorプロパティによって自動的に反映されるため、親要素のテキスト色を変更すると`currentColor`を使用している要素の色も新しい色に変更されることです。
#### 使用例
```parent.scss
.parent {
  color: red;
  border: 1px solid currentColor; /* テキストの色と同じ色（red） */

  .child {
    color: currentColor; /* 親のテキストの色と同じ色（red） */
  }
}
```

## 2. `accent-color`
[accent-color（CSS:カスケーディングスタイルシート）](https://developer.mozilla.org/ja/docs/Web/CSS/accent-color)
`accent-color`は、チェックボックス・ラジオボタン・レンジスライダー・プログレスバーの4つの要素に適応できる、強調表示色を設定するCSSプロパティです。

複数の場所で再利用できるため、コンポーネント間の一貫性が確保され、デザインの変更が容易になります。

#### 使用例
```example.css
input {
  accent-color: deeppink; /* アクセントカラーを設定 */
}
```
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="dyEdxad" data-pen-title="Untitled" data-user="kidorina" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kidorina/pen/dyEdxad">
  Untitled</a> by kidorina (<a href="https://codepen.io/kidorina">@kidorina</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 3. `overscroll-behavior`
[overscroll-behavior（CSS:カスケーディングスタイルシート）](https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior)
スクロールコンテナがそのスクロール範囲を超えた場合の挙動を制御するためのCSSプロパティです。

例えば、スクロールするページAの上にスクロールするダイアログBを置いた場合、デフォルトでは、ダイアログBがスクロールの境界線に達すると、ページAのスクロールが開始します。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BaeErQj" data-pen-title="Untitled" data-user="kidorina" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kidorina/pen/BaeErQj">
  Untitled</a> by kidorina (<a href="https://codepen.io/kidorina">@kidorina</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

このようなスクロールの伝播が望ましくない場合に、`overscroll-behavior`の`contain`を使用してスクロール連鎖を抑止します。

実際に設定したものがこちら↓

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="pomVqwQ" data-pen-title="Untitled" data-user="kidorina" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kidorina/pen/pomVqwQ">
  Untitled</a> by kidorina (<a href="https://codepen.io/kidorina">@kidorina</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`.scroll-container`（ダイアログB）内でスクロールしたときに、そのスクロールが終端に達しても、スクロールイベントが親の`.outer-container`（ページA）に伝播しません。

このように、親要素へのスクロール伝播を防ぎ、スクロールの挙動をコントロールすることができます。

# 終わりに
今回は、知らなかった3つのCSSプロパティについて紹介しました。
「こんなのあったんだ」と発見した時は嬉しいですね。