ブラウザ条件によるCSSの記述方法について

Question

cssで以下の記述があるのですが、記述が重複しています。
「firefox or Edge」と条件をつける場合どのように記述すれば可能でしょうか？

/* Firefox */
@-moz-document url-prefix() {
    .sample {
        background-color: blue;
    }
}

/* Edge */
@supports (-ms-ime-align: auto) {
	.sample {
        background-color: blue;
    }
}

Answer 1

条件付きグループ規則を or でつなぐことはできないので、代わりに @supports でまとめてみたらどうでしょうか？(Edgeで動作確認していません。)

@supports ((-moz-user-select: -moz-none) or (-ms-ime-align: auto)) {
    .sample {
        background-color: blue;
    }
}

https://triple-underscore.github.io/css-conditional-ja.html

なお、@-moz-document url-prefix() は削除予定となっているので注意してください。
https://www.fxsitecompat.dev/ja/docs/2018/moz-document-url-prefix-css-hack-will-no-longer-work/

Comments

[yookoko]

回答ありがとうございます。firefoxのハックの削除予定は知りませんでした。重要な指摘ありがとうございます。

Answer 2

@-moz-document url-prefix() , @supports (-ms-ime-align: auto) {
  .sample {
    background-color: blue;
  }
}

じゃダメなんでしょうか？