分かっていても、意外と取り入れていない CSS プロパティがあることに気がつきました。

media hover

スマホでリンクを押すと hover が再現されてしまいます。
そうしたくないとき、このメディアクエリで分けると簡単です。

@media(hover:hover) {
  a:hover {
    background-color: #ff0;
  }
}

scroll-behavior smooth

アンカーで遷移させる際に、JavaScript を使わずにスムースにスクロールできます。

html {
  scroll-behavior: smooth;
}

aspect-ratio

アスペクト比を設定できます。padding などで行う必要がなくなります。

aspect-ratio: 16 / 9;

object-fit

画像などのメディアを要素内でどのように表示するか変えられます。

object-fit: cover;

line-clamp

複数行でも“…“で文末を省略できます。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

mix-blend-mode / background-blend-mode

Photoshop のレイヤー効果の様にできます。
通常、mix-blend-mode を使用し、複数指定した背景の重なりでブレンドする場合、background-blend-mode を使用します。

filter

ぼかし、色の変化、ドロップシャドウなどグラフィック効果を適用します。

mask-image

画像を使用して、マスクを作れます。

clip-path

範囲をクリッピングします。
マスクと似ていますが、こちらはベクターです。

まとめ

とりあえず、私が残していたメモがこんな感じでした。
他にも便利そうなものがあることを意識します。