IE 2022年6月15日 没
やったぁぁぁああああああああああああぁぁぁあああああああああああああああああああああああああああああああああああああああああああああああああああ！！！！！！！！！
こんにちは。全日本IEを許すな協会会長のDJよろずやです。
長らくフロントエンジニアを困らせていたIE a.k.a. Internet Explorerがサポート終了となりました。
html5・CSS3になり、かなり便利かつ表現の幅が増えたものの、結局IEに対応していないせいで使えないものが多かったですが、本件のおかげで使えるようになりました。
実際コーディング会社ではIE対応は別費用というところもあり、IEのためだけに修正するというのは手間がかかるものでした。
さて、IEが終了したことでどのくらい世の中が便利になるのかというのを今回の記事にしていきたいと思います。
え？今回の雑談前置きはないのかって？
ないです。
それではいっていきましょう。拍手👏。
IEをサポート外にした時に使用できるCSS
IEをサポート外にしたときに使用できるCSSはたくさんありますが、今回はその中で、普段使いたいけどIE対応があるせいで使えなかったものをいくつかピックアップして説明します。
プロパティ
display: contents;
display: contents;を使用すると、このプロパティを記述したdivなどはblockとして認識されなくなります。
つまりgridやflexを使用した場合に、grid-itemやflex-itemにならないため、入れ子を1個省くことができます。
background-clip: text;
background-clip: text;を使用すると、テキストの形で背景画像をマスクすることができます。
line-clamp
line-clampを使用すると、指定した行数分を超えるテキスト量があると自動的に「…」で丸め込みができます。
object-fit
object-fitを使用すると、画像のアス比を維持したままその側のblockの大きさではみ出た分の画像をトリミングします。
position: sticky;
position: sticky;を使用すると、指定した位置に配置しつつ、スクロールに応じて画面外に消えることなく、stickyを指定した要素内でスクロールをします。
position:fixedとの違いとしては、高さを保持しているため、スクロール前では要素の上に乗るようなことがありません。
min(), max(), clamp()
min()関数を使用すると、指定した伸縮率に応じて拡縮しますが、指定した最大値以上には大きくならなくなります。
max()関数を使用すると、指定した伸縮率に応じて拡縮しますが、指定した最小値以下には小さくならなくなります。
clamp()関数を使用すると、指定した伸縮率に応じて拡縮しますが、指定した最小値以下には小さくならず、指定した最大値以上には大きくならなくなります。
疑似クラス
:is()
:is()を使用すると、カッコ内で指定したものと一致した要素をセレクタとして指定できます。
詳細度を0にしたい場合は:where()を替わりに使用します。
:not()
:not()を使用すると、:is()とは逆の挙動のカッコ内で指定したものと一致しない要素をセレクタとして指定できます。
:has() ※firefox未対応
:has()を使用すると、カッコ内で指定したものを子要素として持っている要素をセレクタとして指定できます。
つまり、今まではp > spanのように、pの中にあるspanに対しては指定できましたが、親要素に対して指定することができませんでした。
なので、p:has(span)と記述するとspanを持っているpに対してcssを当てることができるようになります。
おわりに
＼クッソ便利すぎて草／
昔はJSとの併用が必要なものも、今はCSSだけで実装できるようになりました。
例えば、ハンバーガーメニューやアコーディオン、タブ、アニメーションも今はCSSだけで実装できるようになりましたね。
おしゃれなデザインを作る一方、それを作るコーダーが泣きを見ることも少なくはないので、CSSで基本的には実装ができるようになってほしいものです。
それにあたり、まずはこの世のブラウザを1種類だけにするなんていかがでしょうか？
これ以上新しいブラウザが増えないことを祈っています。
See you!!
