IE11が終了した喜びを実感できたHTMLとCSS

これは [EDOCODE Advent Calendar](https://adventar.org/calendars/7645 "EDOCODE Advent Calendar") 2022年12月8日の記事です。
フロントエンドのnakoです。

IE11終了により、今まで使えなかったHTMLやCSSが使えるようになりました。最近業務で使ってみて、ものすごく作業効率が上がったものを（注意点も）まとめてみました。

## HTML編
### dialog
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poKdRrL" data-user="nnkk123" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nnkk123/pen/poKdRrL">
  dialog</a> by nn (<a href="https://codepen.io/nnkk123">@nnkk123</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

これまでダイアログやモーダルの実装は結構面倒でしたが、dialogを使ってみて実装の簡単さに感動しました。
モーダルを表示する方法としてshow()とshowModal()の2つあり、show()だと透過の背景色が出ずモーダル以外の要素も操作できたり、表示の位置も上下センタにはならないようです。今のところshow()を使うケースはあまりない気がしています。
モーダルの背景色の実装も地味に面倒でしたが、showModal()だと実装不要ですしCSSも`::backdrop`疑似要素で簡単にカスタマイズできるのも嬉しいポイントでした。

注意点は、dialogはz-indexの調整はできない点でどの要素よりも一番上にくるようです。
以前、固定ヘッダーの下にモーダルの背景色を出してほしいと言われることがあったのですが、そういう場合は使えなさそうです。

### details
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poKVrGV" data-user="nnkk123" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nnkk123/pen/poKVrGV">
  Untitled</a> by nn (<a href="https://codepen.io/nnkk123">@nnkk123</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
アコーディオンやトグル機能を実装する場合はJavaScriptかcheckboxを使用していました。checkboxだとJavaScript不要で実装できますが、CSSが複雑になってしまいメンテナンスが大変でした。detailsであれば、CSSは装飾だけでいいので管理もしやすいです。

注意点は、開閉のアニメーションを実装しようとするとCSSのtransitonやanimationではうまくいかなかったです（最初だけアニメーションされるが2回目以降はアニメーションされない）。どうしてもアニメーションが必要な場合は、`details`を使わずに、JavaScript（+CSS）で実装したほうがいいかもしれないです。ただ最近はアニメーションしないトグル処理も増えている気もしています。

### maxlength minlength
```html
<input type="text" minlength="5" maxlength="10">
```
IE11ではmaxlengthだと日本語のバグがあったのとminlenghtは非対応でした。両方使えるようになったのでバリデーションが楽になりました。

### ****input type="color"****
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExRdpEq" data-user="nnkk123" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nnkk123/pen/ExRdpEq">
  color-picker</a> by nn (<a href="https://codepen.io/nnkk123">@nnkk123</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
頻繁に使う機会はないかもしれないですが、たまたま実務で使う機会があり使ってみました。ライブラリなど使わずに一瞬でカラーピッカーが実装できて驚きです。上の例は色の入力欄をlabelで見た目を変えています。

注意点はブラウザによってカラーピッカーのUIが全然違うので、問題ないか事前に確認が必要だと思います。


## CSS編
### accent-color
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="PoayBzW" data-user="nnkk123" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nnkk123/pen/PoayBzW">
  accent-color</a> by nn (<a href="https://codepen.io/nnkk123">@nnkk123</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

チェックボックスやラジオボタンのカスタマイズは面倒ですよね。accent-colorを使うと一行で色を変えることができるのでとても簡単に実装できました。 チェックマークの色も`accent-color`の濃淡で自動に白か黒に変わってくれます（Safariは白のみのようです）。

注意点はSafariは15.4からの対応になる点です。

### filter: brightness
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="gOKXgrr" data-user="nnkk123" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nnkk123/pen/gOKXgrr">
  filter: brightness</a> by nn (<a href="https://codepen.io/nnkk123">@nnkk123</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ボタンの色はユーザーが自由に決めれてhoverすると色が濃くなるようなボタンを実装してほしいという要望がありました。薄くだとopactiyで良かったんですが濃くするとなると結構悩みました。色々検討してfilterのbrightnessが一番簡単だったので採用しました。

注意点はボタンのhoverで使用したときにテキストも濃くなってしまう点です。

### overscroll-behavior
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="NWzaBOM" data-user="nnkk123" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nnkk123/pen/NWzaBOM">
  overscroll-behavior</a> by nn (<a href="https://codepen.io/nnkk123">@nnkk123</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

スクロールの制御をしてくれるのでHTML編で紹介したdialogと組み合わせがとても相性がいいです。

注意点はSafariは16からの対応になる点です。

## まとめ
これらをIE11対応で実装していたら何倍も工数かかっていたと思うので、IEのことを考えずに実装できるのはすごい幸せでした。まだまだキャッチアップできてないものもたくさんあるので実用的なものは取り入れていきたいです。
ただSafariが対応してないものが多い印象なので今後はSafariがネックになってきそうな気がしています。。

現在 EDOCODE では、エンジニア・デザイナー・プロダクトマネジャーを募集しています。
ご興味のある方は、こちらの[採用ページ](https://go.edocode.co.jp/jobs "採用ページ")も是非ご覧ください。