检测Safari浏览器以切换CSS的display:flex/block属性

问题背景 #

本人对编码和CSS不太熟悉，之前用ChatGPT生成的代码能实现根据浏览器切换CSS属性，但在Safari 16.5版本后失效。现在需要实现：检测到Safari浏览器时，将页面中#webtest元素的display设为block；其他浏览器保持display:flex。

出现该需求的原因是Safari的flex布局表现异常，执行搜索操作后页面元素会出现挤压问题。此前尝试过Java、PHP方案，均无效果，愿意支付25美元Paypal报酬寻求可行方案。

当前使用的失效代码 #

/* Styles for the 'webtest' ID in non-Opera and non-Safari browsers */
#webtest {
  display: flex;
  justify-content: center;
  /* Additional styles */
}

/* Exclude display: flex; for Opera and Safari */
@media not all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm),
       not all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #webtest {
    display: block;
    /* Additional styles for Opera and Safari */
  }
}

可行解决方案 #

方案1：CSS @supports 精准匹配Safari #

新版本Safari对旧媒体查询规则的支持有变化，可通过@supports结合Safari特有CSS属性精准识别：

#webtest {
  display: flex;
  justify-content: center;
  /* 其他通用样式 */
}

/* 仅匹配Safari浏览器 */
@supports (-webkit-hyphens:none) and (not (hyphens:none)) {
  #webtest {
    display: block;
    /* Safari专属样式 */
  }
}

原理：Safari支持私有前缀的-webkit-hyphens但不支持标准hyphens属性，通过该组合可精准区分Safari与其他WebKit内核浏览器（如Chrome）。

方案2：JavaScript检测并添加专属类名 #

若CSS方案仍有问题，可通过JS检测Safari后给目标元素添加类名，再通过CSS匹配：

// 检测Safari浏览器
function isSafari() {
  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}

// 给#webtest添加safari类
if (isSafari()) {
  document.getElementById('webtest').classList.add('safari');
}

对应CSS设置：

#webtest {
  display: flex;
  justify-content: center;
  /* 其他通用样式 */
}

#webtest.safari {
  display: block;
  /* Safari专属样式 */
}

该方法兼容性更强，不受CSS规则变更影响。

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