IEサポート完全終了記念（？） 今後使いたい、便利なCSSプロパティ・HTMLタグ、＆etc

さようなら、IE

2022年6月16日、ついにInternet Explorer、通称IEがEOLを迎えました（End of Life＝完全終了）。

さすがにIE10以前に対応しないといけないような事は今日日無かったかと思いますが、それでもこれまでは「Windows10でIE11が動く以上IE11は対応してくれ」と言われるパターンも少なくなかったはず。
しかし、6月16日以降のアップデートが適用されるとIEは起動すらできなくなるため、面倒なIE対応をついにしなくてよくなった！とハッピーな気持ちの方も多いと思われます。IE対応してくれと言う人がOSアプデするかはさておき。そもそもWin10使ってない可能性もあるな…

ありがたい人がPolyfillを作ってくれてたりするJavascriptはともかく、HTML・CSSについてはブラウザ側が対応していない機能などは基本的には使えません。
IEではサポートしていない、あるいはIE固有のバグがあるなど 『とても便利だけどIEで使えない』 という理由で採用を諦めざるをえなかったCSSプロパティやHTMLタグは、数多く存在します。
しかしIE対応とついに決別（たぶん）できるということで、今後どしどし使っていきたい、大変便利なCSSプロパティなどを簡単に紹介していきます。
よろしければ、皆様の今後のWeb制作にお役立ていただければ幸いです。まとめるのが遅くて6/16に全然間に合わなかったので何番煎じになってるか分かりませんが

※IEではこのページは正常に閲覧できません！！！
　EOL後にIE使ってQiita見る奇特な人がいるとは思いませんが、一応ね…。

デザイン・装飾系

CSSでカラーブレンド | mix-blend-mode

See the Pen mix-blend-mode by 佐薙 龍二 (@transel) on CodePen.

Adobe系ソフトなどでは基本的な機能の1つ、レイヤーのカラーブレンドがCSSでも利用可能。2つの異なる色の要素が重なった時の見え方を指定できるプロパティです。
2015年頃に策定され、現在ではIEを除く主要なブラウザはすべて完全対応しています。

上の例では画像にposition: absoluteとz-index: -1で後ろに配置した画像に、色付きのテキストを配置しています。もちろん画像と画像のブレンドも可能。
↑のCodepenでは一部のみの例ですが、他にも様々な指定が可能です。こちらのサイトが詳しく解説されていて、色々な値を試せるデモページもあります。

このプロパティの良いところは、画像はもちろん <video>などの動画や<canvas>で描いたグラフィックの上に重ねてもしっかり効く ところ。
ファーストビューに背景動画を設置して、キャッチコピーのテキストを mix-blend-mode で重ねるだけで、とってもオシャレに装飾できます。

IEで同様の見せ方をする場合は、あらかじめIllustratorやAfter Effectsなどでブレンド済みの素材を書き出さざるを得ないため、まず動画背景では使えませんし、セマンティックな面であんまりよろしくない他、レスポンシブデザインで使用するにはかなりの妥協が必要でした。
今後は積極的に使っていきたい筆頭のCSSプロパティです。

CSSで画像フィルター | filter

See the Pen filter by 佐薙 龍二 (@transel) on CodePen.

こちらも画像系のプロパティ。彩度や明度などのほか、ブラーを掛けたり、透明度（opacity）なども変更できます。
例えば、マウスオーバーした時に画像をセピアにしたりぼかしたり等のアクションをとても簡単に実装できます。
また、filter: drop-shadow() はPNGの透過部分にも対応しているので、アイコン的なPNG画像に自然な影を付けることも可能です。

IEで同様の見せ方をするなら<canvas>を使う、2つの画像を重ねてopacityで上の画像をアニメーションで透明に…等、無理矢理なやり方にせざるを得ませんでした。前者は知識と経験がなければかなりの手間ですし、後者はコードが汚く・ムダが多くなりがちです。
画像にちょっとした加工をしたい、という場面は少なくないと思いますので、今後は上手に活用していきたいプロパティです。

CSSだけで自由にクリッピング | clip-path

See the Pen clip-path by 佐薙 龍二 (@transel) on CodePen.

Adobeソフトなどでおなじみのクリッピングを行えます。画像はもちろん、様々な要素に対して使用可能。
IE以外の主要ブラウザに対応していますが、safariではベンダープレフィックス（ -webkit- ）が必要となる点のみ注意しましょう。

円、楕円は専用の値が用意されているほか、polygon() を使ってパスを指定することで自由な形にクリップできます。Clippyというサイトでシミュレーションができ、使う際はとても便利です。
値の指定はパーセンテージだけではなくピクセル指定や calc() 等も使用可能。また path() でSVGのパス定義を用いて形状を指定することもできます。
:hover 等と組み合わせてアニメーションさせることも可能です。

