Blog

一昔前まではJSや画像を使わないと実装できなかったことが、CSSだけでできることが増えてきました。
そこで立ちはだかるのがIE11…。Microsoft365のIE11のサポート期限は2021年8月17日。そろそろ完全対象外としたいところですが、アプリと違ってWEBサイトはいろんな理由でそうはいかないこともあるでしょう。

IE11さえなければ使えるのに…といった便利なプロパティや擬似クラスが、CSSにはたくさんあります。

…が、IE11はサポート外だけど、クリティカルじゃないからそれでもよいのでは？
と思える、今から使っていけるものもたくさんあります。

そんなものを探して集めてみようと思いました。

• IE11に対応してないけど、対応してないからといって困らないもの
• IE11に対応してないけど、代替手段が軽い、もしくは被害が軽い

反対にIE11が完全サポート外になったら使うかな…というものも入れてみました。

• まだ使えない、代替手段が手間、被害が重め

IE11対応してないからといって困らないもの

will-change

「この要素は変更の可能性がある」と事前にブラウザに伝えるものです。
既存の性能問題を扱うための最終解決手段なので、使いすぎには注意が必要です。
実際に、アニメーションがぎこちない場合に使って改善したことがあります。
IE11には対応してませんが、このプロパティが適用されないことで崩れるといったことはないので、気にせず使って行ってOKです。

:focus-within

フォーカスを持っているか、フォーカスを持った要素を含む要素を表す擬似クラスです。
これを使うと、フォーカスされたフォームの一定のエリアのスタイルを変更するといったことができます。
これも、ちょっと親切にスタイル変えられる程度のものなので、IE11で適用されないからといって困るということはあまりない印象です。

shape-outside、shape-margin、shape-image-threshold

circle（円）やpolygon（多角形）の形の要素の周りにテキストをまわりこませることができます。
そういうデザインがあったら使えますが、あまり見かけたことはないです。

代替手段が軽い、もしくは被害が軽い

position:stickey

ヘッダーやサイドバーを途中からFixさせることができます。
これがIE11できかないからといって困ることはあまりないかと思います。
明確に「固定する」という指示がきている場合はIE11を捨てる覚悟が要りますが、サイト自体が致命的にダメージをうけることはないので使っていって大丈夫だと思います。

filter

ぼかしや色変化などのグラフィック効果が適用できます。
使えることによって受けられる恩恵が結構大きいと思います。
グラフィックの効果を受けられないことで大きな損失があるということがなければ、IEのためだけに使わないのも勿体無いので、どんどん使っていきたいところです。

mix-blend-mode

こちらもfilterと同じく、使えることによって受けられる恩恵が大きいです。一方でなければないで、乗算やオーバーレイなら、IE11は半透明にするなどの簡単な代替手段があります。（見た目は変わりますが、画像にしてしまうと容量がふえることを考えると、IEだけ半透明で対処するのは現実的にありだと思うので）
IEのためだけに使わないのも勿体無いので、どんどん使っていきたいところです。

object-fit、object-position

img要素にcontainやcoverを指定できます。これはよく使います。
IE11に対応させる（背景画像にしてしまう）JSのプラグインがあるので、今の所それで対応しています。

clip-path

circle（円）やpolygon（多角形）や、pathでクリップ領域を作成できます。画像を任意の形にくりぬいたりできます。
IE11には対応してないので、四角で表示することになると思いますが、それによって大きく何かが損なわれるかはデザインによります。四角になったら違和感になってしまうデザインなら、clip-pathは諦めます。

mask-image

clip-pathはクリッピングマスクであるのに対し、mask-imageはレイヤーマスクです。透明度を加味したマスクが可能です。
こちらもIE11では四角で表示することになると思いますが、それが違和感になってしまうデザインなら、最初からmask-imageを使いません。

background-clip: text

background-clipは、要素の背景を境界ボックス、パディングボックス、コンテンツボックスなど、どこまで拡張するかを設定します。
値をtextにするとテキストのところだけ背景画像を表示することができます。
値にはborder-boxやpadding-boxがありますが、background-clip: textだけ、IE11に対応していません。
background-clip: text　を利用すると文字にグラデーションをかけたり、背景画像を設定したりできますが、IE11にはそれができません。
代替手段は、画像で文字を作るしかないですが、そのためだけに画像にするのも微妙なので、IE11だけはcolorでベタ塗りというやりかたでいくことが多いです。

:any-link

ハイパーリンクのソースアンカーとして作用する要素を表す擬似クラスです。
この擬似クラスを使うと、hrefがないaにはスタイルがかかりません。
これを調べるまで、a要素にhrefはなければならないと思ってたんですが、hrefがないaタグも認められているようです。

scroll-snap-type、scroll-padding、scroll-margin

スクロールした時に要素にピタッとスナップします。
Can I Useで見るとscroll-snap-typeはIE11対応、scroll-paddingとscroll-marginはIE11以外は対応してそうだけど、
うちはSafari（バージョン14.0.3）でもきいていなかった…。何故かわかりません…
これがきかなくても、ピタッとするという効果がなくなるだけでスクロールはできるので、そんなに被害は大きくないだろうと思います。

使えない、代替手段が手間、被害が重め

grid

grid系プロパティの全てがIE11未対応というわけではないですが、色々考えると使わないという結論になることがほとんどです。
gridがきかないとレイアウトが大きく崩れるので、IE11はハックを使ってflexを書く…ということになるので、それなら最初からflexでいい。つまりまだ使うには早い…となってしまいます。

background: conic-gradient()

円形にグラデーションを作成します。円グラフがCSSで作れます。
円グラフをIE11に対応させようと思ったら、諦めて画像です。

min()、max()、clamp()

これがきかないとレイアウトに大きく影響するので、maw-widthやmin-widthを使ってIE11ハックを書くことになりますが、それならもう最初からそっちでかけばいいじゃないか…と思ったので今のところ使っていません。

IE11以外もまだ未対応ブラウザあり。使ってみたいもの

現時点で、IE11以外にも未対応ブラウザがあるので、使えるのはまだまだ先かな…と思っているものを最後に載せておきます。

• aspect-ratio
• scroll-behavior
• :has

まとめ

IE11を好んで使っているというクライアントはいませんが、それでもチェックされる方はおられます。

Microsoft365のIE11のサポート期限は2021年8月17日。
Windows8.1のIEサポートは2023年1月10日。Windows10のIE11は、2025年10月。

こう見ると完全にサポート対象外ですと言い切るにはまだ時間がありそうですが、便利なCSSを使えないが故にJSが増えたりするのはサイトにとってのマイナスでもある上、もうIE11を使っていたらEdgeに誘導される時代です。今年あたりがそろそろ潮時なのではとも思っています。