How was chromestatus.com able to pass 'Using modern CSS features' in Lighthouse?

[Darin Hensley]

I am new to Lighthouse.... which I think is a ultra cool tool. My Polymer site gets a red X for 'Avoids old CSS flexbox '. I think it is complaining about all the attributes that contain ' display: -ms-flexbox;'. I see chromestatus.com passes and gets a green check for  'Avoids old CSS flexbox '. this Since this comes from Polymer Iron Flex Code Base, how was chromestatus.com able to pass this test? 

[Eric Bidelman]

Didn't drill in too much, but I think it's b/c chromestatus either doesn't not use those attribute/classes or never applies them. If it's the former, they should really be vulcanized out of the build.

Can you provide the link for your site so I can verify the audit isn't buggy?

On Thu, Mar 2, 2017 at 8:36 PM Darin Hensley <darin....@gmail.com> wrote:

I am new to Lighthouse.... which I think is a ultra cool tool. My Polymer site gets a red X for 'Avoids old CSS flexbox '. I think it is complaining about all the attributes that contain ' display: -ms-flexbox;'. I see chromestatus.com passes and gets a green check for  'Avoids old CSS flexbox '. this Since this comes from Polymer Iron Flex Code Base, how was chromestatus.com able to pass this test? 

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/bc6d8579-a121-4e4a-8376-28b2d77806b1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Darin Hensley]

My app is still in it's infancy stage right now... nothing hosted yet.

Here is the JSON output if it helps:

  "no-old-flexbox": {

      "score": false,

      "displayValue": "",

      "rawValue": false,

      "extendedInfo": {

        "formatter": "table",

        "value": {

          "results": [

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 90,

              "pre": ".input-content {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ".layout.horizontal,.layout.vertical {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 196,

              "pre": "paper-radio-group {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ".layout.horizontal,.layout.vertical {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 214,

              "pre": ".drawer-list a {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ".layout.horizontal,.layout.vertical {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 218,

              "pre": ".v-center {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ".layout.horizontal,.layout.vertical {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "22:43",

              "startLine": 183,

              "pre": ":host {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 90,

              "pre": ".input-content {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ".layout.horizontal,.layout.vertical {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "20:41",

              "startLine": 184,

              "pre": ":host {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 214,

              "pre": ".v-center {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ".layout.horizontal,.layout.vertical {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ":host {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ".layout.horizontal,.layout.vertical {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 1,

              "pre": ".layout.horizontal,.layout.vertical {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 34,

              "pre": ":host([fullbleed]) {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 48,

              "pre": ":host([fullbleed]) > #contentContainer {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 90,

              "pre": ".input-content {\n  display: -ms-flexbox;\n}"

            },

            {

              "url": "inline",

              "location": "2:23",

              "startLine": 52,

              "pre": ":host {\n  display: -ms-flexbox;\n}"

            }

          ],

          "tableHeadings": {

            "url": "URL",

            "startLine": "Line in the stylesheet / <style>",

            "location": "Column start/end",

            "pre": "Snippet"

          }

        }

      },

      "name": "no-old-flexbox",

      "category": "CSS",

      "description": "Avoids old CSS flexbox",

      "helpText": "The 2009 spec of Flexbox is deprecated and is 2.3x slower than the latest spec. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox)."

    },

Sometimes I will use inline like class="horizontal layout center" and sometimes I will use mixins in that app. 

Thank you,

-Darin