现代 CSS 升级，要给旧 WebView 留基础布局
引入 subgrid、动态视口单位之前，先看目标浏览器与 WebView 覆盖范围。新语法能让代码更干净，但不能拿旧环境的基本可用性换这点整洁。
升级时把现代实现作为渐进增强，并保留能工作的 Grid 或 Flex 基础样式。针对软键盘、地址栏伸缩等动态场景，还需要实机检查。
真机检查动态视口与主题
移动 Safari 的地址栏显示与隐藏会改变可见区域。vh、dvh、lvh 和 svh 的选择应按页面目标决定：是保持视觉稳定，还是跟随当前可见高度。
# 使用 stylelint 扫描全局 CSS 源码中的不兼容新属性
npx stylelint "src/**/*.css" –config .stylelintrc.json
# 检查 PostCSS 编译出来的兼容性降级产物是否按预期转换
npx postcss src/styles/grid-upgrade.css –use postcss-preset-env -o dist/output.css
不要把所有 100vh 直接替换成 100dvh。后者会随可见区域变化，适合需要贴合可视窗口的内容；希望稳定的页面壳更适合评估 svh 或 lvh，并用基础样式兜底。
布局升级分流与 Baseline 兼容性降级架构
升级前先用 @supports 做特性隔离，并验证编译后的基础样式：
Subgrid 对齐与视口降级示例
下面的代码先提供基础布局，再为支持相应特性的浏览器增加能力：
/* 1. 安全视口高度处理：解决 100vh/100dvh 在移动端的跳动死穴 */
.app-viewport-wrapper {
/* 基础兜底：利用 JavaScript 注入的精确视口变量 */
height: calc(var(–vh, 1vh) * 100);
width: 100%;
overflow-x: hidden;
}
/* 现代化浏览器渐进增强：优先使用 stable/large viewport height */
@supports (height: 100lvh) {
.app-viewport-wrapper {
height: 100lvh; /* 始终保持最大可见区域，防止地址栏收起时布局跳动 */
}
}
/* 2. 卡片列表容器：CSS Grid */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
padding: 1.5rem;
}
/* 单个卡片内部：多层级高度对齐方案 */
.card-item {
display: grid;
/* 基础降级：传统 Grid 轨道 */
grid-template-rows: auto 1fr auto;
background: #ffffff;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
/* 渐进增强：支持 subgrid 的现代浏览器，跨卡片精准对齐标题与底部按钮 */
@supports (grid-template-rows: subgrid) {
.cards-grid {
/* 允许跨行共享行高 */
grid-template-rows: repeat(auto-fill, auto);
}
.card-item {
/* 将父级网格行继承给子元素 */
grid-row: span 3;
grid-template-rows: subgrid;
}
}
// 解决老旧设备上 dynamic viewport 的 JavaScript 辅助补丁
function initViewportFix() {
const setVh = () => {
// 获取实际内窗口高度并计算出 1vh 对应的真实像素
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('–vh', `${vh}px`);
};
setVh();
// 仅在窗口 resize 时防抖更新，避免 scroll 事件引发频繁重绘
let timer = null;
window.addEventListener('resize', () => {
if (timer) clearTimeout(timer);
timer = setTimeout(setVh, 100);
});
}
initViewportFix();
升级前的四项检查
修改全局 CSS 方案之前，务必在团队内部完成这几项排查确认：
- 用项目自己的浏览器版本数据决定是否保留降级样式，而不是套用固定比例。
- 新页面优先使用逻辑属性，例如 margin-inline-start，以便支持 RTL 排版。
- 在 Android 与 iOS 上分别测试软键盘弹起后的关键操作是否仍可见、可点。
- 重构 CSS 变量层级后，对明暗主题各走一遍视觉回归，确认边框和阴影 Token 没有断链。
落地考量
现代 CSS 的价值是减少复杂度，不是收集新语法。支持检测、基础布局和真机验证都进升级清单，新旧环境才能各自得到可用结果。
