IE（Internet Explorer）のサポートが2022年6月に終了します。
＊いよいよ完全終了へ。Internet Explorer（IE）サポート終了スケジュール
よ～やくという感じで、これを待ち望んでいたWEB制作者は多いのではないでしょうか？
特に長年IEに苦しめられてきた古参兵ほど感慨ひとしおでしょうね(ﾉ_･｡)
今回はIE終了に伴って大手を振って使えるようになるCSSコードを、自分の備忘録も兼ねてまとめてみました。
目次
CSS変数（カスタムプロパティ）
「変数」とはプログラミングではよく使われている概念で、何かの値を代入することで、他の箇所でその値を参照できるようになります。
と、文字で説明するとややこしいのですが、実際にコードを書いてみると分かりやすいと思います。
例）
仮に、あるサイトのメインカラーを青系の「#29ABE2」とします。
「:root」でCSS変数を宣言します。
/* CSS変数の宣言 */
:root {
--color-main: #29ABE2;
}他の箇所でこのメインカラーを使いたくなったら（変数の参照）、
.box {
background-color: var(--color-main);
}.media h3 {
border-bottom:1px solid var(--color-main);
}こんな感じに書きます。
これは
「background-color: #29ABE2;」
「border-bottom:1px solid #29ABE2;」
と同じ意味になります。
で、メインカラーを青はやめてオレンジに変えたくなったら、
/* CSS変数の宣言 */
:root {
--color-main: #F7931E;
}ここの色番号を書き換えるだけです。
そうすると、この変数を参照している箇所は右へならえで全てオレンジに切り替わります。
色だけではなくて数値でも使えます。
/* CSS変数の宣言 */
:root {
--main-size: 20px;
}メッチャ便利ですね。
これがIEのために妨げられていたわけで(>_<､)
＊参考：CSSの変数（カスタムプロパティ）便利な使い方を詳しく解説
「object-fit」画像をトリミング
「object-fit」は、画像を指定したサイズに合わせて、はみ出す部分はトリミングします。
「background-size」と同じことができてしまいます。
具体的には「object-fit: cover」を使います。
例）
img {
width: 300px;
height: 300px;
object-fit: cover;
}
左が原画像（400×300px）、右が「object-fit: cover」をかけた画像（300×300px）です。
画像の縦横比を維持したままで、はみ出した部分はトリミングしてくれます。
＊参考：1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
「filter」画像にフィルターをかける
画像の彩度・明度・コントラストを変更したり、画像にぼかしを加えるなどの加工を施します。
例）
画像にセピアのフィルターをかけます。
img {
filter: sepia(80%);
}
セピアの場合、「0%」がかけてない状態、「100%」が一番濃い状態になります。
他にも「saturate（彩度）」
「blur（ぼかし）」
「opacity（画像の透明度）」
などもあります。
＊参考：CSSのfilterプロパティを利用して簡単なフィルターを画像に追加しよう
「min()」「 max()」「 clamp()」CSS比較関数
このうち一番すごいなと思うのが「clamp()」（クランプ）です。
最小値と最大値を指定し、その間を可変にすることができる関数です。
レスポンシブで画面幅に応じて、font-sizeなどをなめらかに変化させる場合に威力を発揮します。
と書くと何のこっちゃという感じですが、以下の例をご覧ください。
例）
「h2」のfont-sizeを画面幅に応じて変化させます。
◇画面幅800px以下 ⇒ font-size:20px
◇画面幅1200px以上 ⇒ font-size:30px
で、画面幅が801～1199pxの間はfont-sizeを「2.5vw」でなめらかに変化させます。
h2 {
font-size:clamp( 20px, 2.5vw, 30px) ;
}()の中は( 最低値 推奨値 最大値)となります。
この「推奨値vw」の求め方は、
30 ÷ 1200 × 100
となります。
font-sizeだけではなく、要素の大きさ・パディング・マージンなどでも、工夫次第でいろいろ使えます。
「clamp()」は内容を理解するのが大変ですが、慣れるとメッチャ便利な心強い味方になります(^^)v
＊参考：CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説
その他のIE非対応組CSSコード
上記以外にも、従来はIE非対応ということで泣く泣く諦めていたCSSコードが使えるようになります。
「clip-path」要素の切り抜き
「position: sticky」ブロックに対して固定表示（＊fixedとは異なる）
「text-stroke」テキストを縁取る
「background-clip: text」文字形に背景画像をくり抜く
などなど。
詳しくはググって調べてください。
これらがIE終了を見据えてスタンバイしてるわけで、なんか嬉しいような恐ろしいような複雑な気持ちです(^_^;)
