【CSS】IEサポート終了で使う機会が増えそうなプロパティ

Posted at 2022-07-26

はじめに

2022年6月15日にInternet Explorerのサポートが終了しました。
そこで今回は、これから使うことが増えそうなIE非対応のCSSプロパティを5つ紹介します。

gap: 30px 50px;

gapはFlexboxやCSS Gridで隣接する要素間の間隔を設定できます。

row-gap（行間）とcolumn-gap（列間）の値を指定できます。

1つのみを指定した場合、行間と列間が同一の値になります。

「要素間の間隔」なので、外側にはみ出しません。

display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;

line-clampは、テキストを指定した行数で省略表示することができます。
文末には3点リーダーが表示されます。
使用するには、line-clamp以外に3つのプロパティを設定する必要があります。

background-clip: text;

background-clip: textは、背景をテキストでくり抜くことができます。
content-boxなども設定できますが、textはIE非対応です。

filter: contrast(200%);

filterは、ぼかしや色変化などのグラフィック効果を適用します。
blur（ぼかし）、contrast（コントラストの調整）、grayscale（グレースケールへの変換）などを設定できます。

accent-color: pink;

一部のフォーム要素（チェックボックス、ラジオボタン、レンジスライダー、プログレスバー）のアクセントカラーを変更できます。