[Feature] Compat-API should not flag issues if code is in @supports [3]

[molant]

🚀 Feature request

Description

Right now the compat-api for CSS doesn't check if a feature is being featured detected previously via @supports and thus causing false positives.

The hint should be aware of those.

What scenarios will this solve?

Flagging false positives when users run the compat.

[sarvaje]

@webhintio/core I think I need a little bit more explanation here. Do we want to ignore completely the @support block?
If we have a CSS like this, what should the hint check?:

@supports (display: flex) {
    .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

.content {
    background-color: #777;
    color: #000;
    height: 100%;
    width: 100%;
}

p {
    margin: 0;
}

Also, what happen when a browser doesn't support @supports should the hint ignore it?

[molant]

I think the idea is:

• If a browser doesn't support a property:
  • If it supports @supports check if it is in a block that checks for it
  • If it doesn't support @supports, ignore that block entirely

So with your flexbox example and looking into the MDN data:

• IE10 shouldn't show any problem even though it only supports the prefixed version because it doesn't have @supports

A better example will be grid:

• Edge 13+ has @supports
• Edge 16+ has grid, previous versions had only the prefixed version

If someone did something attrocious like:

@supports (display: flex) {
    .content {
        display: grid;
        ...
    }
}

This should be a problem in Edge 15 and lower but not 16.

[sarvaje]

So basically,

if @support is not supported, ignore the entire block.
if @support is supported, analyze what is inside.

right?

[molant]

if @support is supported, analyze what is inside.

More like

if @support is supported, check browser support of the feature and then analyze what's inside

[sarvaje]

if @support is supported, check browser support of the feature and then analyze what's inside

What do you mean with check browser support of the feature?

[molant]

With the following example and for the case of Edge 13:

@supports (display: grid) {
  // ...
}

Edge 13 implements @supports and does not implement grid so the code in the block should be ignored.

Hope it is clearer now.

[sarvaje]

Ahh yes, now it is clearer :)

[sarvaje]

@molant I have a question. What if the CSS contains something like this and we are on Edge 13?:

@support not (display: grid) {
    // ...
}

Should we ignore the @support block or not?

[molant]

Don't think we should ignore it.
Edge 13 has @supports and the condition checks so we should analyze the contents.

[sarvaje]

ok!