💅

IE廃止後に特に使えるCSSを整理してみた

2022/05/12に公開2件

CSS

HTML

Scss

tech

2022年6月16日。

何の日でしょうかと聞くまでも無く、IE(Internet Explorer)のサポートが終了する日です。

IEしか勝たん。

という人にとっては悲報ですが、これまでに何度もIEに苦しめられた私にとっては朗報なのです。

特にCSSの影響は大きく、便利なプロパティは大抵IEでは未対応だったことが多かったのでこれらが気兼ねなく使えるのが嬉しい。

結構前から発表はされていますが、実施はもう目の前ということでワクワクを胸にIE終了後、使えるようになるものをまとめようと思います。

情報元として信頼できるサイトを２個ずつ載せているので気になったものがあれば見てみてください。片方のサイトであまりイメージがつかなくても、もう片方と合わせると大体はイメージできるようになります。

CSS

`mix-blend-mode`

要素が重なった時にどういう見え方にするか指定できるプロパティ。
これを使うことで、白背景を透明にしたり、画像の上で文字をくり抜いたような表現ができるようになる。これだけで表現の幅はかなり広がる。

`filter`

要素に対して視覚効果をつけることができるプロパティ。
白黒や反転色、ぼかしなど面白い表現ができる。

`object-fit`

画像のアスペクト比を維持しながら拡大縮小ができるプロパティ。
レスポンシブの場合は画面サイズによってアスペクト比が崩れてしまうことがたまにあるが、これに対応できる。同じようなことができるbackgroundプロパティと比べても、記述はobject-fitプロパティの方が断然シンプル。

`clip-path`

画像を台形や六角形などの好きな形にくり抜くことができるプロパティ。
わざわざ画像本体をくり抜かなくてもCSSだけで簡単にできる。
Clippyで簡単に視覚的に形を設定できる。

`gap`

グリッドとフレックスボックスのスペースを簡単に指定できるプロパティ。
複数行レイアウトで両端にはスペースが不要な時に大活躍。
gapはrow-gapとcolumn-gapの省略形のため行、カラムと個別でも使える。

`scroll-behavior`

リンククリックで画面内移動する時にパッとスクロールするのではなく、スムーズにスクロールできるようにするプロパティ。アンカーリンクで特に使う場面が多い。javascriptで同じことはできるがCSSでも一行でできるようになる。

`grid`

グリッドレイアウトを構成できるプロパティ。
flexboxとgridどちらを使っても見た目は全く同じレイアウトを組めるので、どちらが良いかという議論になるが「grid使いたい、、、」という場面もあるためこういう時も気にせず使えるようになるのがありがたい。

`line-clamp`

何行以上は三点リーダー表示したいという時に大活躍するプロパティ。
一行だけの場合は他プロパティでも代用は効くけど、数行の場合は代用できるプロパティは無く、javascriptでエンヤコラするしかない。cssだけでこの制御をできるのはとてもありがたい。

`カスタムプロパティ(変数)`

スタイルの規模が大きくなるほど恩恵を受けることができるカスタムプロパティ。
個人的にはこれが一番嬉しい。上手く活用すれば読みやすさ、管理のしやすさは全然違う。

`sticky(position)`

positionのrelative、fixed、absoluteを合わせたようなプロパティ。
relativeのように高さを持ちながら、fixedと同じく要素を一定の位置で固定することができ、absoluteみたく他要素に重ねることができる。stickyを使えばページトップにヘッダーを固定する時に余計なスペースの設定は不要になる。

`text(background-clip)`

背景の色や画像をテキストでくり抜くことができるプロパティ。
これで見出しを作れば一気におしゃれに。

`calc()(keyframe内で使われていたもの)`

値を指定する際に計算を行えるプロパティ。
calc自体はIEでもサポートされていたが、アニメーションで使われるkeyframeのようにネストされた状態ではサポート外だった。

おまけ（HTML）

`details`

折りたたみ要素をjavascript無しで作れる便利なタグ。
summaryタグとセットで使用する。
クリックイベントを設定して、スタイルを操作して、などの過程を踏まずにタグだけで済むのはかなり楽。

CSSによる表現の幅がかなり広がりそうな予感🍺。
ここでは紹介していませんが、他にjavascriptでも同様にアロー関数を始めとしたIEではサポートしていなかったものが心置きなく使えるようになりますね。

もうすでに、IEは範囲外としているサービスも多いかもしれませんが、IEに苦しめられたエンジニアの方々はこの廃止を機会に今まで使えなかったものを思う存分使って楽しみながら実装したいですね。

Discussion

かがん 2022/05/13

IEサポート終了おめでとうございます 👏
わかりやすくまとまっており良い記事ですね！

IEがいなければ使えるプロパティとして、個人的には mask-image がイチオシです。

文字通り、要素にマスクをかけるプロパティで、
以下のような書き方でワイプのような出現をさせたり、

mask-image: linear-gradient(to right, black 0% 50%, transparent 50% 100%);
mask-size: 200% 100%;
mask-repeat: no-repeat;
mask-position: 100%;
transition: mask-position 1s;

.show {
    mask-position: 0;
}

以下のように、「background-colorで塗りつぶして、mask-imageで切り抜く」ことで、
アイコンをbackground-colorで色変更できるようになったりします。

/* 三角形のSVGコード */
mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 26 30"><path fill="%23000000" d="M25.133,14.100 L2.472,0.915 C1.673,0.450 0.675,1.031 0.675,1.961 L0.675,28.330 C0.675,29.260 1.673,29.841 2.472,29.376 L25.133,16.191 C25.932,15.727 25.932,14.564 25.133,14.100 Z" /></svg>');
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: currentColor;

※Chromeなどでは、 -webkit-のプレフィックスが必要です。

るーけー 2022/05/20

有益な情報ありがとうございます！

mask-image初めて見ました。
なるほど、切り抜き系の上位互換みたいな感じですね！

今度使ってみます🙌