Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Avoids Old CSS Flexbox


The old, 2009 specification for Flexbox is deprecated and is 2.3x slower than the latest specification. See Flexbox Layout Isn't Slow to learn more.


Under URLs, Lighthouse lists every instance of display: box that it found on your page's stylesheets. Replace every instance with the new syntax, display: flex.

If a stylesheet is using display: box, then it may be using other deprecated Flexbox properties. In short, every property that begins with box, such as box-flex, is deprecated and should be replaced. See CSS Flexbox 2009/2011 Spec Syntax Property Mapping to see exactly how the old properties map to the new ones.

Lighthouse also flags vendor prefix values, such as display: -ms-flexbox. Lighthouse flags these so that you know that you're sending more bytes in your CSS than needed. If you're using Autoprefixer, you can prevent it from printing out vendor prefixes by adding the following rule to your package.json config:

"browserslist": [
  "last 2 versions",
  "not ie <= 10",
  "not ie_mob <= 10"

More information

Lighthouse collects all of the stylesheets used on the page and checks if any of them uses display: box. Lighthouse does not check if the stylesheets use any other deprecated properties.


Was this page helpful?