Pale Moon 34.3.0：CSS 现代特性补齐进行时

预计阅读时间：8 分钟

Pale Moon 34.3.0 是一次分量不小的更新——不只是修修补补，而是把几项主流浏览器早已落地的 CSS 现代特性搬进了自己的引擎。对于还在用 Pale Moon 做日常开发或兼容测试的人来说，这些变化直接减少了"这个属性怎么又不生效"的尴尬时刻。

WebGL powerPreference：省电还是拉满，开发者说了算

WebGL 上下文新增了 powerPreference 选项。这个属性让页面在创建 WebGL 上下文时，可以明确告诉浏览器：我需要高性能 GPU，还是优先省电。

<canvas id="gl-canvas" width="800" height="600"></canvas>
<script>
  const canvas = document.getElementById('gl-canvas');
  // 高性能场景：3D 游戏、复杂可视化——请求独立显卡
  const gl = canvas.getContext('webgl', { powerPreference: 'high-performance' });

  // 日常轻量场景：简单图表——优先低功耗，双显卡笔记本会走集成 GPU
  // const gl = canvas.getContext('webgl', { powerPreference: 'low-power' });

  // 默认值，浏览器自行决定
  // const gl = canvas.getContext('webgl', { powerPreference: 'default' });

  if (!gl) {
    console.error('WebGL 不可用');
  } else {
    console.log('WebGL 上下文创建成功，renderer:',
      gl.getParameter(gl.RENDERER));
  }
</script>

实际影响主要在双显卡笔记本上——low-power 能避免不必要的独立显卡唤醒，省电且减少风扇噪音；high-performance 则确保复杂 3D 场景不会意外跑到集成显卡上拖帧。Pale Moon 此前不支持该选项，部分依赖它的页面可能默认走了低性能路径，现在行为与主流浏览器对齐。

CSS lch 色彩空间：比 sRGB 更直觉的选色方式

lch() 是 CIE 色彩空间的一种表达方式——L 是明度（0–100），C 是色度（饱和度），h 是色相角度。相比 hsl()，lch() 的明度轴更接近人眼感知：明度从 20 调到 40，视觉上确实是"均匀变亮"，而不是 hsl 里那种某些色相突然跳变的感觉。

:root {
  /* 用 lch 定义品牌色——明度、饱和度、色相三轴独立可控 */
  --brand: lch(55% 80 280);       /* 中明度、高饱和、蓝紫方向 */
  --brand-light: lch(75% 80 280); /* 只提明度，色相和饱和度不变 */
  --brand-muted: lch(55% 30 280); /* 只降饱和，得到灰调变体 */
}

.button-primary {
  background: var(--brand);
  color: lch(95% 0 0); /* 近白，明度 95、零色度 */
}

.button-primary:hover {
  background: var(--brand-light);
}

在 Pale Moon 34.3.0 之前，这些值会被直接忽略，回退到继承或初始值。现在 lch() 能正确解析并渲染。需要注意的是，这是基础实现——如果后续发现某些边界值（如超宽色域 lch(50% 150 280)）渲染异常，属于预期内的打磨空间。

CSS aspect-ratio：告别"高度塌陷"的笨办法

aspect-ratio 让元素在只设定宽度时自动按比例计算高度。视频容器、头像卡片、响应式图片——这些场景再也不需要 padding-top 百分比 hack 了。

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}

.avatar-card {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

/* 图片加载前占位，加载后自然填充 */
.img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: lch(85% 5 280);
}

<div class="video-wrapper">
  <iframe src="https://example.com/embed" width="100%" height="100%"
          frameborder="0" allowfullscreen></iframe>
</div>

Pale Moon 此版实现了基础部分——即宽度驱动高度的单向计算。如果同时设定宽和高，aspect-ratio 不应覆盖显式值，这一点可以实测验证。

CSS min()、max()、clamp()：响应式排版的三件套

这三个函数让 CSS 值可以在多个候选之间动态选取，是现代响应式排版的核心工具。

:root {
  --fluid-min: 0.875rem;  /* 14px */
  --fluid-max: 1.5rem;    /* 24px */
  --fluid-base: 5vw;
}

body {
  /* 字号在 14px–24px 之间随视口宽度平滑缩放 */
  font-size: clamp(var(--fluid-min), var(--fluid-base), var(--fluid-max));
}

.container {
  /* 容器宽度：最小 320px，最大 1200px，中间取 90vw */
  width: clamp(320px, 90vw, 1200px);
  margin-inline: auto;
}

.sidebar {
  /* 侧边栏宽度：至少 200px，但不超过 30vw */
  width: max(200px, 30vw);
}

以前 Pale Moon 遇到 clamp(14px, 5vw, 24px) 会当作无效值丢弃，字号直接回退到继承。现在这些函数能正确计算，响应式排版终于不用再靠 JS 补偿了。

CSSStyleSheet 构造函数：动态样式表有了正式入口

new CSSStyleSheet() 允许在 JS 中创建独立的样式表对象，再通过 adoptedStyleSheets 挂到 Document 或 Shadow Root 上——不需要往 <head> 里插 <style> 标签。

// 创建可复用的样式表
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  :host {
    display: block;
    padding: lch(55% 80 280);
    border-radius: 8px;
  }
  .title {
    font-size: clamp(1rem, 2vw, 1.5rem);
  }
`);

// Shadow DOM 中使用——不污染全局样式
class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.adoptedStyleSheets = [sheet];
    shadow.innerHTML = '<div class="title"><slot></slot></div>';
  }
}
customElements.define('my-card', MyCard);

这是基础实现，意味着核心路径可用，但边缘情况（如 replace() 的异步返回、嵌套 @layer 等）可能还未完全覆盖。生产环境使用前建议做一轮边界测试。

升级与兼容性检查清单

升级方式：Pale Moon 内置更新器会自动推送；手动下载可在官方站点获取 34.3.0 安装包。
CSS 新特性验证：打开开发者工具（F4 → Inspector），对使用了 lch()、clamp()、aspect-ratio 的元素检查计算值——如果显示为实际数值而非空，说明引擎已生效。
WebGL powerPreference 测试：在双显卡机器上，分别用 high-performance 和 low-power 创建上下文，通过 gl.getParameter(gl.RENDERER) 确认走了哪个 GPU。
回退策略：如果你的站点需要兼容旧版 Pale Moon 或其他不支持这些特性的浏览器，仍应保留回退值：

.card {
  /* 旧浏览器读第一行，新浏览器读第二行并覆盖 */
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

.text {
  font-size: 1rem;
  font-size: clamp(0.875rem, 5vw, 1.5rem);
}

安全修复：34.3.0 同步包含安全更新，建议尽快升级，不要因为"功能够用"停留在旧版。

Pale Moon 的引擎迭代节奏和主流浏览器不同，但这次 34.3.0 批量补齐的 CSS 特性，恰好是近两三年前端开发高频使用的工具。如果你维护的页面有 Pale Moon 用户群，这次升级意味着可以少写不少 hack。