はじめに

意外と知らなかったCSSプロパティを3つ紹介します。

1. `currentColor`

currentColor（CSS:カスケーディングスタイルシート）
特定の要素に指定されている色を参照するCSSプロパティです。

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

currentColorの利点は、色の変更が親要素のcolorプロパティによって自動的に反映されるため、親要素のテキスト色を変更するとcurrentColorを使用している要素の色も新しい色に変更されることです。

parent.scss

.parent {
  color: red;
  border: 1px solid currentColor; /* テキストの色と同じ色（red） */

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

accent-color（CSS:カスケーディングスタイルシート）
accent-colorは、チェックボックス・ラジオボタン・レンジスライダー・プログレスバーの4つの要素に適応できる、強調表示色を設定するCSSプロパティです。

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

example.css

input {
  accent-color: deeppink; /* アクセントカラーを設定 */
}

See the Pen Untitled by kidorina (@kidorina) on CodePen.

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プロパティについて紹介しました。
「こんなのあったんだ」と発見した時は嬉しいですね。