如何在Safari浏览器中禁用部分CSS属性并设置专属样式

首先先修正原有代码的基础问题：

• 原代码存在3处书写错误，会导致样式完全不生效：
  • HTML中div的类名为disClass，CSS选择器误写为. divClass，不仅类名不匹配，选择器内还多了无效空格
  • CSS的background-color属性值不需要加单引号，直接写颜色关键字/色值即可
  • CSS不支持//格式的单行注释，必须使用/* 注释内容 */的格式

纯CSS实现Safari专属样式是最稳妥的方案，不需要写JS判断，不会出现样式闪烁，也不会误判iOS上的第三方浏览器。核心原理是利用只有Safari能识别的CSS特性做条件判断，其他浏览器会直接忽略不识别的样式块。

完整代码 #

HTML部分保持原有结构即可：

<div class="disClass">Example div</div>

CSS部分写法如下：

.disClass {
  width: 50px;
  height: 50px;
  /* 非Safari环境生效的红色背景 */
  background-color: red;
}

/* 仅Safari能识别的条件判断，覆盖原有背景色 */
@supports (background: -webkit-named-image(i)) {
  .disClass {
    background-color: blue;
  }
}

兼容说明 #

• 上述写法兼容Safari 11及以上的所有桌面端、移动端Safari，Chrome、Firefox、Edge等其他浏览器会完全忽略@supports块内的样式，保持原有红色背景
• 如果需要兼容Safari 10及更早的老旧版本，可以补充以下兜底样式，不会对其他浏览器产生影响：

/* 旧版Safari兜底 */
@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
  @media {
    .disClass {
      background-color: blue;
    }
  }
}

不建议通过JS读取navigator.userAgent判断Safari：一是UA字符串可被用户篡改，判断准确率低；二是iOS系统要求所有第三方浏览器（包括iOS端Chrome、Firefox）必须使用Safari内核渲染，UA嗅探很容易把这部分浏览器误判为Safari，不符合需求。

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