CSS 的 feature detection：@support

在「Conditional CSS」這篇裡面在講很多 CSS 條件過濾的方式，裡面看到有 @support 這個規格，可以透過 feature detection 的方式來過濾：「CSS at-rule: @supports: selector()」。

文章作者給的範例是這樣：

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}

在瀏覽器支援 :has(p) 的情況下才指定裡面的 CSS。

翻了一下 @support 在各家瀏覽器上實做的情況：在 Firefox 上是 69 開始支援，推出的日期是 2019/09/03。在 Chrome 上是 83 開始支援，推出的日期是 2020/05/19。在 Safari 上是 14.1 開始支援 (對應到 iOS 版本是 14.5)，推出的日期是 2021/04/26。

從日期可以看出來算是比較新的功能，但主要幾個大的瀏覽器都支援了。

這個讓我想起來早期利用各家瀏覽器的 bug 產生出的各種 hack：「Browser Specific Hacks」。