LoginSignup
155
145

More than 3 years have passed since last update.

@tsuka-rinorino(りの つか)

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

Last updated at Posted at 2020-03-12

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

Can I Useをもとにまとめています。
分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。
『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。

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

HTML

rel=“noopener"

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

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

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

rel=“noreferrer"

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

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

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

srcset属性

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

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="妖精の衣装を着たエルバ">

タイプ：属性
使いやすさ：★★★★★
参考：<img>: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN

picture

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

html
<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以上の文字数は入力できない。（ブラウザによる）

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

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

<input type="color">

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

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

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

wbr

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

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

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

meter

メーターを表示できる。

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

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

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

button form Attribute

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

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

download

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

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

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

template

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

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

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

srcdoc

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

sample.html
<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したときピコピコ点滅している|の色のことです。

css
input {
  caret-color: red;
}

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

flow-root

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

css
div {
  display: flow-root;
}

タイプ：値
使いやすさ：★★★★★
参考：display - 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

all

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

css
button {
  all: unset;
}

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

unset

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

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

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

::placeholder

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

css
::placeholder {
  color: red;
}

タイプ：疑似要素
使いやすさ：★★★★★
参考：::placeholder - 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

:in-range

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

html
<input type="number" min="1" max="10" value="5">
css
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

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

font-kerning

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

css
body {
  font-kerning: normal;
}

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

@supports

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

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

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

shape-outside

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

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

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

tab-size

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

css
code {
  tab-size: 4;
}

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

変数

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

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

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

system-ui

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

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

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

text-rendering

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

css
body {
  text-rendering: auto;
}

タイプ：プロパティ
使いやすさ：★★★☆☆
参考：text-rendering - 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

shape-margin

shapeのmarginを設定する。

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

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

object-position

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

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

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

:read-only

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

html
<input type="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
<input type="text" value="">
<div contentEditable="true">ここは編集できる</div>
css
/* Firefox では接頭辞付きで対応 */
input:-moz-read-write {
  background-color: #bbf;
}
/* Blink/WebKit/Edge では接頭辞なしで対応 */
input:read-write {
  background-color: #bbf;
}

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

Case-insensitive

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

html
<a href="#InSensitive">大文字</a>
<a href="#insensitive">小文字</a>
css
a[href*="insensitive" i] {
  color: cyan;
}

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

inherit

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

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

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

reversed

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

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

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

outline-style

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

css
.dashed {
  outline-style: dashed;
}

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

vmax

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

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

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

text-orientation

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

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

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

font-variant-numeric

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

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

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

rebeccapurple

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

css
p {
  color: rebeccapurple;
}

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

initial

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

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

タイプ：値
使いやすさ：★☆☆☆☆
参考：initial - 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

will-change

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

css
.sidebar {
  will-change: transform;
}

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

終わり

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

155
145
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
155
145