IEのサポート終了で、ちょっとCSSが楽に。vol.2

前回の続きです。

IEを除外することができれば、いろいろCSSが便利になります。

１．overscroll-behavior

スクロールチェーンを防止することができます。

ハンバーガーメニューでスクロールが行き着くとバックにあるコンテンツ部分がスクロールするアレを抑制できます。

メニュー部分がスクロールしないと、効果がないのが残念です。

２．line-clamp

記事の一覧表示なので、文章の表示の行数制限が可能になります。

３．object-fit

coverは画像の表示領域に関係なく比率をたもったまま描画してくれるので便利です。

4．place-items

いままではflexで３行でしたが、gridと上記のcenterを合わせると２行でいけます。

５．details & summary

これは、よくある質問などクリックで回答を表示させるようなものをjsを使わずに実装できます。

他にもいろいろありますので、よく使うものを紹介していきたいと思います。