この記事はNikkei Advent Calendar 2020 19日目の記事です。 日経電子版ウェブチームの伊藤です。 この記事では CSS Containment の紹介と電子版での利用例について書きます。 CSS Containment とは 概要 CSS Containment はDOMのレンダリングを開発者側で調整できるようにするパフォーマンス系のプロパティです。 webサイトが効率的にレンダリングされるようユーザーエージェントに伝えることができます。 次のような値を取ります。 contain: none | strict | content | [ size || layout || paint ] プリミティブな値として size, layout, paint があり、strict と content はこれらを複合した値のエイリアスで、それぞれ size layout p
![CSS Containment によるパフォーマンス改善 — HACK The Nikkei](https://cdn-ak-scissors.b.st-hatena.com/image/square/fcf6eb474a6ea1d6ff42e04e973effefd2066b24/height=288;version=1;width=512/https%3A%2F%2Fhack.nikkei.com%2Fimages%2Fadvent20201219%2Ftop_page_containment_area.jpg)