backdrop-filter

ぼかし。FireFoxとIE以外は大体使える。

background-clip、text-fill-color

background-clipは背景の配置調整、text-fill-colorはテキストの色。
background-clip: text; と text-fill-color: transparent; の合わせ技で背景を文字で切り抜いたりする(color: transparent; ではできない)。

mix-blend-mode

いろんな色変換に使用する。
クロスフェードでは通常、2要素の透明度を0→1と1→0へ同時にトランジションさせたとき途中で2要素がともに0.5の透明度になり、両方が透けた状態となるので、違和感のある表示になることがある。
そのときはplus-lighterプロパティを使用すると、2要素がクロスフェードする場合に不透明度が考慮された状態で合成されるので、結果的にクロスフェードが綺麗に表示される。
参考:https://ics.media/entry/7258/

prefers-color-scheme

ダークモードに対応するためのメディアクエリ

scroll-snap

スクロール位置合わせ

flex gap

flexbox での余白を楽に調整

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.item {
  width: calc((100% - 30px * 2) / 3);
}

display: grid

中央揃えとかも格段に楽になる。

.hoge {
  display: grid;
  place-items: center;
}

text-stroke

テキストの装飾に。

background-clip: text

クリッピングマスクの作成。

width: fit-content

blockでもコンテンツ幅に合わせて横幅を指定することができる。
margin-right: auto; margin-left: autoで中央配置にできるため、テキストのみのブロックの背景色を指定するときなどに利用できる。
参考:https://pulpxstyle.com/fit-content/