IE11で使えなかった便利なcss・htmlを振り返る

Microsoftが正式にサポートを終了発表

今までご対応お疲れ様でした。
（銀行システムのCOBOLのようにこれからも対応する機会はありそう）
これからはMacOS Safariが入れ替わりのポジションに立ちそうですが、Windowsよりも利用者数は少ないので被害者は増えないでしょう。

動作例ではcodepenを使用しています。
IE11では単体ページを見るには有料ですが、
埋め込んだ場合は普通に見れるみたいなのでIE11で見てみてください。

また、前回適当にまとめたのはこれです↓

CSS編

object-fit

object-fitは、画像をボックス内にどのように納めるか指定できます。

各プロパティの値を設定した場合のサンプル

See the Pen object-fit by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

<img>だけではなく<video>にも使えます。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

contain
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。

cover
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。

fill
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。

none
置換コンテンツは、拡大縮小されません。

scale-down
コンテンツは none または contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

object-position

また、object-fitで指定された画像はobject-positionを使うことで配置を変更することもできます。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

値にはtop,left,right,bottomに加え、%やpxで数値を指定できます。

polyfill

IE11でも使いたい場合は有志がpolyfillを公開しているため、こちらを使用します。

aspect-ratio

また、画像の比率を保つ方法でaspect-ratioも存在しています。
因みにこれもIE11では使えません。

古来からpadding-topを使用して比率を保つ方法は伝授されてきましたが、

.container {
  width: 100%;
  padding-top: 56.25%;
}

aspect-ratioを使うことで一目でどの比率に設定されているかがわかります。

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

polyfill

aspect-ratioにもpolyfillはあるので、使いたい場合はこちらを使用とします。
仕組みとしては先ほど紹介したpadding-topの方法に置き換えるようです。

var()

いわゆるCSS変数と呼ばれる物です。
設定した値をcssファイル内で参照することができます。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

他の要素から参照可能な位置に、ハイフン2つから始まるプロパティ名（--bg-colorなど）を記載し、その中に好きな値を入れます。