背景をテキストの形でクリッピング | Background-clip: text

See the Pen Background-clip: text by 佐薙 龍二 (@transel) on CodePen.

iPhoneやMacのプロモーションサイトに使用されていて、知っている人も多いハズ。ベンダープレフィックス無しで対応しているのはsafariとFireFoxのみですので、使用する際は -webkit-Background-clip: text の併記をお忘れなく。

テキストの背景に Background-image で画像等を設定して Background-clip: text とすると、テキストの形に背景をクリッピングすることができます。
そのままだとテキストに隠れて背景要素は見えませんが、color: transparent でテキストを透明にすることで、クリップされた背景要素が見えるようになります。

上の例では、テキスト要素と背景要素に同じ画像を重ねて背景要素にブラーをかけ、マウスオーバーするとブラーが消えて背景にテキストが溶け込むようなアニメーションを設定してます。
@keyframe を使用したアニメーションやjavascriptとの組み合わせで様々な表現が可能で、工夫次第でサイトデザインの幅を大きく広げることができます。

CSSでテキストを縁取り | -webkit-text-stroke

See the Pen -webkit-text-stroke by 佐薙 龍二 (@transel) on CodePen.

テキストを縁取りできるプロパティ。使用する際には-webkit- のベンダープレフィックスが必要です。
標準化の予定は無いらしいので使用には注意が必要ですが、今のところIEを除く主要ブラウザはすべて対応しています。
-webkit-text-stroke-width と -webkit-text-stroke-color で個別に指定できます。
シンプルなプロパティですが、それだけに活用の幅は広いです。

簡単な円グラフをCSSで作れる | background: conic-gradient

See the Pen Untitled by 佐薙 龍二 (@transel) on CodePen.

CSS3のグラデーションには線形グラデーションの linear-gradient と放射状グラデーションの radial-gradient がありますが、 conic-gradient は円錐状にグラデーションさせるためのプロパティ。現時点でIEを除く主要ブラウザで完全対応しています。
使い方は radial-gradient 等と似ており、開始角度と位置、カラーを指定してグラデーションを作れます。

当然CSSですので、 @keyframes で他のプロパティと組み合わせれば簡単なアニメーションも実装可能です。リッチなアニメーションは難しいですが、ローディング画面アイコンや背景などで活用できるかもしれません。
また作例のようなシンプルな円グラフであれば <dl> や <table> のマークアップでもそれっぽく装飾することができます。

レイアウト系

background-image での対応はもう不要 | object-fit

See the Pen Untitled by 佐薙 龍二 (@transel) on CodePen.

<img>や<video>のサイズ指定に対して、置換要素、つまり画像や動画をどのように表示させるかを指定できるプロパティ。
CSS3以降のプロパティに対応している方が珍しいopera miniですらもベンダープレフィックス必須とはいえ対応しており、IE以外は主要全ブラウザで完全対応しています。
そのうち実装します的なことは言っていたと記憶していますが、結局未対応のままEOLした模様です。

width height でサイズを指定した親要素に対して、画像を縦横比はそのままでボックスいっぱいに表示させたいとき、IEに対応させる場合は、親要素に背景画像を指定して background-size: cover; とするしかありませんでした。
画像1枚ならそれでも良いですが、画像不定のスライドショー等の要件だとbackground-imageなんて面倒かつ柔軟性も低くて、とてもじゃないですが使ってられません。

また、<video> で背景動画を画面いっぱいに表示させたいようなとき、IE対応を考える場合は min-height min-width を使ってメディアクエリも刻んで…とコードが長くなりがちでしたが、 object-fit を使うなら下記のようなとてもシンプルなコードでレスポンシブ対応・JSも不要な実装が可能です。

html

<video src="exsample.webm" autoplay muted loop></video>

css

video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

テキストのレイアウトが自由になる | CSS Shapes

See the Pen CSS shapes by Transel (@transel) on CodePen.

2014年に策定された比較的新しめの仕様。モダンブラウザで完全対応していますが、safariの完全対応が2016年頃なので、不安なら-webkit-のベンダープレフィックスを併記しましょう。

shape-outside、shape-margin、shape-image-thresholdの3つのプロパティから成ります。どんな事ができるかは、見ての通り。 Illustratorで言う「テキストの回り込み」機能を、CSSで実装できます。

shape-outsideは先に紹介したclip-pathほとんどそのままで、様々な形に回り込ませることができます。
shape-marginはshape-outsideで指定した回り込みラインからどのくらい余白を取るかの指定。
shape-outsideではpngやgif等を使用して、アルファチャンネルから自動で回り込み領域を指定することも可能です。その際は、shape-image-thresholdでシェイプするアルファチャンネルのしきい値を設定できます。（※画像の場合は参照元が同じサーバーである必要があるのでCodepenでは再現できません）

