More than 3 years have passed since last update.

IE11で使用不可のCSS

Last updated at 2021-05-20Posted at 2020-09-17

Microsoft365 IE11サポート終了について

‎8月17日 MicrosoftからMicrosoft365のIE11のサポート終了と、それに伴うスケジュールが発表されました。
Microsoft Edge Legacyも範囲内のようです。

https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666

これからIE11対応を切るwebサイトが増えることを信じて、
IE11のせいで使用できなかったCSSをまとめます。

追記
Microsoftから正式にIE11のサポート終了のお知らせされました。
もうIE11のことは忘れましょう。
https://www.itmedia.co.jp/news/articles/2105/20/news047.html

対応状況は2020年8月27日確認
Can I use : https://caniuse.com/

このまとめについて

IE11と見比べるとわかりやすいです。
CodepenはIE11の対応は切っています。（埋め込みは表示される）
適当に探して使ってみただけなので全部網羅できているわけではありません。

line-clamp

はみ出したテキストを３点リーダーにします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

Polyfill:
https://github.com/LeMarck/webkit-line-clamp

See the Pen oNxZJXx by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.25.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/d0ca26a0-1a48-4a5c-6e5f-c9b70cb98f7d.png)

text-emphasis

圏点を追加します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/text-emphasis

Polyfill:
https://developer.aliyun.com/mirror/npm/package/text-emphasis/v/1.0.0

See the Pen text-emphasis by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.26.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/25b75ea5-01f8-e3c9-b809-99a24ac7953b.png)

font-smoothing

フォントをなめらかにします。(PCオンリー)
https://qiita.com/hata-mu/items/98df93516cbd3f1cc418

ドキュメント:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

See the Pen font-smoothing by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/9ec29dbb-8d7d-40d7-9b52-72fed5dbc9ff.png)

text-orientation

英数字を縦書きにします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation

See the Pen text-orientation by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-09-01 15.32.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/30509c89-00f9-45e4-0ee8-00cc2347183f.png)

font-kerning

カーニングを調整します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/font-kerning

See the Pen font-kerning by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-09-01 15.44.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/8f3c44de-02ef-c498-d2c5-61fff9b60ff3.png)

font-variant-numeric

数字、分数、序数記号の表記を制御をします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-numeric

See the Pen font-variant-numeric by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

object-fit

画像を適切なサイズに合わせます。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

Polyfill:
https://github.com/steveworkman/jquery-object-fit
https://github.com/anselmh/object-fit

See the Pen object-fit by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.30.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/19a2eebd-a026-dc9c-13c2-7fa396cff009.png)

mask-image

画像を元に切り抜きます。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/mask-image

See the Pen mask-image by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.30.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/1f79e880-15f7-3102-b988-d8eb02abbfc0.png)

filter

画像に効果を追加します。
グレースケールやコントラストは省略。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/filter

Polyfill:
https://github.com/Schepp/CSS-Filters-Polyfill

drop-shadow

画像に影をつけます。透明を考慮します。

See the Pen drop-shadow by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

blur

ぼかしをいれます。

See the Pen blur by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

shape-outside

回り込みをする際の対象の形状を指定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/shape-outside

Polyfill:
https://github.com/adobe-webplatform/css-shapes-polyfill

See the Pen shape-outside by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/84c96ce9-b038-4090-ffb5-833080001a89.png)

mix-blend-mode

要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

See the Pen mix-blend-mode by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.43.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/7b37fa93-0dff-585e-b1e7-f3387c67dab7.png)

backdrop-filter

背景のみぼかします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter

Polyfill:
https://github.com/AhsanE/backdropjs

See the Pen backdrop-filter by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.44.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/3704d9bd-9eb1-ed21-cd2a-d41da59644f5.png)

conic-gradient

中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/conic-gradient

Polyfill:
http://projects.verou.me/conic-gradient/

See the Pen conic-gradient by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.45.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/4b91641c-b9aa-ae2f-1a21-90b5a8fcf26f.png)

sticky

スクロールした際に要素を固定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/position

Polyfill:
https://github.com/wilddeer/stickyfill

See the Pen sticky by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/43a2dd0a-2310-897f-4d11-35e4d75615ed.png)

will-change

最適化を行い、アニメーションを滑らかにします。

注意点:
https://postd.cc/css-will-change-property/

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/will-change

See the Pen will-change by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.46.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/5490ca17-a1b7-563c-5afc-a7ab25b92331.png)

scroll-behavior

スムーススクロールにします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

See the Pen scroll-behavior by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.46.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/0c28e6f6-8d3a-167f-c92a-99fdd60f3d2a.png)

outline-offset

outlineにオフセットを設定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/outline-offset

See the Pen outline-offset by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.48.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/32e69a99-ffe5-15b2-2749-27046e42f786.png)

unset / initial

初期値、又はリセットします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/unset
https://developer.mozilla.org/ja/docs/Web/CSS/initial

See the Pen unset/initial by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.49.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/b69e07a1-d9d2-4c5b-f856-ce0e141a53ef.png) ![スクリーンショット 2020-08-27 16.49.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/5e68c015-a5e7-1598-083b-5e5078816746.png)

min(), max(), clamp()

最大幅や最小幅を定義します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/clamp
https://developer.mozilla.org/ja/docs/Web/CSS/min
https://developer.mozilla.org/ja/docs/Web/CSS/max

See the Pen min(), max(), clamp() by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.51.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/feb21e8a-611b-af84-816a-d994e2556422.png)

var()

CSS変数です。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/var

Polyfill:
https://www.npmjs.com/package/css-vars-ponyfill

See the Pen var() by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.52.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/d26cf0ca-bd31-718f-db94-121990362b7b.png)

tab-size

タブの大きさ決めます。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/tab-size

See the Pen tab-size by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/d0c1d852-4135-6d48-ea95-5773016ad09d.png)

zoom-in, zoom-out

マウスカーソルをズームインズームアウトに設定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/cursor

See the Pen zoom-in, zoom-out by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-09-01 15.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/dafa5416-dbfa-fdc1-8c37-b63bccffc803.png)

prefers-color-scheme

ダークモードとライトモードのCSSを設定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

Polyfill:
https://github.com/csstools/css-prefers-color-scheme

See the Pen OJNgoeQ by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

![スクリーンショット 2020-08-27 16.36.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/f89fffaf-a59b-7e78-4e49-0339fb490d97.png) ![スクリーンショット 2020-08-27 16.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/8b7d4649-0e62-4f5e-3cd9-a92340c0cdab.png)

@supports

プロパティが対応・未対応の場合に適用するCSS。

ドキュメント:
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

See the Pen Feature Queries by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up