flexboxのgapプロパティで感じたFeature Queriesのイマイチ感

少し前に、Safariがflexboxのgapプロパティに対応したニュースがありました。感動的ですね。

• New WebKit Features in Safari 14.1 | WebKit

今後はガンガンgap使っていきたい！という気持ちなんですが、実際は古いブラウザを使っているユーザーはまだいて、そんなすぐには使えません。

そこで、CSSにはFeature Queriesという便利なものがあることを知りました。それを利用すれば新しいブラウザにはgapプロパティで、古いブラウザにはmarginを使った方法で、というようにCSSを書けるのでは、と思いました。このようなイメージです。

.flex-container {
  display: flex;
}
@supports (gap: 10px) {
  .flex-container  {
    gap: 10px;
  }
}

/* Support for old browsers*/
@supports not (gap: 10px) {
  .flex-item {
    margin-left: 10px;
  }
  .flex-item:first-child {
    margin-left: 0;
  }
}

ですが、結論から言うとだめでした。どうやら、gapというプロパティはGrid Layoutのそれと被るからのようです。 以下のような議論がされているようです。

• [css-conditional] testing support of properties and values with partial implementations · Issue #3559 · w3c/csswg-drafts

Feature Queriesという機能はとても便利だと思ったのですが、プロパティ被りでうまく使えないとなると、思ったよりイマイチです。

以上、誰の役に立つかよくわからない小ネタでした。もし、Feature Queriesこんなところで使ってて便利だよという話があればぜひ教えて下さい。