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 規範已棄用,其速度比最新的規範慢 2.3 倍。 請參閱 Flexbox 佈局並不慢瞭解更多信息。

如何通過此審查

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

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

如何實現此審查

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

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