现代 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 的价值是减少复杂度不是收集新语法。支持检测、基础布局和真机验证都进升级清单新旧环境才能各自得到可用结果。
现代 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 的价值是减少复杂度不是收集新语法。支持检测、基础布局和真机验证都进升级清单新旧环境才能各自得到可用结果。
