IEのサポート終了してからのCSS事情

こんにちは、かずです。

8月8日は世界猫の日だったそうです。
23時50分前後に知って何もできませんでした・・・

はい、というわけで今日はIEのサポートが終了したので
使い始めたCSSをいくつかご紹介します。

clip-path

便利ですねー。
普通に要素を丸くするだけなら「border-radius」と「overflow:hidden」で事足りますが、できない形も多々あったのですごく助かっています。
（すぐに例が出てきませんが・・・）

種類が色々あり、覚えるのも至難の業なので、下記サイトをぐりぐりしながら使ってます。これもまた便利。

filter

グレースケールやぼかし効果につかえます。
ただ、自分的にかなり便利と思ったのが、「filter: drop-shadow」です。

「box-shadow」では、要素のフチに影をつけるのが限界でしたが、こちらはpngやsvgの形に沿って影をおとせるスグレモノ。
参考にアプリコットデザインのロゴを以下に。

こちらがbox-shadow

こちらがdrop-shadow

もう画像書き出し時に影をつけるかどうかなんて迷わないですね！

object-fit

続いてこちら。コンテナの大きさに合わせて画像をトリミングしてくれます。
ただ、jsライブラリを使ってIEも対応できていたので、js使わなくなって楽になったなーくらい・・・

そして最後にイチオシのこちら！！

line-clamp

テキスト省略はこれまで「text-overflow: ellipsis」を使って1行で省略するか
phpで「mb_strlen()」で数えて、「mb_substr()」で制限付けて・・・みたいに面倒でしたが
このline-clampを使うことでもう全部解決！

下記テキストを省略していきます。※長くてすみません

2行指定

3行指定

はい好き。便利すぎない・・・？

といくつかご紹介させていただきました。
他にもたくさん便利なCSSが制限なしに使えるようになりましたが
実務で割と頻繁に使うものになります。

正直、Can I use…を見る機会が減ったのが何よりも時短になっている気がします。

それはさておきこれからもこんな使い方も出来る！みたいなものがあればどんどん紹介していこうと思います！

それでは。