Explanation of old CSS flexbox + advice

[gauntface]

Just got flagged for 'Avoids old CSS flexbox' in the latest lighthouse.

One thing that is unclear from the explanation in the '? > Learn More' link is that it's looking for both "display: box" and "display: flexbox".

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.

With that, how should developers using auto-prefixer support this rule? I'm not getting any entries for display: box but I am getting an error ondisplay: -ms-flexbox.

Looking at my browser support list for autoprefixer, I'm not sure how I can prevent this from being printed out, I tried:

  const browserSupport = [
    'last 2 versions',
    'not ie <= 11',
  ];

But it doesn't stop it from being added. What's the right advice for this?

[ebidel]

I think @gauntface hates users. "display: -ms-flexbox" is like 20 bytes to save :p

In all seriousness, we flag prefixes so users know they're sending more CSS down the wire than what they need. The new flexbox has 97% support, including IE11.

What's interesting thought is that you're using "'not ie <= 11'", and the display: -ms-flexbox prefix is still being included. According to caniuse, IE11 doesn't need the prefix. Any ideas on that?

This is also a good example of where caniuse data (#1453) would help users make a decision on whether to "ignore" the audit or not.

[gauntface]

Agree with everything you're saying, but if using a widely used and accepted tool means I can't pass Lighthouse, it feels like there is an extra step of either working with tool vendors to see if there is anything that can be done to fix on their side, or the audit be changed to account for the reality of web development.

[gauntface]

The end result of the autoprefixer config is that it should be:

last 2 versions, not ie <= 10, not ie_mob <= 10

@kaycebasques do you think it would be worth calling this out in the docs on Web Fundamentals?

[markgoho]

Posting here to help anyone that might come from Angular:

Adding the following the package.json file will indeed fix this error.

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

[hexalys]

@ebidel
97% is not accurate worldwide. That number and the autoprefixer both fail to account for the UCBrowser with nearly 10% of the market. As I indicated on the bug referred above by brendankenny: The UCBrowser (or U3 engine) doesn't support the -webkit-flex prefix when using U3. It needs -webkit-box. And the UCMini U2 mode is a Firefox 10ish engine with -moz-box.

Discouraging the use of old flexbox reflects potentially on that 10% user base of the web.

You could explain instead they are potentially sending more CSS down the wire than they may not need, according to the geographic location of their main user base. But saying the 2009 spec of Flexbox is deprecated and should avoided reads as ill advice for devs in India, China or others countries.

And let's not forget that deliberately ignoring 0.1% of worldwide web users means 3.5 million people.

[kaycebasques]

thanks @hexalys I'm adding a "caution" callout to the doc with a link to your comment

[kaycebasques]

The Autoprefixer thing is mentioned in the PR above