Chrome内核浏览器的CSS兼容性

本页面内容使用 AI 辅助编写
以下内容的参考信息可能来自于：网络、群聊记录和AI搜索，并在编辑时使用 AI 进行整理或辅助编写。
如果对于内容有任何疑问，请在评论区留言或加入tools讨论群（717421103）交流。

×

当前主流浏览器的渲染引擎主要分为三种：

• Blink：用于 Chromium 系浏览器，包括 Chrome、Edge、Opera、Brave，以及众多国产浏览器（如 QQ、360、搜狗、夸克等）和各类应用内置浏览器（如 B站 APP、微信、QQ 等）。
• WebKit：用于 Safari 浏览器，以及在苹果设备上的其他浏览器（欧盟以外地区）。
• Gecko：用于 Firefox浏览器。

本文主要讨论 Chromium 系浏览器 的 CSS 兼容性问题，因为其在 BWiki 访问量中占比超过80%。Safari 常见兼容性问题需要未来单独开页面进行说明。Firefox 在 BWiki 用户占比较低，且多数用户可更新至较新版本，因此本文不做详细展开。

由于 Chromium 系浏览器共享同一渲染引擎（Blink），它们对 CSS 的支持能力基本取决于其底层 Chromium 版本，而非浏览器自身的版本号。例如某国产浏览器标称"v15.0"，实际内核可能是 Chrome 108。因此,本文统一以 Chrome 版本号作为参照。

可以通过访问 chrome://version 或检查浏览器 User-Agent 字符串中的 Chrome/xxx 字段来确认实际内核版本，UA查询工具：Widget:ShowUA。

版本分布

根据BWiki几个站点的访问统计估算，BWiki用户中使用 Chromium 内核的版本占比如下（由于统计涉及的站点少，数据仅供参考）。

版本范围	访问占比
v140+	59.5%
v130+	76.6%
v125+	78.2%
v120+	82.4%
v110+	93.3%
v105+	96.4%
v100+	98.2%
v95+	99.1%

其中，版本 140+ 占比 59.5%的含义是：在所有 Chromium 系浏览器的访问中，有 59.5% 的访问使用了版本号 ≥ 140 的浏览器。

在所有访问中，Chromium系浏览器的访问量占比约 82% ，苹果设备浏览器占比约 15%， Firefox 占比约2%。

CSS 兼容性的基本原理

浏览器处理无法识别的 CSS 时，遵循一条核心规则：静默忽略。这意味着：

• 不认识的属性：会被整条跳过（如 container-type: inline-size 在 Chrome 100 上被忽略）
• 不认识的属性值：会导致该条声明失效（如 height: 100dvh 中的 dvh 单位不被识别，整条 height 失效）
• 不认识的@规则：会连同其内部所有内容一起被跳过（如 @container、@scope 内的所有样式规则）
• 不认识的选择器：会导致整条规则失效（如 :has()）

这就是兼容性问题的本质 — 不会报错，但样式悄悄丢失，往往表现为布局错乱、颜色消失、元素坍塌等。

可能造成严重影响的 CSS 特性

下表列出了 Chrome 100 之后引入的、一旦在老版本浏览器上被忽略就可能严重影响页面展示的 CSS 特性。

特性	最低版本	在老版本上的严重后果
Container Queries @container	Chrome 105	容器查询内的所有响应式规则被整块忽略，组件在不同尺寸容器中无法自适应，布局错乱或堆叠异常。
:has() 伪类选择器	Chrome 105	所有使用 :has() 的规则整条失效。如果页面依赖 :has() 来控制父元素样式（如根据子元素状态切换布局），相关样式将完全丢失。
动态视口单位 dvh / svh / lvh 等	Chrome 108	浏览器不认识该单位，整条声明无效。如果元素的 height 或 min-height 仅使用了动态视口单位，元素高度可能坍塌为 0 或由内容撑开。
color-mix() 函数	Chrome 111	颜色值无法解析，使用该函数的 background、color、border-color 等声明全部失效，元素呈现默认或透明色。
oklch() / oklab() 色彩空间	Chrome 111	同上，所有使用新色彩空间语法的颜色声明失效，配色方案大面积失灵。
三角函数 sin() / cos() / tan() 等	Chrome 111	若用于 calc() 内计算尺寸或位置，整个表达式无效，元素尺寸或定位异常。
Subgrid（子网格）	Chrome 117	子元素无法继承父网格的轨道定义，嵌套网格项对齐失效、错位。
@scope 作用域样式	Chrome 118	@scope 块内所有规则被忽略，对应区域的样式丢失。
Relative Color Syntax 如 rgb(from ... r g b / 50%)	Chrome 119	颜色值无法解析，相关颜色声明失效。
CSS 原生嵌套（Nesting）	Chrome 120	影响范围最广。所有嵌套书写的规则被完全忽略，页面出现大面积样式丢失。如果整个项目的 CSS 都采用了原生嵌套语法，在老版本上几乎等于"裸奔"。
light-dark() 函数	Chrome 123	颜色声明无效，暗色模式与亮色模式的配色无法自动切换，可能导致文字不可读（如深色背景 + 深色文字）。
CSS Anchor Positioning anchor-name / position-anchor 等	Chrome 125	锚定定位完全失效，工具提示、浮层、下拉菜单等锚定元素的位置完全错乱或脱离视口。
round() / mod() / rem() 数学函数	Chrome 125	若用于尺寸计算，声明无效，元素尺寸异常。

