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

網站不使用舊版 CSS Flexbox

爲什麼說此審查非常重要

2009 年的舊 Flexbox 規範已棄用,其速度比最新的規範慢 2.3 倍。 請參閱 Flexbox 佈局並不慢瞭解更多信息。

如何通過此審查

URLs 下,Lighthouse 列出了它在頁面樣式表中找到的 display: box 的每個實例。 將每個實例替換爲新語法,display: flex

如果樣式表當前在使用 display: box,則它可能在使用其他已棄用的 Flexbox 屬性。 簡言之,以 box 開頭的每個屬性(如 box-flex)已棄用並且應予以替換。 請參閱 CSS Flexbox 2009/2011 規範語法屬性對應關係以準確瞭解舊版屬性與新版屬性的對應關係。

如何實現此審查

本部分介紹如何實現此審查,以便您可以瞭解計算此審查得分的方式。

Lighthouse 收集頁面上使用的所有樣式表,並檢查否有任何樣式表使用 display: box。 Lighthouse 不會檢查樣式表是否使用任何其他已棄用的屬性。