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

Can I Useをもとにまとめています。
分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。

順不同です。
反応次第でキレイに並び替えるかもしれません。

HTML

meter

メーターを表示できる。

html

<meterid="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を使用せずにアコーディオンが実装できる。

html

<details><summary>タイトル</summary>内容
</details>

タイプ：要素
使いやすさ：★★★★☆
参考：<details>: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN

16進数表記のテキストフィールド。

html

<inputtype="color"value="#f6b73c">

タイプ：要素
使いやすさ：★★★★★
参考：<input type="color"> - HTML: HyperText Markup Language | MDN

download

URLへの遷移ではなく、ダウンロードであることをブラウザに伝える。

css

<ahref="./sample.png"download>画像を保存</a>

タイプ：属性
使いやすさ：★☆☆☆☆
参考：<a>: アンカー要素 - HTML: HyperText Markup Language | MDN

template

JavaScriptの表示されないタグ。

html

<templateid="productrow"><pid="test">テスト</p></template>

タイプ：要素
使いやすさ：★☆☆☆☆
参考：

srcset属性

利用可能なソースから選択される。

html

<imgsrcset="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

画像要素。
条件により適切なものが選択される。

html

<picture><sourcesrcset="/media/examples/surfer-240-200.jpg"media="(min-width: 800px)"><imgsrc="/media/examples/painted-hand-298-332.jpg"/></picture>

タイプ：要素
使いやすさ：★★★★★
参考：<picture>: 画像要素 - HTML: HyperText Markup Language | MDN

minlength maxlength

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

html

<inputtype="text"minlength="4"maxlength="8">

タイプ：属性
使いやすさ：★★★★★
参考：<input type="text"> - HTML: HyperText Markup Language | MDN

button form Attribute

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

php

<formaction="/action_page.php"method="get"id="form1"><inputtype="text"id="name"name="name"></form><buttontype="submit"form="form1"value="Submit">Submit</button>

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：HTML button form Attribute

srcdoc

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

sample.html

<iframesrcdoc="<p>サンプルです</p>">

実行結果

<iframesrcdoc="<p>サンプルです</p>"><html><head></head><body><p>サンプルです</p></body></html></iframe>

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：<iframe>: インラインフレーム要素 - HTML: HyperText Markup Language | MDN

wbr

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

html

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

タイプ：要素
使いやすさ：★★★★☆
参考：<wbr> - HTML: HyperText Markup Language | MDN

rel=“noreferrer"

HTTP ヘッダーでリファラーとして送信しないようにします。

html

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

タイプ：属性値
使いやすさ：★★★★★
参考：リンク種別 - HTML: HyperText Markup Language | MDN

rel=“noopener"

リンク元の文書へアクセスできないようにすることをブラウザーに指示します。
これを指定しないと、JavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。

html

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

タイプ：属性値
使いやすさ：★★★★★
参考：リンク種別 - HTML: HyperText Markup Language | MDN

CSS

font-variant-numeric

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

css

body{font-variant-numeric:normal;}

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：font-variant-numeric - CSS: カスケーディングスタイルシート | MDN

:read-only

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

html

<inputtype="text"value="これは読み取り専用の入力欄です。"readonly>

css

