IE11のサポートを切ると使えるようになるCSSとか一覧

Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。
IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。
JavaScriptはきりがないので調べてません。

[Can I Use](https://caniuse.com/#compare_cats=CSS,HTML5)をもとにまとめています。
分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。
『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。

この記事は2020年3月に作成したのものです。


# HTML

## rel=“noopener"
リンク元の文書へアクセスできないようにすることをブラウザーに指示します。
これを指定しないと、`target=”_blank”`利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。

```html:html
<a href="http://example.com" rel=“noopener">アンカー</a>
```

タイプ：属性値
使いやすさ：★★★★★
参考：[リンク種別 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Link_types)



## rel=“noreferrer"
HTTPヘッダーでリファラーとして送信しないようにします。
主にSEO関係で利用することが多いでしょう。

```html:html
<a href="http://example.com" rel=“noreferrer">アンカー</a>
```

タイプ：属性値
使いやすさ：★★★★★
参考：[リンク種別 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Link_types)



## srcset属性
利用可能なソースから選択される。
レスポンシブデザインでの画像の入れ替えに使います。

```html:html
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ">
```

タイプ：属性
使いやすさ：★★★★★
参考：[&lt;img&gt;: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#attr-srcset)



## picture
画像要素。
条件により適切なものが選択される。
レスポンシブデザインでの画像の入れ替えに使います。

```html:html
<picture>
    <source srcset="/media/examples/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
```

タイプ：要素
使いやすさ：★★★★★
参考：[&lt;picture&gt;: 画像要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture)



## minlength maxlength
最小文字数と最大文字数を指定できる。

`minlength`以下でフォーカスを外すとCSSが適用される。（ブラウザによる）
`maxlength`以上の文字数は入力できない。（ブラウザによる）

```html:html
<input type="text" minlength="4" maxlength="8">
```

タイプ：属性
使いやすさ：★★★★★
参考：[&lt;input type=&#34;text&#34;&gt; - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/text)



## &lt;input type="color"&gt;
16進数表記のテキストフィールド。
カラーピッカーのUIが用意されている。（ブラウザによる）

```html:html
<input type="color" value="#f6b73c">
```

タイプ：要素
使いやすさ：★★★★★
参考：[&lt;input type=&#34;color&#34;&gt; - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/color)



## wbr
`wbr`内は改行（折返し）しません。
`word-break`プロパティの単語の改行のされかたを思い浮かべると分かりやすいかもしれません。

```html:html
<p>ここは改行されます。<wbr>ここは改行されません。</wbr>ここは改行されます。</p>
```

タイプ：要素
使いやすさ：★★★★☆
参考：[&lt;wbr&gt; - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/wbr)



## meter
メーターを表示できる。

```html:html
<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>
```

タイプ：要素
使いやすさ：★★★☆☆
参考：[&lt;meter&gt; - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meter)



## &lt;details&gt;&lt;summary&gt;
CSS、JavaScriptを使用せずにアコーディオンが実装できる。

```html:html
<details>
    <summary>タイトル</summary>
    内容
</details>
```

タイプ：要素
使いやすさ：★★★☆☆
参考：[&lt;details&gt;: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/details)



## button form Attribute
`<form>`タグ外から`button submit`を利用できるようになります。

```php:php
<form action="/action_page.php" method="get" id="form1">
  <input type="text" id="name" name="name">
</form>

<button type="submit" form="form1" value="Submit">Submit</button>
```

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：[HTML button form Attribute](https://www.w3schools.com/tags/att_button_form.asp)



## download
URLへの遷移ではなく、ダウンロードであることをブラウザに伝える。
新しいタブやページ遷移ではなく、直接DLが始まることが多い。（ブラウザの仕様による）

```css:css
<a href="./sample.png" download>画像を保存</a>
```

タイプ：属性
使いやすさ：★★☆☆☆
参考：[&lt;a&gt;: アンカー要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)



## template
JavaScript用の表示されないタグ。
これをコピーしたりして使ったりする物。

```html:html
<template id="productrow">
  <p id="test">テスト</p>
</template> 
```

タイプ：要素
使いやすさ：★☆☆☆☆
参考：[]()



## srcdoc
埋め込むインラインHTMLで、`src`属性を上書きします。ブラウザーがブラウザーが`srcdoc`属性に対応していない場合は、`src`属性の`URL`で代替されます。

```html:sample.html
<iframe srcdoc="<p>サンプルです</p>"> 
```

```html:実行結果
<iframe srcdoc="<p>サンプルです</p>">
  <html>
    <head></head>
    <body>
      <p>サンプルです</p>
    </body>
  </html>
</iframe>
```

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：[&lt;iframe&gt;: インラインフレーム要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe)





# CSS

## caret-color
ユーザーが編集できる要素のマーカーの色を変更することが出来ます。
`input`などで`focus`したときピコピコ点滅している`|`の色のことです。

```css:css
input {
  caret-color: red;
}
```

タイプ：プロパティ
使いやすさ：★★★★★
参考：[caret-color - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/caret-color)



## flow-root
`clearfix`を利用しなくても`float`を解除できる。

```css:css
div {
  display: flow-root;
}
```

タイプ：値
使いやすさ：★★★★★
参考：[display - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/display)



## font-display
フォントが読み込まれるまでの挙動を指定できます。
Webフォントサービスなどではすでに利用されています。

```css:css
@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

タイプ：プロパティ
使いやすさ：★★★★★
参考：[font-display - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/font-display)



## all
すべてのプロパティを一括して指定する。

```css:css
button {
  all: unset;
}
```

タイプ：プロパティ
使いやすさ：★★★★★
参考：[all - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/all)



## unset
プロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。
`div`と同じスタイルになるイメージ。

```css:css
p {
  color: red;
}
.bar p {
  color: unset;
}
```

タイプ：値
使いやすさ：★★★★★
参考：[unset - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/unset)



## ::placeholder
プレースホルダーを指定します。

```css:css
::placeholder {
  color: red;
}
```

タイプ：疑似要素
使いやすさ：★★★★★
参考：[::placeholder - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder)



## filter
グラフィック効果を要素に適用します。

```css:css
div {
  filter: blur(5px);
}
```

タイプ：プロパティ
使いやすさ：★★★★★
参考：[filter - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/filter)



## グリッドレイアウト
グリッドレイアウトを表現できる。

```css:css
.wrapper {
  display: grid;
}
```

タイプ：プロパティ
使いやすさ：★★★★★
参考：[CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)



## object-fit
コンテナーにどのようにはめ込むかを設定します。

```css:css
.contain {
  object-fit: contain;
}
```

タイプ：プロパティ
使いやすさ：★★★★★
参考：[object-fit - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/object-fit)



## :in-range
現在の値が`min`および`max`属性による制限範囲内にある`input`要素を表します。

```html:html
<input type="number" min="1" max="10" value="5">
```

```css:css
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
```

タイプ：擬似クラス
使いやすさ：★★★★☆
参考：[:in-range - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:in-range)



## font-kerning
フォントにカーニング情報がある場合に適用できます。
`normal`と`none`を比較すると分かりやすいです。

```css:css
body {
  font-kerning: normal;
}
```

タイプ：プロパティ
使いやすさ：★★★★☆
参考：[font-kerning - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-kerning)



## @supports
ブラウザが対応していれば適用される。

```css:css
@supports (display: grid) {
  div {
    display: grid;
  }
}
```

タイプ：クエリ
使いやすさ：★★★★☆
参考：[@supports - CSS: カスケーディングスタイルシート | MDN](view-source:https://developer.mozilla.org/ja/docs/Web/CSS/@supports)



## shape-outside
シェイプを定義できる。
`float`と併用したときに真価を発揮する。

```css:css
img {
  float: left;
  shape-outside: circle(50%);
}
```

タイプ：プロパティ
使いやすさ：★★★★☆
参考：[CSS シェイプの概要 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)



## tab-size
tab文字（tabキー）のサイズを指定する。

```css:css
code {
  tab-size: 4;
}
```

タイプ：プロパティ
使いやすさ：★★★★☆
参考：[tab-size - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/tab-size)



## 変数
カスタムプロパティとも呼ばれる。
参照することができる値。

```css:css
:root {
  --main-color: brown;
}
p {
  color: var(--main-color);
}
```

タイプ：関数、値
使いやすさ：★★★★☆
参考：[CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties)



## system-ui
総称`font-family`の1つ。
思考停止したいときに便利。

```css:css
body {
  font-family: system-ui;
}
```

タイプ：値
使いやすさ：★★★☆☆
参考：
[font-family - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-family)
[System Font Stack | CSS-Tricks](https://css-tricks.com/snippets/css/system-font-stack/)



## text-rendering
フォントのレンダリングをキレイさ優先か、速度優先かを指定できる。
対応できるフォントに条件があります。

```css:css
body {
  text-rendering: auto;
}
```

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：[text-rendering - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/text-rendering)



## ロジカルプロパティ
物理的な方向のプロパティを指定します。

```css:css
p {
  margin-block-start: 5%;
  margin-block-end: 5%;
}
```

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：
[New CSS Logical Properties! - Elad Shechter - Medium](https://medium.com/@elad/new-css-logical-properties-bc6945311ce7)
[margin-block - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/margin-block)



## インタラクション　メディアクエリ
入力デバイスのメカニズムによりスタイルを適用する。

```css:css
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}
```

タイプ：クエリ
使いやすさ：★★★☆☆
参考：
[@media - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/@media)



## shape-margin
`shape`の`margin`を設定する。

```css:css
img {
  float: left;
  shape-outside: circle(50%);
  shape-margin: 20px;
}
```

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：[shape-margin - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/shape-margin)



## object-position
ボックス内における置換要素の配置を指定します。

```css:css
.position {
  object-position: 20% 10%;
}
```

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：[object-position - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/object-position)



## :read-only
ユーザーが編集できない要素を対象とします。
対象は`readonly`が設定されているものだけではありません。

```html:html
<input type="text" value="これは読み取り専用の入力欄です。" readonly>
```

```css:css
/* Firefox では接頭辞付きで対応 */
input:-moz-read-only {
  background-color: #ccc;
}
/* Blink/WebKit/Edge では接頭辞なしで対応 */
input:read-only {
  background-color: #ccc;
}
```

タイプ：擬似クラス
使いやすさ：★★☆☆☆
参考：[:read-only - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:read-only)



## :read-write
`:read-only`とは逆に、ユーザーが編集できる要素を対象とします。

```html:html
<input type="text" value="">
<div contentEditable="true">ここは編集できる</div>
```

```css:css
/* Firefox では接頭辞付きで対応 */
input:-moz-read-write {
  background-color: #bbf;
}
/* Blink/WebKit/Edge では接頭辞なしで対応 */
input:read-write {
  background-color: #bbf;
}
```

タイプ：疑似要素
使いやすさ：★★☆☆☆
参考：[:read-write - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:read-write)



## Case-insensitive
属性セレクタの大文字、小文字を区別しません。

```html:html
<a href="#InSensitive">大文字</a>
<a href="#insensitive">小文字</a>
```

```css:css
a[href*="insensitive" i] {
  color: cyan;
}
```

タイプ：属性セレクタ
使いやすさ：★★☆☆☆
参考：[属性セレクタ - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)



## inherit
プロパティを親から継承します。

```css:css
/* #sidebarのcolorを継承する */
#sidebar h2 { color: inherit; }
```

タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：[inherit - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/inherit)



## reversed
`ol`のナンバリングを逆方向から表示します。

```html:html
<ol reversed>
 <li>項目1</li>
 <li>項目2</li>
 <li>項目3</li>
</ol> 
```

タイプ：属性
使いやすさ：★★☆☆☆
参考：[HTML ol reversed Attribute](https://www.w3schools.com/tags/att_ol_reversed.asp)



## outline-style
`outline`のスタイルを設定します。

```css:css
.dashed {
  outline-style: dashed;
}
```

タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：[outline-style - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/outline-style)



## vmax
`vw`と`vh`の大きい方の割合。
何故か`vmin`はIE11でも使えます。

```css:css
div {
  width: 20vmax;
  height: 20vmax; 
}
```

タイプ：単位
使いやすさ：★★☆☆☆
参考：[&lt;length&gt; - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Length)



## text-orientation
行内のテキストの向きを設定します。

```css:css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```

タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：[text-orientation - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation)



## font-variant-numeric
数字、記号の表示形式を指定します。
OpenTypeのフォントしか利用出来ないので限定的です。

```css:css
body {
  font-variant-numeric: normal;
}
```

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：[font-variant-numeric - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-numeric)



## rebeccapurple
`#663399`のカラーネーム
Qiitaでカラーコードを入力すると色見本が出るんですね!

```css:css
p {
  color: rebeccapurple;
}
```

タイプ：値
使いやすさ：★☆☆☆☆
参考：[color - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/color)



## initial
初期値に設定します。
初期値はブラウザによって異なるので注意しましょう。

```css:css
p {
  color: red;
}
em {
  color: initial;
}
```

タイプ：値
使いやすさ：★☆☆☆☆
参考：[initial - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/initial)



## shape-image-threshold
shape-outside の値に指定された画像を使用してシェイプを抽出するのに使用される。

```css:css
shape-image-threshold: 0.7;
```

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：[shape-image-threshold - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/shape-image-threshold)



## background-blend-mode
背景をどのように混合するかを設定します。

```css:css
div {
  background-color: green;
  background-image: url(/media/examples/balloon.jpg);
  background-blend-mode: multiply;
}
```

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：[background-blend-mode - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/background-blend-mode)



## will-change
変更が予想されることをブラウザに指定します。

```css:css
.sidebar {
  will-change: transform;
}
```

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：[will-change - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/will-change)



# 終わり
使えるものが凄く増えるように見えますが、実用的なものは少ない印象。
ただ、IEの不具合に苦しめられることがなくなるのは良いですね。