其中影响范围最大的三类是：CSS 原生嵌套（大面积样式丢失）、Container Queries（组件响应式全面崩溃）、新颜色函数/色彩空间系列（配色方案瓦解）。

其他可能引起不兼容的 CSS 概览

除上表中的"严重影响"级别外，还有一些 Chrome 100 之前就已支持、但更老的内核仍不支持的常用 CSS，在此一并列出以供参考：

特性	最低版本	简要说明
@layer 层叠层	Chrome 99	控制样式优先级的新机制，不支持时内部规则仍然生效但优先级行为可能不符合预期
accent-color	Chrome 93	表单控件主题色，不支持时回退到默认外观，不影响布局
aspect-ratio	Chrome 88	不支持时元素无法保持宽高比，可能导致图片/视频容器坍塌
:is() / :where()	Chrome 88	不支持时整条选择器规则失效
逻辑属性 （margin-inline 等）	Chrome 87	不支持时相关间距/尺寸声明失效
clamp() / min() / max()	Chrome 79	不支持时整条声明失效，可能影响字号或尺寸
Flexbox gap	Chrome 84	不支持时 flex 子项间距消失，布局会挤在一起

兼容性应对思路

在 MediaWiki 站点中，编辑者通常只能通过 MediaWiki:Common.css、页面内联样式或动态加载指定CSS文件，来控制页面表现。以下是一些实用的兼容性策略：

渐进增强而非强依赖

对于新特性，优先采用"有则更好、无则不崩"的思路：

/* 基础方案：所有版本都能正常工作 */
.info-box {
  height: 100vh;
}

/* 增强方案：支持的浏览器会覆盖上面的值 */
.info-box {
  height: 100dvh;
}

浏览器会按顺序解析，遇到不认识的 dvh 会跳过该条声明，保留上面的 100vh。

利用 @supports 做特性检测

/* 默认布局 */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* 仅在支持容器查询的浏览器中启用 */
@supports (container-type: inline-size) {
  .card-grid {
    container-type: inline-size;
  }
  @container (min-width: 600px) {
    .card-item { width: 50%; }
  }
}

避免在 Common.css 中使用原生嵌套语法

这是最容易踩的坑。由于 CSS 原生嵌套在 Chrome 120 以下完全不被识别，而 MediaWiki 的 Common.css 不经过任何预处理直接送达浏览器，使用嵌套语法会导致老版本用户大面积丢失样式。

/* ✗ 危险：Common.css 中不要这样写 */
.navbox {
  background: #f8f9fa;
  .navbox-title {
    font-weight: bold;
  }
}

/* ✓ 安全：使用传统平铺写法 */
.navbox {
  background: #f8f9fa;
}
.navbox .navbox-title {
  font-weight: bold;
}

颜色的安全回退

如果希望使用新色彩空间或 color-mix()，务必提供回退值：

.highlight {
  /* 回退色：所有浏览器都认识 */
  background-color: #4a90d9;
  /* 增强色：支持 oklch 的浏览器会覆盖上面的值 */
  background-color: oklch(0.65 0.15 250);
}

本地预处理工具

如果你在本地编写较复杂的样式再粘贴到 Common.css，可以借助预处理工具自动处理兼容性：

• Lightning CSS — 高性能的 CSS 编译工具，可降级新语法到指定目标浏览器版本
• Autoprefixer — 自动添加浏览器前缀（现代 CSS 已较少需要）
• PostCSS + postcss-nesting — 将嵌套语法编译为传统平铺写法

这些工具可以让你在编写时享受现代语法的便利，产出的代码则保持对老版本的兼容。

查询兼容性

推荐使用 Can I Use 查询任意 CSS 特性的浏览器支持情况，或使用 Baseline 了解某特性是否已被所有主流浏览器稳定支持。

MediaWiki:WikiparserHighlight.Test.js

MediaWiki:WikiparserHighlight.css