IEのサポート終了後に使えるCSS②

はじめに

前回IEのサポート終了後に使えるCSSを書きましたが、
まだまだ使える便利なプロパティもありましたので、
今回も使えるCSSをまとめていこうと思います。

mix-blend-mode

乗算やオーバーレイを指定できるプロパティ

乗算
img {
  mix-blend-mode: multiply;
}

スクリーン
img {
  mix-blend-mode: screen;
}

オーバーレイ
img {
  mix-blend-mode: overlay;
}

gap

flexやgridでレイアウトする時に要素のスペースを指定するプロパティ

div {
  display: flex;
  gap: 20px;
}

line-clamp

複数行のテキストに省略をつけるプロパティ

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

position: sticky;

フロートを解除するプロパティ

div {
  display: flow-root;
}

以上全てではありませんが、積極的に取り入れたいCSSのプロパティについてまとめてみました。
これ以外にもまだまだあるので、また別の記事でもまとめたいと思います。