IEサポートやめます！で使えるようになったもの
去年IEのサポートがきれ、やっとIEを気にせず制作ができるようになりましたね。
でも結局、IE対応が板につきすぎて、便利なプロパティを使い損ねたままコーディングしていませんか・・・？
ということで、「IE対応しなくていいなら、これも使えるよ！」をまとめていきたいと思います！
自分用のメモも兼ねているので、網羅はせず、よく使いそうなものに絞っています。
(逆に「IEだめだったんだ、気にせず切り捨ててた・・・」みたいな要素やプロパティも省いてます。)
IEなしなら使えるcss
改めて知ったので使っていきたいな〜
accent-color, caret-color
accent-colorでフォーム要素(inputなど)の色がまとめて指定できます！
(caret-colorはキャレットのの色)
フォームって、別のシステムが入る場合、デザインのトンマナを完全に合わせらないと思うのですが、
アクセントカラーをコーポレートカラーやサイトカラーに合わせられると大分印象が良さそう。いいですね。
base.cssでフォントカラーなどを指定するときに一緒に指定しておけばOK
background-clip: text
画像やグラデで文字をくり抜く時に使える。
svgとかでなんとかしてたけど、これでできるんだね・・・無知だった。
background-blend-mode
背景色と背景画像のブレンド。
(background-imageやbackground-colorの設定が必要)
ブレンドされた静止画が使える場合はそれでもいいけど、アニメーションとかでも使えるかも。
filterとかwebGLでやる手もあるので、色々手段があるに越したことはないですね。
iフラグ
「大文字と小文字を区別しない」というセレクタ。
地味に使いそうなポイントとしては、「ダウンロードファイル」
ダウンロードできるファイルによってアイコンの種類を変えたりする時に使うかもしれない。
a[href$=".pdf" i]{
conic-gradient()
グラデーションの幅が広がりそう！！
というか、グラデーション以外にも使える。MDNみたら市松模様とか円グラフとか載ってた。
円グラフ+アニメーションが簡単にできるぞ〜
display: contents
HTML(DOMの構造)とcssで揃えたい・まとめたいコンテンツが合ってない時とかに使えそう。
fit-contentプロパティ
文字数で幅変わる & それに合わせた幅のブロック のセンター寄せ！
みたいなデザインのとき(意外と難しい)の救世主。
line-clamp
複数行で末尾の「...」の表示ができる！
今まで擬似要素つかってなんとかしたりしてたけど、これでできるぞ〜
論理プロパティ
margin-inline-endとかmargin-block-startなど
左右にふるレイアウトのデザインだったり、多言語サイト、縦書きが混ざる場合のマージンの設定が楽になりそう。
min(), max(), clamp()
最小値・最大値・推奨値を設定できる。
フォントサイズなど、scssのmixinとかで対応できてはいるのですが、取り入れてもいいかも・・・
rrggbbaa
透明度も16進数で表示できる
justify-content: space-evenly
flexのときの要素の間の設定。つかえそう
justify-content: space-between : 両端による
justify-content: space-around : 各コンテンツに均等にマージンがつく(コンテンツとコンテンツの間 > 端のマージン)
justify-content: space-evenly : 各コンテンツと両端のマージンが同じくらいつく
とてもわかりやすい記事があったので
ビューポート単位（lvh, lvw, svh, svw, dvh, dvw）
スマホの100vh問題これで解決する部分も出てきそう。
こちらもわかりやすい記事をのせときます
IEなしなら使えるもろもろ
画像・フォントも統一した拡張子でかけるの嬉しいですね〜
- apng
- webp
- WOFF 2.0 (.woff2)
polyfillなしでいけるぞ
IEありでも使ってたけど補助的な書き方・polyfillいらなくなったね系
- clip-path
- backdrop-filter
- flexのgap (※safari14でダメっぽい？)
- object-fit, object-position
- position: sticky
- CSS変数（カスタムプロパティ）
- scroll-behavior
- details + summary
- IntersectionObserver
すぐに使えそうなプロパティもあったので、どんどん使っていきたいなと思います！
(使えるようになったばかりのものは実機チェックで気にしつつですが)
参考にさせていただいた記事はこちら。けっこう知らないプロパティも掲載されていて勉強になりました！
Discussion