今まで「IE非対応」が壁となり業務での使用を躊躇していたCSSプロパティがいくつもありました。
しかし、ネットや各メディアでも話題になった通り、2022年6月16日、ついにIEのサポートが終了しました（一部OSを除く）。
そこで、IE終了により解き放たれた画期的なCSSプロパティを、個人的メモも兼ねて記載していきたいと思います。
全く新しいレイアウトの形「grid-template」
「grid-template」を初めて知った時は驚きました。
このプロパティを使用すると、以下コードのように視覚的にレイアウトをコントロールすることが可能となります。
See the Pen Untitled by monji (@monji88) on CodePen.
これ、かなりやばくないでしょうか？見てわかるようにレイアウトはもちろん、各要素の高さ、幅、marginすらもgrid-templateプロパティの中で設定することが可能です。これで各要素のプロパティやmarginを個別に設定する手間が一気に不要になりますね。
詳しい使用方法については以下のしまぶー様のYouTube動画がわかりやすかったのでおすすめです。
下記のMDNページからもわかるように、IE以外の主要ブラウザは既に対応済となっています。
テキストで背景を切り抜く「background-clip:text」
background-clipは、背景の表示領域を設定するためのCSSプロパティです。
このプロパティの値を「text」にすることにより、以下のような「テキストで背景を切り抜く表現」が可能となります。
See the Pen background-clip by monji (@monji88) on CodePen.
このコードではlinear-gradientを用いたグラデーションを背景に使用していますが、もちろん任意の画像を使用することもできます。テキストの色を透明に設定することと、background-clipにはベンダープレフィックスをつけて「-webkit-background-clip」とすることも忘れずに。
こちらもIE以外の主要ブラウザは既に対応済となっています。
たった一行で要素のアスペクト比を設定「aspect-ratio」
今まで、要素のアスペクト比を設定するためには、親要素を作ってposition:relativeにしてpadding-topを設定して子要素をabsoluteにして、、、とかなりのコードが必要でした。
しかし「aspect-ratio」を使用すると、以下のようにたったの一行で設定できてしまいます。
See the Pen aspect-ratio by monji (@monji88) on CodePen.
こちらもIE以外の主要ブラウザは既に対応済となっています。
モノクロ や ボカシ をブラウザ上で表現「filter」
filterプロパティにより、グレースケール、ぼかし、色相、コントラストなどの様々な値が調整可能となります。
以下は試しにグレースケールとぼかしの値ををanimationで変化させたものです。
See the Pen filter by monji (@monji88) on CodePen.
filterプロパティ無しでこれをやろうと思ったら、未加工の画像と加工済の画像を予め用意してabsolute等で重ねて、、といった作業が必要だったのでかなり便利になりましたね。
こちらもIE以外の主要ブラウザは既に対応済となっています。
スムーススクロールがJavaScript不要に「scroll-behavior」
「scroll-behavior」を使用すると、JavaScriptが必要だったページ内リンクへのスムーススクロールが、以下のようにCSS１行だけで実装できてしまいます。
See the Pen scroll-behavior: smooth; by monji (@monji88) on CodePen.
こちらもIE以外の主要ブラウザは既に対応済となっています。
他プロパティも色々
とりあえず５つ記載しましたが、他にも、mix-blend-mode、clip-path、max-content、object-fit、position:stickyなど、IEのみ非対応だった便利なプロパティはたくさんあるので進んで活用していきたいと思います。