IE11で使用不可のCSS

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/5ae00100-babb-5808-b3aa-8d0244dc6172.png)
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

<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="oNxZJXx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="oNxZJXx">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/oNxZJXx">
  oNxZJXx</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="LYNyxdK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="text-emphasis">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/LYNyxdK">
  text-emphasis</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="JjXNEmq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="font-smoothing">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/JjXNEmq">
  font-smoothing</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="PoNKaQa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="text-orientation">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/PoNKaQa">
  text-orientation</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="eYZEKPp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="font-kerning">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/eYZEKPp">
  font-kerning</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="OJNZwQp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="font-variant-numeric">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/OJNZwQp">
  font-variant-numeric</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

![スクリーンショット 2020-09-12 22.24.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/b030292a-8951-e25e-cb21-5c374e20331e.png)

#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

<p class="codepen" data-height="412" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="NWNpeRB" style="height: 412px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="object-fit">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/NWNpeRB">
  object-fit</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="yLObJpv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mask-image">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/yLObJpv">
  mask-image</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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
画像に影をつけます。透明を考慮します。
<p class="codepen" data-height="344" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="MWypzBB" style="height: 344px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="drop-shadow">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/MWypzBB">
  drop-shadow</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##blur
ぼかしをいれます。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="BaKRzmQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bulr">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/BaKRzmQ">
  blur</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

![スクリーンショット 2020-08-27 16.36.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257183/b8a0ceb8-522c-ff86-947d-08faffaab485.png)

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

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

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="bGpWgXY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="shape-outside">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/bGpWgXY">
  shape-outside</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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


<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="WNwjpda" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mix-blend-mode">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/WNwjpda">
  mix-blend-mode</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="665" data-theme-id="light" data-default-tab="result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="LYNyLoY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="backdrop-filter">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/LYNyLoY">
  backdrop-filter</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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/


<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="XWdRNZR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="conic-gradient">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/XWdRNZR">
  conic-gradient</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="ZEWyKRW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sticky">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/ZEWyKRW">
  sticky</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="zYqzwJZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="will-change">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/zYqzwJZ">
  will-change</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="gOrRRrN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="scroll-behavior">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/gOrRRrN">
  scroll-behavior</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="NWNgXwy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="outline-offset">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/NWNgXwy">
  outline-offset</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="QWNgaJV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="unset/initial">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/QWNgaJV">
  unset/initial</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="poywOWZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="min(), max(), clamp()">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/poywOWZ">
  min(), max(), clamp()</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="qBZjMLb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="var()">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/qBZjMLb">
  var()</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="XWdgPLr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tab-size">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/XWdgPLr">
  tab-size</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="dyMzKLZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="zoom-in, zoom-out">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/dyMzKLZ">
  zoom-in, zoom-out</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="OJNgoeQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="OJNgoeQ">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/OJNgoeQ">
  OJNgoeQ</a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
![スクリーンショット 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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="kiikikikkkiikikkiikikiki" data-slug-hash="BaKYQZL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Feature Queries ">
  <span>See the Pen <a href="https://codepen.io/kiikikikkkiikikkiikikiki/pen/BaKYQZL">
  Feature Queries </a> by kiikikikkkiikikkiikikiki (<a href="https://codepen.io/kiikikikkkiikikkiikikiki">@kiikikikkkiikikkiikikiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>