如何通过CSS媒体查询仅适配Safari浏览器≤15.x.x版本？

要仅对版本≤15.x.x的Safari浏览器应用修复样式，可以通过内核检测+特性排除的组合写法实现精准匹配，具体代码如下：

/* 仅作用于Safari 15及以下版本 */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) and not (color: color(display-p3 1 1 1)) {
    /* 替换成你需要修复的元素和样式 */
    .align-fix-element {
      margin-right: 3px;
      vertical-align: middle;
    }
  }
}

写法逻辑： #

1. not all and (min-resolution:.001dpcm)：筛选出WebKit内核浏览器，排除Firefox、Chrome等非WebKit内核的浏览器。
2. @supports (-webkit-appearance:none)：进一步锁定Safari浏览器（部分其他WebKit内核浏览器不支持该私有属性）。
3. not (color: color(display-p3 1 1 1))：排除Safari 16及以上版本——因为color(display-p3)是Safari 16才新增支持的CSS特性，不支持该特性的就是≤15.x.x的版本。

你之前的查询只做了WebKit内核检测，没有版本范围限制，所以会命中所有Safari版本。用上面的组合写法就能精准定位到需要修复的旧版Safari。

内容的提问来源于stack exchange，提问作者sai cherry