The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

サイトで古い CSS Flexbox を使用しない

監査が重要である理由

2009 年の旧仕様の Flexbox はサポートを終了しました。この旧仕様の Flexbox は最新版と比較すると 2.3 倍の処理時間を要します。 詳細については、Flexbox Layout Isn't Slow をご覧ください。

監査に合格する方法

Lighthouse のレポートでは、ページのスタイルシートで検出された display: box のインスタンスが URLs の下に一覧表示されます。 すべてのインスタンスを新しい構文 display: flex で置き換えてください。

スタイルシートで display: box を使用している場合は、廃止された他の Flexbox プロパティが使用されている可能性があります。つまり、box-flex のような box で始まるプロパティは、すべてサポートが終了しているため、置換する必要があります。 古いプロパティと新しいプロパティの対応関係については、CSS Flexbox 2009/2011 仕様の構文属性マッピング をご覧ください。

監査方法

このセクションでは Lighthouse による監査方法と監査スコアの算出方法を説明します。

Lighthouse では、ページで使用されているすべてのスタイルシートにおいて、display: box が使用されているかチェックします。 ただし、その他の廃止されたプロパティがスタイルシートで使用されているかはチェックされません。