IE11のサポートが切れれば使用出来るHTMLやCSSの便利な機能

Windows 7のサポート期限が過ぎた事で、今後IE11のサポートを切るという選択が一層増えてきます。
HTML5やCSS3にはIE11がサポートしていない為、使えない便利な機能が多くあります。そういった便利な機能が今後は使えるようになって来るので、知っておきましょう。

HTML

rel=“noopener"

target="_blank"を使用するとリンク先を別のタブで開く事が出来ますが、セキュリティ上の脆弱性があり、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。それを避ける事が出来るのがこの「rel=“noopener"」属性です。

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

rel=“noreferrer"

rel属性にnoreferrerを付けることで、参照先に対して参照元のリンクを渡さないようにすることができます。（電話で例えると非通知電話みたいなものです。）

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

input type="color"

16進数表記のテキストフィールド。カラーピッカーのUIが用意されている。

<input type="color" value="#f6b73c">

meter要素

<p>オーブンの温度: <meter min="200" max="500"
  value="350">350 degrees</meter></p>

details, summary要素

CSS、JavaScriptを使用せずにアコーディオンが実装できる。

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

button form Attribute

送信ボタン(button submit)をform要素の外からでも利用できるようになる。

<form action="outout.php" method="post" id="form1">
  <input type="text" id="name" name="name">
</form>

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

picture要素

srcset属性

CSS

flow-root

clearfixを利用しなくてもfloatを解除できる。overflow:hiddenも必要ありません。

div {
  display: flow-root;
}

all

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

button {
  all: unset;
}

unset

プロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。

<style>
.box{
color: green;
}
p {
color: red;
font-size: 20px;
}
.bar{
all: unset;
}
</style>
</head>
<body>
<div class="box">
<p>このテキストは赤です。</p>
<p>このテキストも赤です。</p>
<p class="bar">このテキストです。</p>
</div>
</body>

それ以外にも便利なものがたくさんあります

qiita.com

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。