Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

サイトで古い 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 が使用されているかチェックします。 ただし、その他の廃止されたプロパティがスタイルシートで使用されているかはチェックされません。