これは EDOCODE Advent Calendar 2022年12月8日の記事です。
フロントエンドのnakoです。
IE11終了により、今まで使えなかったHTMLやCSSが使えるようになりました。最近業務で使ってみて、ものすごく作業効率が上がったものを（注意点も）まとめてみました。
HTML編
dialog
See the Pen dialog by nn (@nnkk123) on CodePen.
これまでダイアログやモーダルの実装は結構面倒でしたが、dialogを使ってみて実装の簡単さに感動しました。
モーダルを表示する方法としてshow()とshowModal()の2つあり、show()だと透過の背景色が出ずモーダル以外の要素も操作できたり、表示の位置も上下センタにはならないようです。今のところshow()を使うケースはあまりない気がしています。
モーダルの背景色の実装も地味に面倒でしたが、showModal()だと実装不要ですしCSSも::backdrop疑似要素で簡単にカスタマイズできるのも嬉しいポイントでした。
注意点は、dialogはz-indexの調整はできない点でどの要素よりも一番上にくるようです。
以前、固定ヘッダーの下にモーダルの背景色を出してほしいと言われることがあったのですが、そういう場合は使えなさそうです。
details
See the Pen Untitled by nn (@nnkk123) on CodePen.
アコーディオンやトグル機能を実装する場合はJavaScriptかcheckboxを使用していました。checkboxだとJavaScript不要で実装できますが、CSSが複雑になってしまいメンテナンスが大変でした。detailsであれば、CSSは装飾だけでいいので管理もしやすいです。注意点は、開閉のアニメーションを実装しようとするとCSSのtransitonやanimationではうまくいかなかったです（最初だけアニメーションされるが2回目以降はアニメーションされない）。どうしてもアニメーションが必要な場合は、detailsを使わずに、JavaScript（+CSS）で実装したほうがいいかもしれないです。ただ最近はアニメーションしないトグル処理も増えている気もしています。
maxlength minlength
<input type="text" minlength="5" maxlength="10">
IE11ではmaxlengthだと日本語のバグがあったのとminlenghtは非対応でした。両方使えるようになったのでバリデーションが楽になりました。
input type="color"
See the Pen color-picker by nn (@nnkk123) on CodePen.
頻繁に使う機会はないかもしれないですが、たまたま実務で使う機会があり使ってみました。ライブラリなど使わずに一瞬でカラーピッカーが実装できて驚きです。上の例は色の入力欄をlabelで見た目を変えています。注意点はブラウザによってカラーピッカーのUIが全然違うので、問題ないか事前に確認が必要だと思います。
CSS編
accent-color
See the Pen accent-color by nn (@nnkk123) on CodePen.
チェックボックスやラジオボタンのカスタマイズは面倒ですよね。accent-colorを使うと一行で色を変えることができるのでとても簡単に実装できました。 チェックマークの色もaccent-colorの濃淡で自動に白か黒に変わってくれます（Safariは白のみのようです）。
注意点はSafariは15.4からの対応になる点です。
filter: brightness
See the Pen filter: brightness by nn (@nnkk123) on CodePen.
ボタンの色はユーザーが自由に決めれてhoverすると色が濃くなるようなボタンを実装してほしいという要望がありました。薄くだとopactiyで良かったんですが濃くするとなると結構悩みました。色々検討してfilterのbrightnessが一番簡単だったので採用しました。
注意点はボタンのhoverで使用したときにテキストも濃くなってしまう点です。
overscroll-behavior
See the Pen overscroll-behavior by nn (@nnkk123) on CodePen.
スクロールの制御をしてくれるのでHTML編で紹介したdialogと組み合わせがとても相性がいいです。
注意点はSafariは16からの対応になる点です。
まとめ
これらをIE11対応で実装していたら何倍も工数かかっていたと思うので、IEのことを考えずに実装できるのはすごい幸せでした。まだまだキャッチアップできてないものもたくさんあるので実用的なものは取り入れていきたいです。
ただSafariが対応してないものが多い印象なので今後はSafariがネックになってきそうな気がしています。。
現在 EDOCODE では、エンジニア・デザイナー・プロダクトマネジャーを募集しています。
ご興味のある方は、こちらの採用ページも是非ご覧ください。