はじめに
意外と知らなかったCSSプロパティを3つ紹介します。
1. currentColor
currentColor（CSS:カスケーディングスタイルシート）
特定の要素に指定されている色を参照するCSSプロパティです。
要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。
currentColorの利点は、色の変更が親要素のcolorプロパティによって自動的に反映されるため、親要素のテキスト色を変更するとcurrentColorを使用している要素の色も新しい色に変更されることです。
使用例
.parent {
color: red;
border: 1px solid currentColor; /* テキストの色と同じ色（red） */
.child {
color: currentColor; /* 親のテキストの色と同じ色（red） */
}
}
2. accent-color
accent-color（CSS:カスケーディングスタイルシート）
accent-colorは、チェックボックス・ラジオボタン・レンジスライダー・プログレスバーの4つの要素に適応できる、強調表示色を設定するCSSプロパティです。
複数の場所で再利用できるため、コンポーネント間の一貫性が確保され、デザインの変更が容易になります。
使用例
input {
accent-color: deeppink; /* アクセントカラーを設定 */
}
See the Pen Untitled by kidorina (@kidorina) on CodePen.
3. overscroll-behavior
overscroll-behavior（CSS:カスケーディングスタイルシート）
スクロールコンテナがそのスクロール範囲を超えた場合の挙動を制御するためのCSSプロパティです。
例えば、スクロールするページAの上にスクロールするダイアログBを置いた場合、デフォルトでは、ダイアログBがスクロールの境界線に達すると、ページAのスクロールが開始します。
See the Pen Untitled by kidorina (@kidorina) on CodePen.
このようなスクロールの伝播が望ましくない場合に、overscroll-behaviorのcontainを使用してスクロール連鎖を抑止します。
実際に設定したものがこちら↓
See the Pen Untitled by kidorina (@kidorina) on CodePen.
.scroll-container（ダイアログB）内でスクロールしたときに、そのスクロールが終端に達しても、スクロールイベントが親の.outer-container（ページA）に伝播しません。
このように、親要素へのスクロール伝播を防ぎ、スクロールの挙動をコントロールすることができます。
終わりに
今回は、知らなかった3つのCSSプロパティについて紹介しました。
「こんなのあったんだ」と発見した時は嬉しいですね。