Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。
IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。
JavaScriptはきりがないので調べてません。
Can I Useをもとにまとめています。
分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。
『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。
この記事は2020年3月に作成したのものです。
HTML
rel=“noopener"
リンク元の文書へアクセスできないようにすることをブラウザーに指示します。
これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
<a href="http://example.com" rel=“noopener">アンカー</a>
タイプ：属性値
使いやすさ：★★★★★
参考：リンク種別 - HTML: HyperText Markup Language | MDN
rel=“noreferrer"
HTTPヘッダーでリファラーとして送信しないようにします。
主にSEO関係で利用することが多いでしょう。
<a href="http://example.com" rel=“noreferrer">アンカー</a>
タイプ：属性値
使いやすさ：★★★★★
参考：リンク種別 - HTML: HyperText Markup Language | MDN
srcset属性
利用可能なソースから選択される。
レスポンシブデザインでの画像の入れ替えに使います。
<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="妖精の衣装を着たエルバ">
タイプ：属性
使いやすさ：★★★★★
参考：<img>: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN
picture
画像要素。
条件により適切なものが選択される。
レスポンシブデザインでの画像の入れ替えに使います。
<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
タイプ：要素
使いやすさ：★★★★★
参考：<picture>: 画像要素 - HTML: HyperText Markup Language | MDN
minlength maxlength
最小文字数と最大文字数を指定できる。
minlength以下でフォーカスを外すとCSSが適用される。（ブラウザによる）
maxlength以上の文字数は入力できない。（ブラウザによる）
<input type="text" minlength="4" maxlength="8">
タイプ：属性
使いやすさ：★★★★★
参考：<input type="text"> - HTML: HyperText Markup Language | MDN
<input type="color">
16進数表記のテキストフィールド。
カラーピッカーのUIが用意されている。（ブラウザによる）
<input type="color" value="#f6b73c">
タイプ：要素
使いやすさ：★★★★★
参考：<input type="color"> - HTML: HyperText Markup Language | MDN
wbr
wbr内は改行（折返し）しません。
word-breakプロパティの単語の改行のされかたを思い浮かべると分かりやすいかもしれません。
<p>ここは改行されます。<wbr>ここは改行されません。</wbr>ここは改行されます。</p>
タイプ：要素
使いやすさ：★★★★☆
参考：<wbr> - HTML: HyperText Markup Language | MDN
meter
メーターを表示できる。
<meter id="fuel"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
at 50/100
</meter>
タイプ：要素
使いやすさ：★★★☆☆
参考：<meter> - HTML: HyperText Markup Language | MDN
<details><summary>
CSS、JavaScriptを使用せずにアコーディオンが実装できる。
<details>
<summary>タイトル</summary>
内容
</details>
タイプ：要素
使いやすさ：★★★☆☆
参考：<details>: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN
button form Attribute
<form>タグ外からbutton submitを利用できるようになります。
<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
download
URLへの遷移ではなく、ダウンロードであることをブラウザに伝える。
新しいタブやページ遷移ではなく、直接DLが始まることが多い。（ブラウザの仕様による）
<a href="./sample.png" download>画像を保存</a>
タイプ：属性
使いやすさ：★★☆☆☆
参考：<a>: アンカー要素 - HTML: HyperText Markup Language | MDN
template
JavaScript用の表示されないタグ。
これをコピーしたりして使ったりする物。
<template id="productrow">
<p id="test">テスト</p>
</template>
srcdoc
埋め込むインラインHTMLで、src属性を上書きします。ブラウザーがブラウザーがsrcdoc属性に対応していない場合は、src属性のURLで代替されます。
<iframe srcdoc="<p>サンプルです</p>">
<iframe srcdoc="<p>サンプルです</p>">
<html>
<head></head>
<body>
<p>サンプルです</p>
</body>
</html>
</iframe>
タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：<iframe>: インラインフレーム要素 - HTML: HyperText Markup Language | MDN
CSS
caret-color
ユーザーが編集できる要素のマーカーの色を変更することが出来ます。
inputなどでfocusしたときピコピコ点滅している|の色のことです。
input {
caret-color: red;
}
タイプ：プロパティ
使いやすさ：★★★★★
参考：caret-color - CSS: カスケーディングスタイルシート | MDN
flow-root
clearfixを利用しなくてもfloatを解除できる。
div {
display: flow-root;
}
タイプ：値
使いやすさ：★★★★★
参考：display - CSS: カスケーディングスタイルシート | MDN
font-display
フォントが読み込まれるまでの挙動を指定できます。
Webフォントサービスなどではすでに利用されています。
@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
all
すべてのプロパティを一括して指定する。
button {
all: unset;
}
タイプ：プロパティ
使いやすさ：★★★★★
参考：all - CSS: カスケーディングスタイルシート | MDN
unset
プロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。
divと同じスタイルになるイメージ。
p {
color: red;
}
.bar p {
color: unset;
}
タイプ：値
使いやすさ：★★★★★
参考：unset - CSS: カスケーディングスタイルシート | MDN
::placeholder
プレースホルダーを指定します。
::placeholder {
color: red;
}
タイプ：疑似要素
使いやすさ：★★★★★
参考：::placeholder - CSS: カスケーディングスタイルシート | MDN
filter
グラフィック効果を要素に適用します。
div {
filter: blur(5px);
}
タイプ：プロパティ
使いやすさ：★★★★★
参考：filter - CSS: カスケーディングスタイルシート | MDN
グリッドレイアウト
グリッドレイアウトを表現できる。
.wrapper {
display: grid;
}
タイプ：プロパティ
使いやすさ：★★★★★
参考：CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN
object-fit
コンテナーにどのようにはめ込むかを設定します。
.contain {
object-fit: contain;
}
タイプ：プロパティ
使いやすさ：★★★★★
参考：object-fit - CSS: カスケーディングスタイルシート | MDN
:in-range
現在の値がminおよびmax属性による制限範囲内にあるinput要素を表します。
<input type="number" min="1" max="10" value="5">
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
タイプ：擬似クラス
使いやすさ：★★★★☆
参考：:in-range - CSS: カスケーディングスタイルシート | MDN
font-kerning
フォントにカーニング情報がある場合に適用できます。
normalとnoneを比較すると分かりやすいです。
body {
font-kerning: normal;
}
タイプ：プロパティ
使いやすさ：★★★★☆
参考：font-kerning - CSS: カスケーディングスタイルシート | MDN
@supports
ブラウザが対応していれば適用される。
@supports (display: grid) {
div {
display: grid;
}
}
タイプ：クエリ
使いやすさ：★★★★☆
参考：@supports - CSS: カスケーディングスタイルシート | MDN
shape-outside
シェイプを定義できる。
floatと併用したときに真価を発揮する。
img {
float: left;
shape-outside: circle(50%);
}
タイプ：プロパティ
使いやすさ：★★★★☆
参考：CSS シェイプの概要 - CSS: カスケーディングスタイルシート | MDN
tab-size
tab文字（tabキー）のサイズを指定する。
code {
tab-size: 4;
}
タイプ：プロパティ
使いやすさ：★★★★☆
参考：tab-size - CSS: カスケーディングスタイルシート | MDN
変数
カスタムプロパティとも呼ばれる。
参照することができる値。
:root {
--main-color: brown;
}
p {
color: var(--main-color);
}
タイプ：関数、値
使いやすさ：★★★★☆
参考：CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN
system-ui
総称font-familyの1つ。
思考停止したいときに便利。
body {
font-family: system-ui;
}
タイプ：値
使いやすさ：★★★☆☆
参考：
font-family - CSS: カスケーディングスタイルシート | MDN
System Font Stack | CSS-Tricks
text-rendering
フォントのレンダリングをキレイさ優先か、速度優先かを指定できる。
対応できるフォントに条件があります。
body {
text-rendering: auto;
}
タイプ：プロパティ
使いやすさ：★★★☆☆
参考：text-rendering - CSS: カスケーディングスタイルシート | MDN
ロジカルプロパティ
物理的な方向のプロパティを指定します。
p {
margin-block-start: 5%;
margin-block-end: 5%;
}
タイプ：プロパティ
使いやすさ：★★★☆☆
参考：
New CSS Logical Properties! - Elad Shechter - Medium
margin-block - CSS: カスケーディングスタイルシート | MDN
インタラクション メディアクエリ
入力デバイスのメカニズムによりスタイルを適用する。
@media (any-hover: hover) {
a:hover {
background: yellow;
}
}
タイプ：クエリ
使いやすさ：★★★☆☆
参考：
@media - CSS: カスケーディングスタイルシート | MDN
shape-margin
shapeのmarginを設定する。
img {
float: left;
shape-outside: circle(50%);
shape-margin: 20px;
}
タイプ：プロパティ
使いやすさ：★★★☆☆
参考：shape-margin - CSS: カスケーディングスタイルシート | MDN
object-position
ボックス内における置換要素の配置を指定します。
.position {
object-position: 20% 10%;
}
タイプ：プロパティ
使いやすさ：★★★☆☆
参考：object-position - CSS: カスケーディングスタイルシート | MDN
:read-only
ユーザーが編集できない要素を対象とします。
対象はreadonlyが設定されているものだけではありません。
<input type="text" value="これは読み取り専用の入力欄です。" readonly>
/* Firefox では接頭辞付きで対応 */
input:-moz-read-only {
background-color: #ccc;
}
/* Blink/WebKit/Edge では接頭辞なしで対応 */
input:read-only {
background-color: #ccc;
}
タイプ：擬似クラス
使いやすさ：★★☆☆☆
参考：:read-only - CSS: カスケーディングスタイルシート | MDN
:read-write
:read-onlyとは逆に、ユーザーが編集できる要素を対象とします。
<input type="text" value="">
<div contentEditable="true">ここは編集できる</div>
/* Firefox では接頭辞付きで対応 */
input:-moz-read-write {
background-color: #bbf;
}
/* Blink/WebKit/Edge では接頭辞なしで対応 */
input:read-write {
background-color: #bbf;
}
タイプ：疑似要素
使いやすさ：★★☆☆☆
参考：:read-write - CSS: カスケーディングスタイルシート | MDN
Case-insensitive
属性セレクタの大文字、小文字を区別しません。
<a href="#InSensitive">大文字</a>
<a href="#insensitive">小文字</a>
a[href*="insensitive" i] {
color: cyan;
}
タイプ：属性セレクタ
使いやすさ：★★☆☆☆
参考：属性セレクタ - CSS: カスケーディングスタイルシート | MDN
inherit
プロパティを親から継承します。
/* #sidebarのcolorを継承する */
#sidebar h2 { color: inherit; }
タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：inherit - CSS: カスケーディングスタイルシート | MDN
reversed
olのナンバリングを逆方向から表示します。
<ol reversed>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
タイプ：属性
使いやすさ：★★☆☆☆
参考：HTML ol reversed Attribute
outline-style
outlineのスタイルを設定します。
.dashed {
outline-style: dashed;
}
タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：outline-style - CSS: カスケーディングスタイルシート | MDN
vmax
vwとvhの大きい方の割合。
何故かvminはIE11でも使えます。
div {
width: 20vmax;
height: 20vmax;
}
タイプ：単位
使いやすさ：★★☆☆☆
参考：<length> - CSS: カスケーディングスタイルシート | MDN
text-orientation
行内のテキストの向きを設定します。
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：text-orientation - CSS: カスケーディングスタイルシート | MDN
font-variant-numeric
数字、記号の表示形式を指定します。
OpenTypeのフォントしか利用出来ないので限定的です。
body {
font-variant-numeric: normal;
}
タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：font-variant-numeric - CSS: カスケーディングスタイルシート | MDN
rebeccapurple
#663399のカラーネーム
Qiitaでカラーコードを入力すると色見本が出るんですね!
p {
color: rebeccapurple;
}
タイプ：値
使いやすさ：★☆☆☆☆
参考：color - CSS: カスケーディングスタイルシート | MDN
initial
初期値に設定します。
初期値はブラウザによって異なるので注意しましょう。
p {
color: red;
}
em {
color: initial;
}
タイプ：値
使いやすさ：★☆☆☆☆
参考：initial - CSS: カスケーディングスタイルシート | MDN
shape-image-threshold
shape-outside の値に指定された画像を使用してシェイプを抽出するのに使用される。
shape-image-threshold: 0.7;
タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：shape-image-threshold - CSS: カスケーディングスタイルシート | MDN
background-blend-mode
背景をどのように混合するかを設定します。
div {
background-color: green;
background-image: url(/media/examples/balloon.jpg);
background-blend-mode: multiply;
}
タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：background-blend-mode - CSS: カスケーディングスタイルシート | MDN
will-change
変更が予想されることをブラウザに指定します。
.sidebar {
will-change: transform;
}
タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：will-change - CSS: カスケーディングスタイルシート | MDN
終わり
使えるものが凄く増えるように見えますが、実用的なものは少ない印象。
ただ、IEの不具合に苦しめられることがなくなるのは良いですね。