如何根据浏览器和平台可靠修改CSS样式类属性？

针对你需要批量修改.browser_chameleon_style类属性、替代不可靠CSS hack的需求，以下是几种精准且稳定的实现方案：

1. JavaScript动态修改样式表规则 #

通过JS精准识别浏览器/平台后，直接修改目标类的CSS规则，无需给单个元素添加类。

实现步骤： #

• 浏览器/平台检测：优先用特征检测（而非仅依赖userAgent）提升可靠性，比如检测特定CSS特性或API支持；
• 定位目标样式规则：遍历页面所有样式表，找到选择器匹配.browser_chameleon_style的规则；
• 修改属性值：直接更新该规则的CSS属性。

代码示例： #

// 检测是否为Safari（基于特征而非userAgent）
function isSafari() {
  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && CSS.supports('-webkit-backdrop-filter', 'blur(1px)');
}

// 检测是否为Windows平台
function isWindows() {
  return navigator.platform.includes('Win');
}

// 修改目标样式类的属性
function updateChameleonStyle() {
  const targetSelector = '.browser_chameleon_style';
  // 遍历所有样式表
  for (const sheet of document.styleSheets) {
    try {
      // 遍历当前样式表的所有规则
      for (const rule of sheet.cssRules) {
        if (rule.selectorText === targetSelector) {
          // 根据浏览器/平台修改属性
          if (isSafari()) {
            rule.style.backgroundColor = '#f0f0f0';
            rule.style.padding = '12px 16px';
          }
          if (isWindows()) {
            rule.style.fontSize = '14px';
          }
        }
      }
    } catch (e) {
      // 跨域样式表会抛出错误，直接跳过
      continue;
    }
  }
}

// 页面加载完成后执行
window.addEventListener('load', updateChameleonStyle);

2. 使用CSS特性查询（@supports）做适配 #

基于浏览器对CSS特性的支持情况编写规则，完全避开不可靠的浏览器hack，符合现代CSS最佳实践。

示例场景： #

针对仅Safari支持的-webkit-backdrop-filter（而不支持标准backdrop-filter的旧版本），修改目标类的属性：

.browser_chameleon_style {
  /* 默认样式 */
  background-color: #fff;
  padding: 10px 14px;
}

/* 仅针对不支持标准backdrop-filter但支持-webkit前缀的浏览器（如旧版Safari） */
@supports (-webkit-backdrop-filter: blur(5px)) and (not (backdrop-filter: blur(5px))) {
  .browser_chameleon_style {
    background-color: rgba(255,255,255,0.8);
    -webkit-backdrop-filter: blur(5px);
  }
}

/* 针对支持CSS逻辑属性的浏览器（如Chrome 87+） */
@supports (padding-block: 10px) {
  .browser_chameleon_style {
    padding-block: 12px;
    padding-inline: 16px;
  }
}

3. 根元素标记+上下文CSS规则 #

通过JS给<html>标签添加浏览器/平台标识类，然后基于上下文选择器批量修改目标类的属性，这种方式直观且易维护。

实现步骤： #

1. JS添加标识类：

function addBrowserPlatformClasses() {
  const html = document.documentElement;
  // 检测浏览器
  if (isSafari()) {
    html.classList.add('browser-safari');
  } else if (navigator.userAgent.includes('Chrome')) {
    html.classList.add('browser-chrome');
  }
  // 检测平台
  if (isWindows()) {
    html.classList.add('platform-windows');
  } else if (navigator.platform.includes('Mac')) {
    html.classList.add('platform-mac');
  }
}

window.addEventListener('DOMContentLoaded', addBrowserPlatformClasses);

2. CSS中编写上下文规则：

.browser_chameleon_style {
  /* 默认样式 */
  color: #333;
}

/* Safari下的样式 */
.browser-safari .browser_chameleon_style {
  color: #555;
  line-height: 1.6;
}

/* Windows平台下的样式 */
.platform-windows .browser_chameleon_style {
  font-family: 'Segoe UI', sans-serif;
}

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