能否在浏览器解析CSS前修改其内容？探索可行实现方案

目前CSS变量确实无法直接在媒体查询中使用，env()函数仍处于草案阶段。以下是几种浏览器端的替代方案，可替代.htaccess + PHP的后端处理方式：

1. 动态获取并替换CSS内容（JS前置处理） #

通过JavaScript在浏览器解析原始CSS前，获取CSS文本并替换变量，再将处理后的CSS插入页面：

• 实现步骤：
  • 在页面<head>最顶部同步执行JS（避免原始CSS先被解析）
  • 用fetch获取目标CSS文件内容
  • 替换内容中的变量（比如把var(--size-lg)替换为64rem）
  • 创建<style>元素，将处理后的CSS写入并插入<head>
• 示例代码：

// 放在<head>最顶部，同步执行
(async function() {
  const cssResponse = await fetch('/your-styles.css');
  let cssText = await cssResponse.text();
  // 定义变量映射
  const variables = {
    '--size-lg': '64rem',
    '--size-md': '48rem'
  };
  // 替换所有匹配的变量
  Object.entries(variables).forEach(([varName, value]) => {
    cssText = cssText.replace(new RegExp(`var\\(${varName}\\)`, 'g'), value);
  });
  // 创建style元素插入head
  const styleEl = document.createElement('style');
  styleEl.textContent = cssText;
  document.head.insertBefore(styleEl, document.head.firstChild);
})();

• 注意：需处理加载顺序，避免出现无样式内容闪烁（FOUC），同步JS可能会阻塞页面渲染，可根据实际需求调整为预加载逻辑。

2. 客户端CSS预编译（如PostCSS） #

使用PostCSS等工具在浏览器中实时编译包含变量的CSS，自动替换媒体查询中的变量：

• 实现步骤：
  • 引入PostCSS及相关插件（如postcss-custom-properties）
  • 获取原始CSS文本，通过PostCSS处理后插入页面
• 示例代码：

import postcss from 'postcss';
import customProps from 'postcss-custom-properties';

async function processCSS() {
  const cssText = await fetch('/your-styles.css').then(res => res.text());
  const result = await postcss([customProps({
    preserve: false,
    variables: {
      '--size-lg': '64rem'
    }
  })]).process(cssText);
  const styleEl = document.createElement('style');
  styleEl.textContent = result.css;
  document.head.appendChild(styleEl);
}
processCSS();

• 注意：客户端编译会带来额外性能开销，更适合开发环境，生产环境建议后端预编译。

3. 使用CSS自定义媒体查询（原生方案） #

如果不需要动态修改变量值，可使用CSS原生的@custom-media定义复用的媒体查询规则，实现类似变量的效果：

• 示例代码：

/* 定义自定义媒体查询 */
@custom-media --size-lg (min-width: 64rem);

/* 使用自定义媒体查询 */
@media (--size-lg) {
  .container {
    max-width: 1200px;
  }
}

• 说明：该方案无需JS，兼容性较好（除Safari 15.4之前的版本），但变量值无法动态修改，适合静态复用场景。

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