CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証 | フロントエンドBlog | ミツエーリンクス

containプロパティにstyleやsizeを指定した場合に、どうレンダリングされるかをご紹介します。 CSS Containmentの概要については「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」をご確認ください。 タイトルを「レンダリングパフォーマンスをアップする」としていますが、今回ご紹介するstyleとsizeはパフォーマンスを向上するものというよりは、包含ブロックの内外でスタイルの計算やサイズの計算を分けることを目的としています。 styleの検証 contain: style;の設定の有無によるcounter()のカウントの違いからStyleの封じ込めを検証します。 containプロパティの設定がない場合 containプロパティの設定がないブロックを2つ用意します。 ブロックをまたいでそれぞれのブロック内の要素をカウントす