また、Chrome拡張機能のCSS Shapes Editorを使えば、画像をもとに直感的にPolygonシェイプを定義することが出来ます。
詳細は割愛しますが、CSS Shapeを使う際にはめちゃくちゃ便利な拡張機能なので、ぜひ活用してみてください。

超お手軽グリッドレイアウト | display: grid

See the Pen grid by Transel (@transel) on CodePen.

セマンティックなコードを崩すこと無く、比較的自由度の高いレイアウトが組めるCSS Grid。
モダンブラウザの対応は2014年頃ですが策定自体は2007年と、Webの歴史を考えれば比較的古くからあるプロパティなので、ご存じの方も多いのではないでしょうか？
Flexboxでは届かない痒いところに手が届くということで当初は期待されていましたが、案の定と言うべきかIEではバグだらけ（というか仕様バージョンアップしていない）なせいで、クライアントワーク等においては敬遠されがちだった不遇のプロパティです。

HTMLの<table>要素と似ていますが、<table>はあくまで表を用いて記述する際に使用されるべきタグで、装飾目的で使うことはできません。
HTMLのセマンティックを守りつつ、グリッドレイアウトを使用できる のがdisplay: gridの最大の特長と言えるでしょう。

display: flexとの違いは、Flexboxは横or縦の一方向の指定であり、改行することはできますが『行内での縦位置・横位置』のみしか指定できません。対してdisplay: gridは二次元配置で、縦横自由に配置ができることに違いがあります。
Flexboxは一次元方向ですので、例えば 『text-alignやリスト等のmarginは維持しつつ、ラッパー内の全ブロックを中央に配置したい』 というような場面で活用できます。
Grid Layoutは 『画面（ページ）内での全体のレイアウトを変更する』 のが得意です。
どちらが優れているとかではないので、場面によって上手に活用していきましょう。

marginを使わないページレイアウト | gap

See the Pen Untitled by Transel (@transel) on CodePen.

CSS GridやFlexboxで余白を指定できるプロパティ。元々はGridのみでしたが、Flexでも使えるようになりました。
Gridやflexのコンテナ要素に指定することで、アイテムの余白を縦横それぞれ指定できます。個別に指定したい場合はrow-gap、column-gapのプロパティで可能。

IE11が一切対応していなかったため、個別の余白はmarginやpaddingとwidthで計算しながらやるしかありませんでした。
横3列で20pxの余白を取ってアイテムの数は不定だけど左揃えにしてPCでは横4列で…みたいな感じにしようとすると:nth-child(3n)などを組み合わせて計算してメディアクエリのたびに同じセレクタを上書きして…とそれはもう面倒な作業でしたが、gapを使えばアイテムの縦横サイズの指定だけで済むので、コードが非常にスッキリします。
知っているのといないのとではレイアウトの柔軟性がかなり変わってきますので、ぜひ使っていきたいですね。

JS無しでスクロール追従 | position: sticky

See the Pen position: sticky by Transel (@transel) on CodePen.

スクロールに応じて固定表示できるようになるプロパティ。
position: relativeはDOMフロー上の位置を保ち、本来の空間（要素が収まるスペース）をそのまま維持する位置指定、
position: absoluteおよびposition: fixedは絶対位置基準となり本来の空間が取り払われ、あたかもフロートしているかのような位置指定ですが、
position: stickyは 『スクロールで指定の位置に到達するまでは本来のスペースにとどまり、指定の位置を超えたら絶対位置基準で追従する』 という、両者の特性を併せ持った動きをします。

その仕様上、途中から追従してくるようなサイドバーや見出しなどの実装に便利。position: stickyを使わずにこういった動きを再現するのは、JS無しでは不可能でした。

ただし現状でも問題点がいくつかあります。
まず1つめは、position: stickyが指定されている要素がコンテナ内にある唯一の子要素だった場合、うまく機能してくれません。
position: sticky はその仕様上フロートするだけの親要素の高さが必要ですが、他に子要素がいない唯一の要素だと、親要素の高さ＝sticky要素の高さ、となるためフロートしなくなります。

もう1つの問題点として 親も含む先祖要素にoverflowが指定されていると期待通りに動かない事がある という仕様があります。hiddenだけではなく、初期値（visible）を除くあらゆる指定で動かなくなる場合があるので気を付けましょう。
この仕様にはscroll containerが関係していますが、長くなるので割愛。このページなどで詳しく分かりやすく解説されていますので興味がある方はご覧ください。
ただoverflow: autoしただけで動かなくなるのは正直勘弁してほしいのだが

