@supportsの使いどころ。Internet Explorerでの利用も可能!

@supportsとは指定したcssプロパティー(プロパティー:値)にブラウザーが対応している場合と未対応の場合とでスタイルを分けてcssを記述していけます。
イメージとしてはJavaScriptの「Modernizr」的なものをcssのみで実現してくれる感じなのですが、一番使うことが多そうなInternet Explorerには未対応のため使用するのに少し躊躇(ちゅうちょ)する感じです。

そもそも@supportsを使う必要があるか?

そもそもですが、本当に@supportsを使う必要があるかを考えたほうがいいかと思います。
本来、ブラウザーでサポートされていないcssを利用する場合は

1
// 良い例
2
.element {
3
    width: 100%;
4
    width: 100vw; // 未対応の場合は無視される
5
}

のように記述すれば、使用可能であればブラウザーが自動で判別して上書きしてくれます。
わざわざ、

1
// 悪い例
2
.element {
3
    @supports (width: 100vw) {
4
        width: 100vw;
5
    }
6
    @supports not (width: 100vw) {
7
        width: 100%;
8
    }
9
}

なんて記述する必要はありません。私の経験からいうというと複雑なコードになった場合は一度考え直したほうがいいと思います。

@supportsを使わない方法を考える

上記の「良い例」の記述が理想で、必要がある場合のみ@supportsを利用してスタイルを分けて書くという考えベストかと思います。
俗に言う「プログレッシブエンハンスメント」というやつです。

使用するプロパティーの@mixinを準備

Flex Box – display: flex;

対応ブラウザー(IE) IE8+

※ベンダープレフィックスは省略

1
// Flexbox
2
@mixin support-flexbox {
3
    @at-root {
4
        @supports (display: flex) {
5
            #{&} {
6
                @content;
7
            }
8
        }
9
        // IE10以上
10
        _:-ms-lang(x), #{&} {
11
            @content;
12
        }
13
    }
14
}
15
@mixin not-support-flexbox {
16
    @at-root {
17
        @supports not (display: flex) {
18
            #{&} {
19
                @content;
20
            }
21
        }
22
        // IE9
23
        @media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
24
            #{&} {
25
                @content;
26
            }
27
        }
28
        // IE8
29
        @media \0screen {
30
            #{&} {
31
                @content;
32
            }
33
        }
34
    }
35
}
36
// 使い方
37
@include support-flexbox {
38
    display: flex;
39
}
40
@include not-support-flexbox {
41
    display: block;
42
}

Grid layout display: grid;

対応ブラウザー(IE) IE8+

※ベンダープレフィックスは省略

1
// Grid Layout
2
@mixin support-grid {
3
    @at-root {
4
        @supports (display: grid) {
5
            #{&} {
6
                @content;
7
            }
8
        }
9
        // IE10以上
10
        _:-ms-lang(x), #{&} {
11
            @content;
12
        }
13
    }
14
}
15
@mixin not-support-grid {
16
    @at-root {
17
        @supports not (display: grid) {
18
            #{&} {
19
                @content;
20
            }
21
        }
22
        // IE9
23
        @media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
24
            #{&} {
25
                @content;
26
            }
27
        }
28
        // IE8
29
        @media \0screen {
30
            #{&} {
31
                @content;
32
            }
33
        }
34
    }
35
}
36
// 使い方
37
@include support-grid {
38
    display: grid;
39
}
40
@include not-support-grid {
41
    display: block;
42
}

Calculate Width width: calc(100% – 100px);

対応ブラウザー(IE) IE8+

※ベンダープレフィックスは省略

1
// Calculate Width
2
@mixin support-calc {
3
    @at-root {
4
        @supports (width: calc(100% - 1vw)) {
5
            #{&} {
6
                @content;
7
            }
8
        }
9
        // IE10以上
10
        _:-ms-lang(x), #{&} {
11
            @content;
12
        }
13
        // IE9
14
        @media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
15
            #{&} {
16
                @content;
17
            }
18
        }
19
    }
20
}
21
@mixin not-support-calc {
22
    @at-root {
23
        @supports not (width: calc(100% - 1vw)) {
24
            #{&} {
25
                @content;
26
            }
27
        }
28
        // IE8
29
        @media \0screen {
30
            #{&} {
31
                @content;
32
            }
33
        }
34
    }
35
}
36
// 使い方
37
@include support-calc {
38
    width: calc(100% - 1vw);
39
}
40
@include not-support-calc {
41
    width: 99%;
42
}

Media Crop object-fit: fill;

対応ブラウザー(IE) 未対応

※ベンダープレフィックスは省略

1
// Media Crop
2
@mixin support-object-fit {
3
    @at-root {
4
        @supports (object-fit: fill) {
5
            #{&} {
6
                @content;
7
            }
8
        }
9
    }
10
}
11
@mixin not-support-object-fit {
12
    @at-root {
13
        @supports not (object-fit: fill) {
14
            #{&} {
15
                @content;
16
            }
17
        }
18
    }
19
}
20
// 使い方
21
@include support-object-fit {
22
    object-fit: fill;
23
}
24
@include not-support-object-fit {
25
    overflow: hidden;
26
}

@supportsの使いどころ

Media Crop object-fit: fill;

※ベンダープレフィックスは省略

1
// html
2
<div class="thumb-wrapper">
3
    <img class="thumb" src="" width="400" height="300" alt="">
4
</div>
5

6
// sass
7
.thumb-wrapper {
8
    overflow: hidden;
9
    width: 100%;
10
    img.thumb {
11
        wwidth: 100%;
12
        height: auto;
13
    }
14
    @include support-object-fit {
15
        img.thumb {
16
            object-fit: cover;
17
        }
18
    }
19
    @include not-support-object-fit {
20
        padding-bottom: 75%;
21
        img.thumb {
22
            position: absolute;
23
            left: 0;
24
            top: 0;
25
        }
26
    }
27
}