/* 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とは逆に、ユーザーが編集できる要素を対象とします。

html

<inputtype="text"value=""><divcontentEditable="true">ここは編集できる</div>

css

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

タイプ：疑似要素
使いやすさ：★★☆☆☆
参考：:read-write - CSS: カスケーディングスタイルシート | MDN

system-ui

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

css

body{font-family:system-ui;}

タイプ：値
使いやすさ：★★★☆☆
参考：
font-family - CSS: カスケーディングスタイルシート | MDN
System Font Stack | CSS-Tricks

caret-color

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

css

input{caret-color:red;}

タイプ：プロパティ
使いやすさ：★★★★★
参考：caret-color - CSS: カスケーディングスタイルシート | MDN

rebeccapurple

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

css

p{color:rebeccapurple;}

タイプ：値
使いやすさ：★☆☆☆☆
参考：color - CSS: カスケーディングスタイルシート | MDN

flow-root

clearfixを利用しなくてもfloatを解除できる。

css

div{display:flow-root;}

タイプ：値
使いやすさ：★★★★★
参考：display - CSS: カスケーディングスタイルシート | MDN

text-rendering

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

css

body{text-rendering:auto;}

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：text-rendering - CSS: カスケーディングスタイルシート | MDN

font-display

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

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

Case-insensitive

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

html

<ahref="#InSensitive">大文字</a><ahref="#insensitive">小文字</a>

css

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

タイプ：属性セレクタ
使いやすさ：★★☆☆☆
参考：属性セレクタ - CSS: カスケーディングスタイルシート | MDN

:in-range

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

html

<inputtype="number"min="1"max="10"value="5">

css

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

タイプ：擬似クラス
使いやすさ：★★★★☆
参考：:in-range - CSS: カスケーディングスタイルシート | MDN

all

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

css

button{all:unset;}

タイプ：プロパティ
使いやすさ：★★★★★
参考：all - CSS: カスケーディングスタイルシート | MDN

initial

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

css

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

タイプ：値
使いやすさ：★☆☆☆☆
参考：initial - CSS: カスケーディングスタイルシート | MDN

unset

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

css

p{color:red;}.barp{color:unset;}

タイプ：値
使いやすさ：★★★★★
参考：unset - CSS: カスケーディングスタイルシート | MDN

inherit

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

css

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

タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：inherit - CSS: カスケーディングスタイルシート | MDN

reversed

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

html

<olreversed><li>項目1</li><li>項目2</li><li>項目3</li></ol>

タイプ：属性
使いやすさ：★★☆☆☆
参考：HTML ol reversed Attribute

font-kerning

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

css

body{font-kerning:normal;}

タイプ：プロパティ
使いやすさ：★★★★☆
参考：font-kerning - CSS: カスケーディングスタイルシート | MDN

ロジカルプロパティ

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

css

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

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：
New CSS Logical Properties! - Elad Shechter - Medium
margin-block - CSS: カスケーディングスタイルシート | MDN

インタラクション　メディアクエリ

入力デバイスのメカニズムによりスタイルを適用する。

css

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

タイプ：クエリ
使いやすさ：★★★☆☆
参考：
@media - CSS: カスケーディングスタイルシート | MDN

@supports

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

css

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

タイプ：クエリ
使いやすさ：★★★★☆
参考：@supports - CSS: カスケーディングスタイルシート | MDN

::placeholder

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

css

::placeholder{color:red;}

タイプ：疑似要素
使いやすさ：★★★★★
参考：::placeholder - CSS: カスケーディングスタイルシート | MDN

shape-outside

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

css

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

タイプ：プロパティ
使いやすさ：★★★★☆
参考：CSS シェイプの概要 - CSS: カスケーディングスタイルシート | MDN

shape-margin

shapeのmarginを設定する。

css

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

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：shape-margin - CSS: カスケーディングスタイルシート | MDN

shape-image-threshold

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

css

shape-image-threshold:0.7;

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：shape-image-threshold - CSS: カスケーディングスタイルシート | MDN

background-blend-mode

背景をどのように混合するかを設定します。

css

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

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：background-blend-mode - CSS: カスケーディングスタイルシート | MDN

tab-size

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

css

code{tab-size:4;}

タイプ：プロパティ
使いやすさ：★★★★☆
参考：tab-size - CSS: カスケーディングスタイルシート | MDN

outline-style

outlineのスタイルを設定します。

css

.dashed{outline-style:dashed;}

タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：outline-style - CSS: カスケーディングスタイルシート | MDN

vmax

vwとvhの大きい方の割合。

css

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

タイプ：単位
使いやすさ：★★☆☆☆
参考：<length> - CSS: カスケーディングスタイルシート | MDN

filter

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

css

div{filter:blur(5px);}

タイプ：プロパティ
使いやすさ：★★★★★
参考：filter - CSS: カスケーディングスタイルシート | MDN

グリッドレイアウト

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

css

.wrapper{display:grid;}

タイプ：プロパティ
使いやすさ：★★★★★
参考：CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN

object-fit

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

css

.contain{object-fit:contain;}

タイプ：プロパティ
使いやすさ：★★★★★
参考：object-fit - CSS: カスケーディングスタイルシート | MDN

object-position

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

css

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

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：object-position - CSS: カスケーディングスタイルシート | MDN

text-orientation

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

css

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

タイプ：プロパティ
使いやすさ：★★☆☆☆
参考：text-orientation - CSS: カスケーディングスタイルシート | MDN

will-change

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

css

.sidebar{will-change:transform;}

タイプ：プロパティ
使いやすさ：★☆☆☆☆
参考：will-change - CSS: カスケーディングスタイルシート | MDN

変数

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

css

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

タイプ：関数、値
使いやすさ：★★★★☆
参考：CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN

終わり

IEのサポートを終えた場合のプロパティなど、使えるものが多くなる恩恵はあまり感じないかもしれない。
ただ、IEの不具合に苦しめられることがなくなるのは良いですね。

HTML

meter

<details><summary>

download

template

srcset属性

picture

minlength maxlength

button form Attribute

srcdoc

wbr

rel=“noreferrer"

rel=“noopener"

CSS

font-variant-numeric

:read-only

:read-write

system-ui

caret-color

rebeccapurple

flow-root

text-rendering

font-display

Case-insensitive

:in-range

all

initial

unset

inherit

reversed

font-kerning

ロジカルプロパティ

インタラクション メディアクエリ

::placeholder

shape-outside

shape-margin

shape-image-threshold

background-blend-mode

tab-size

outline-style

vmax

filter

グリッドレイアウト

object-fit

object-position

text-orientation

will-change

変数

終わり

Trending Articles

インタラクション　メディアクエリ