💅

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

2022/05/11に公開約3,700字2件のコメント

2022年6月16日。

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

IEしか勝たん。

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

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

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

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

CSS


mix-blend-mode

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

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
https://www.w3schools.com/cssref/pr_mix-blend-mode.asp

filter

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

https://developer.mozilla.org/ja/docs/Web/CSS/filter
https://www.w3schools.com/cssref/css3_pr_filter.asp

object-fit

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

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://www.w3schools.com/cssref/css3_pr_object-fit.asp

clip-path

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

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
https://www.w3schools.com/cssref/css3_pr_clip-path.asp

gap

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

https://developer.mozilla.org/en-US/docs/Web/CSS/gap
https://www.w3schools.com/cssref/css3_pr_gap.asp

scroll-behavior

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

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
https://www.w3schools.com/cssref/pr_scroll-behavior.asp

grid

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

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://www.w3schools.com/css/css_grid.asp

line-clamp

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

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://www.w3schools.com/css/css3_variables.asp

sticky(position)

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

https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://www.w3schools.com/css/css_positioning.asp

text(background-clip)

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

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://www.w3schools.com/cssref/css3_pr_background-clip.asp

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/calc
https://www.w3schools.com/cssref/func_calc.asp

おまけ(HTML)


details

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
https://www.w3schools.com/tags/tag_details.asp

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

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

Discussion

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

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

https://developer.mozilla.org/ja/docs/Web/CSS/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-のプレフィックスが必要です。

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

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

今度使ってみます🙌

ログインするとコメントできます