CSSにおける@supportsの書き方

初めてCSSの@supportsに触れているのですが、これで対応方法があっているのかわからず、心配です。

どなたかお詳しい方の知恵をお借りしたいです。

条件分岐したいこと

「display: grid;が使える　かつ　position: sticky;が使える場合」
「display: grid;が使えない　または　position: sticky;が使えない場合」

以上の２つで場合分けしたいです。

自分のコード

@supports (display: grid) and ((position: sticky) or (position: -webkit-sticky)) {
/* 「`display: grid;`が使える　かつ　`position: sticky;`が使える場合」 */
}

@supports (not (display: grid)) or ((not (position: sticky)) and (not (position: -webkit-sticky))) {
/* 「`display: grid;`が使えない　または　`position: sticky;`が使えない場合」 */
}

上記のように、@supports内でorやandを、notと組み合わせて複数条件をかけられるのか、よくわからず。。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

grid	sticky	css
o	o	普通
o	x	特別
x	o	特別
x	x	特別

ということでしょうか，
であれば，それで良いと思います

あと，2つ目はこうやって，まとめてnotしたほうが分かりやすいと思います

css
1.hero{
2  position: sticky;
3}
4@supports not ( (display: grid) and ((position: sticky) or (position: -webkit-sticky)) ){
5  .hero{
6    position: fixed;
7  }
8}

ただ，相変わらずIEが@supportsとstickyの両方に対応してないようなので，
IE向けを先に書かないといけないのは注意ですね

https://caniuse.com/#search=supports

https://caniuse.com/#search=sticky

こっちが無難です

css
1.hero{
2  position: fixed;
3}
4@supports (display: grid) and ((position: sticky) or (position: -webkit-sticky)){
5  .hero{
6    position: sticky;
7  }
8}