あとは参照したい値を**var(--bg-color)**で読み込み、使用します。
また、**var(--bg-color, #fff)**のように--bg-colorが存在しなかった場合のフォールバック値を設定することも可能です。

polyfill

polyfillを使用する際の注意
htmlの描画後にpolyfillが動くので、初期値との切り替わりでちらつきが発生します。

position: sticky;

absolute、relative、fixedなどある中の一つで、
親要素のコンテナに合わせて指定した要素が粘着します。
fixedに近い動作をしますが、ビューポート基準ではなく親要素を指定して基準にすることができます。
また、配置した高さを保持するので別要素の配置を調整する必要がありません。
よくheaderやsidemenuを固定するのに使われているのを見ます。

■stickyの注意点
・親要素にoverflow: hidden;とoverflow: auto;を指定すると動かない
・overflow: scroll;を使用する場合は高さ指定と、梱包している要素をスクロールできる状態にする必要がある
　・この場合は更に上の要素がoverflow: hidden;を指定されていても問題ありません（codepen参照）。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

polyfill

IE11でも使いたい場合はこちらを使用します。
仕組みとしてはfixdでstickyを模倣しているようです。

mask-image

画像に対し、マスクをかけることができます。

1000×500の画像を梨の画像を使ってマスクしています。
透過に使うマスクの画像はpngのようにアルファチャンネルが必要なので注意を。
マスクをかける方はなんでもいいです。

See the Pen mask-image by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

linear-gradientもアルファ部分があれば使用することができます。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

他の設定

また、mask-imageに対しては色々な設定をすることができます。

• mask-clip
• mask-composite
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size

■応用例
↓マウスの座標を元にマスクのmask-position変化させています。

See the Pen Untitled by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

polyfill

現状有効なものはないようです。
<svg>のclip-pathも動かないようなので、代替案も厳しそうです。

clip-path

似たようなプロパティでclip-pathもあります。
こちらはpathを元にマスクをかけます。
変形させたりしたい場合はこっちがよいかも。

filter

よくPhotoshopなどでできる画像効果をつけられるプロパティです。

例では1つのみ適用していますが、重ねがけも可能です。

filter: sepia(1) blur(10px);

See the Pen filter by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

filter: drop-shadow()はbox-shadowとは違い、png画像の輪郭に沿って影をつけてくれるので便利です。
filter: blur()も簡単にぼかしをつけることができるので、アニメーションの幅が広がったりします。

polyfill

こちらはIE11でもpolyfillを使えば動かせます。

unset / initial / revert

cssのプロパティリセットに使われるものです。
PC/SPの切り替えの際にpositionの値をリセットしたりなど、何かと使いがちです。

https://developer.mozilla.org/ja/docs/Web/CSS/unset
https://developer.mozilla.org/ja/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/revert

See the Pen Reset by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

unset
継承プロパティは継承値に、それ以外は初期値に設定します。

initial
プロパティを初期値に設定します。

revert
プロパティをユーザーエージェントのスタイルシート (又はもしあれば、ユーザーのスタイル) で設定された値に初期化します。

polyfill

存在していないようなのでinheritを使用して代用するのが良いと思います。
こちらは親から継承するので、親に特に何も設定していなければ初期化されます。

mix-blend-mode

要素を背景と混合することができます。

混合の対象はテキスト以外にも画像に対しても設定することができます。

See the Pen mix-blend-mode by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

効果については種類が多いため、下記参照
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode#effect_of_different_mix-blend-mode_values

polyfill

探しましたが見つかりませんでした。
もし有効そうなものがあればご共有を。

代替実装を考えましたが、これについては流石に無理でしたので、素直にPhotoshop等で混合した状態で書き出してもらうのがベストだと思います。

prefers-color-scheme

ダークモード時のスタイルを定義できます。
最近の端末は大体ダークモードの設定が可能で利用者もそれなりにいるので、
切り替え/設定をしっかりしてあげると優しいウェブサイトになるのかと思います。

See the Pen OJNgoeQ by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

polyfill

polyfillはこちら。

@supports

プロパティが対応・未対応の場合に適用するCSS。
そんなプロパティを使うなと言われたらその通りですが、
世の中には予想の斜め上をいく変なブラウザで見ているユーザーもいるので、
念の為の対策は必要です。

See the Pen Feature Queries by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

polyfill

calc()

calc()を使うと100% - 100pxのような計算を加えることができます。

IE11ではcalc()は@keyframesでは使えなく、
また、入れ子にすると動きません。

calc()のIE11不具合について調べるとcalcにvwは使用できないとかvw - %をすると動かないなどの記事が出るんですが、普通に動いてます。謎です。

See the Pen calc in vw by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

その他

気が向いたら詳しく書く

• https://developer.mozilla.org/ja/docs/Web/CSS/fit-content
• https://developer.mozilla.org/ja/docs/Web/CSS/max-content
• https://developer.mozilla.org/ja/docs/Web/CSS/clamp
• https://developer.mozilla.org/ja/docs/Web/CSS/gap
• https://developer.mozilla.org/ja/docs/Web/CSS/:is
• https://developer.mozilla.org/ja/docs/Web/CSS/margin-inline-start

html編

<meter>

<meter value="0.5">50%</meter>

See the Pen meter by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

似たようなタグで<progress>があります。
一応動作的には同じですが、ゲージの色が変えれません。

polyfill

<details><summary>

htmlの折りたたみを実装することができるタグです。
jsを使わずにアコーディオンを実装できます。

Qiitaでもできるこれです

テキストが押されると開閉します。

<details>
<summary>Qiitaでもできるこれです</summary>
    テキストが押されると開閉します。
</details>

polyfill

<picture>

お馴染みの<picture>です。
指定したmediaのサイズに応じて読み込む画像を変更できます。
レスポンシブが常識となった今日ではPC/SPの表示切り替えで無駄な画像を読み込ませないために使用は必須と言っても過言ではないです。

<picture>
    <source srcset="pc.png" media="(min-width: 768px)">
    <img src="sp.png" alt="画像">
</picture>

See the Pen picture by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

polyfill

<main>

文章中心を表すためのタグです。
IE11だとデフォルトでdisplay: inline;になっているので、
そのまま使うと表示崩れを大体起こします。

  <main>
    <p>文章文章文章文章</p>
  </main>

polyfill

他のブラウザのようにデフォルトでblockにしてあげると問題なく使用できます。

main {
  display: block;
}

<bdi>

これは書式設定が不明（もしくは右・左書きの違い）の際に使用するタグです。

polyfill

<template>

記述したhtmlをテンプレートとして使うができます。
js内で無造作にhtmlを入れてDOMを挿入する必要がなくなると言った感じですね。

See the Pen template by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

polyfill

<input type="color">

<input>のtypeにcolorを指定することでカラーピッカーを使用することができます。

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

See the Pen color by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

polyfill

polyfillもありますが、見た目を統一する場合はカラーピッカーのライブラリを入れた方が良さそうです。

<output>

計算結果を出力するためのタグです。

<output name="result" for="a b">20</output>

See the Pen output by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

参考