HTMLのみで実装できるシンプルアコーディオン | <details> <summary>

See the Pen details & summary by Transel (@transel) on CodePen.

HTML5から登場したタグ。主要なモダンブラウザですべて使えましたがIEでは使えませんでした。
<details>が 詳細折りたたみ要素 、<summary>は <details>要素の内容の要約やキャプション を表すタグですので、そのままアコーディオンや折りたたみメニュー用のタグと言えるでしょう。

<summary>タグにはクリックすると親の<details>タグを開く機能が最初からついてますので、シンプルなアコーディオンならとても簡素なHTMLだけで超簡単に実装できます。
クリックすると<details>タグにopen属性が付与されるので、CSSではopenの有無で開いているか閉じているかを判別できます。

ただし、アニメーションさせるには少し工夫が必要となります。
<details>タグ自体にtransitionは効きますが、中身の要素には全然効かないので、別途ラッパー要素で囲ってあげないといけません。
それでも閉じる時はどうしても違和感が残るため、リッチな見た目がいい場合は結局普通にJS使うほうが良かったり…

その他

CSSでも変数が使える | CSS variables

See the Pen CSS variables by Transel (@transel) on CodePen.

CSSでも使えるカスタムプロパティ＝変数。IEで使えないのは言わずもがなですが、モダンブラウザで使えるようになったのも2018年前後と割と最近の事だったりします。

SassやScssを使っているとCSS変数なんて要るの？と思われる方もいるかもしれませんが、一番恩恵に預かれるのは どこで変数を定義しても良い という点でしょう。
Sassの場合はあくまでメタ言語であり、変数と言ってもコンパイラ時に利用されるだけの存在です。そのためあらかじめ変数を定義しておかないと使えませんし、グローバル変数をどこかのセレクタ内で再定義して、その後またグローバルで再利用…ということはできません。
CSSのカスタムプロパティなら定義する記述箇所はどこでもいいですし、メディアクエリ内で変更した変数はすべてのメディアクエリで適用されます。

その性質上、レスポンシブデザインの実装時はとても便利です。また、DOM上で定義されている変数ですからJavascriptで呼び出して変更することも当然できます。
うまく使えば大変役に立ちますので、積極的に使っていきたい機能です。

iframe等のアスペクト比維持は今後こっちに移行したい | aspect-ratio

See the Pen aspect-ratio by Transel (@transel) on CodePen.

その名の通り、アスペクト比を指定できるプロパティ。

レスポンシブ対応で付きものなアスペクト比問題。
有名な古いハックとしてラッパー要素の高さを0にしてpadding-topを使ってパーセント指定、というものがありますが、paddingの本来の用途からオーバーホールするやり方ですので、あまりいい方法とは言えません。

このプロパティは、例えばFlexboxで横一列に並べたロゴなど、サイズが違う子要素をアスペクト比を保ったまま並べるのに非常に便利です。
先に紹介したobject-fitと合わせれば、【サイズが違う画像をアスペクト比を維持したまま横最大100px・縦最大50pxの範囲で最も大きくなるサイズで横一列に表示】 …なんていう聞いてて頭が痛くなりそうな指定でもクリアすることができます。

ただし、safariでの対応がver15（2021年10月リリース）とごく最近のため、導入は少し待ったほうが良いかもしれません。数年後には使っていきたいプロパティです。

あとはmacOS対応だけ、数年後には気兼ねなく使える？ | webp webm

webpは画像、webmは動画のオープンソースフォーマットです。
同じ画質のjpgやmp4に比べて容量がとても軽いのが特長で、サイトの高速表示につなげることが可能。サイトの表示が速いことはSEO的にも重要ですので、今後も普及していくものと考えられます。

ただしこちらも、safari（というかApple OS）では対応に難があり、 webpはmacOS 11.0以降、webmに関しては11.3以降でないと対応していません。
またiOSは15にて『実験的に』音声コーデックをサポートした…とか言ってるけど実際は『対応した』と言ってるコーデックの音声ファイルが全然再生できないので、非対応みたいなものです。

とは言え、昨今のWeb事情を見る限りApple側の譲歩も時間の問題でしょうから、これも数年後には気兼ねなく使えるようになっていることでしょう。

終わりに

自分が普段から業務で使っている、知ってるやつだけを書き出したつもりだけど結構あった…
EOL（6/16）の1週間前ぐらいから仕事の合間にゆっくりまとめていたら、いつの間にかEOLから2ヶ月も過ぎちゃいました。

ここでまとめたのはまだほんの触りで、他にもIE以外のモダンブラウザで対応している便利機能・便利仕様はたくさんありますので、興味があるなら調べてみるのも良いかと思います。自身も全部知っているわけではないので…

皆様のWeb制作のお役に立てたなら幸いです。