AI 摘要：本文探讨了如何利用现代 CSS 的 shape() 函数与 clip-path 属性，构建出带有圆角、延展弧线的标签 (Tabs) 样式。文章从早期依赖多元素遮罩的实现方式出发，逐步演示如何使用 shape() 绘制可响应的标签形状，并通过变量 (CSS Variable) 优化灵活度。后续还包含兼容性 fallback、单方向滚动控制 overflow-inline/overflow-block 的技巧，以及对可访问性 (Accessibility) 实现的反思。

1. 背景与旧方案
• 作者回顾早期制作“round-out tabs”的方案，需要为每个标签使用四个额外元素来模拟圆角连接效果。
• 这种方法复杂、难维护且受限于层叠遮罩实现。

2. 使用 shape() 实现圆角标签
• 介绍 shape() 函数与 clip-path 的结合，能直接以绘图指令定义形状，无需额外 DOM 元素。
• shape() 的指令包含 from、curve、vline、hline 等步骤，用以绘制从矩形裁剪出的弧线标签外形。
• 每一步演示曲线、直线和坐标计算，使形状既可固定又可相对灵活。
• 最终实现完整闭合形状，只显示实际的标签区域。

3. 参数变量化与可动态调整
• 将固定数值（如 10px、20px）抽象为自定义属性 (--tabGirth)，以便根据变量调整标签厚度。
• 使用 Knobs 等交互工具实时修改变量值以测试视觉效果。

4. 外观与行为增强
• 添加 hover 与 active 效果，通过 translate 实现微动。
• 解决非换行标签的滚动问题，利用 overflow-inline: auto 与 overflow-block: clip 控制单方向滚动。
• 使用 filter 为 clip 后的形状添加阴影效果。

5. 浏览器兼容性与 Fallback
• 当前仍有浏览器未完全支持 shape()。
• 提供 @supports 条件判定，未支持时以 border-radius 提供圆角退化方案，保证视觉一致性。

6. 可访问性 (Accessibility) 讨论
• 使用 anchor 作为基础标签实现，并在有 JavaScript 时补上 aria 属性。
• 承认目前键盘导航功能不足，提醒开发者参考更完善的无障碍 Tabs 模式。

7. 相关与延伸参考
• 提到 Temani Afif、Ana Tudor 的圆角或内凹标题组件为现代 CSS 造型提供灵感。

Frontend Masters

Modern CSS Round-Out Tabs

Quite a while back I made a set of “round out” tabs, where the literal tab part of the UI would connect to the content below with a rounded edge that flared out as it connected. A bit tricky of a situation, even now!

AI 摘要：作者通过实验发现，虽然 CSS 无法直接为特定字母（如 "E"）单独设置样式，但可以借助 @font-face 的 unicode-range 特性，为某些 Unicode 字符指定不同的字体，实现“伪定向”样式。这种方法能让部分字符使用不同字体或通过字体文件的多彩功能（如 OpenType 的 COLR 表）来实现颜色变化，从而在不添加额外标记的情况下，产生有趣的视觉效果。尽管样式控制有限，但仍展现了 CSS 与字体技术结合的创造潜力。

1. CSS 与字符定向样式的限制与突破
• 通常看来，CSS 无法直接选择文字中的某个具体字符进行样式修改。
• 作者提出一种“秘密方法”，利用字体层面实现针对字符的视觉差异。

2. @font-face 与 unicode-range 的创新用法
• 定义自定义字体 "Different"，并指定某些 Unicode 码位（如 a, e, i, o, u）。
• 使用 font-family 优先级让目标字符采用不同字体，其他字符保留默认样式。
• 在视觉上形成“部分字符变异”效果，而无需额外 HTML 标记或包裹元素。

3. 可扩展技巧与字体特性应用
• 利用 size-adjust 属性可微调字体尺度，使字符外观稍有变化。
• 利用 WOFF2 格式中的 COLR 表（彩色字体表），可为字体字符添加颜色图层。
• 举例引用多彩像素字体 Street Fighter II Large 1，实现大写字符的彩色展示。

4. 结论：CSS 与字体结合的创造空间
• 尽管 CSS 本身不支持字符级定向样式，但字体技术为前端视觉设计提供了可能。
• 此实验启发开发者通过字体文件与 CSS 结合，实现独特、微妙的文本艺术效果。

AI 摘要：文章围绕 Lighthouse 的新性能洞察 “Optimize viewport for mobile” 展开，分析移动端点击延迟 (300 ms) 的成因及对用户体验与核心网站性能指标 (Core Web Vitals) 的影响。通过剖析 Qatar Airways 的示例，作者说明 JavaScript 覆盖 viewport 设置会导致移动端性能劣化，并给出优化建议：应使用 <meta name="viewport" content="width=device-width, initial-scale=1"> 与 CSS 媒体查询来实现响应式布局，而非固定宽度或 JS 动态改写，从而避免延迟、提升 INP (Interaction to Next Paint)。最后介绍如何利用 DebugBear 持续监测网页性能与真实用户数据 (RUM)。

1. 概述：Lighthouse 新洞察“Optimize viewport for mobile”
• 取代旧的 <meta name="viewport"> 静态检查，采用动态分析判断页面是否真正移动友好
• 若检测失败，用户点击将产生高达 300 毫秒延迟，严重影响 INP

2. 300 毫秒点击延迟的背景与机制
• 浏览器历史上为保留“双击放大”功能而引入延迟
• 当网站非移动优化时，为兼顾可访问性，浏览器继续保留延迟
• 若 viewport 固定宽度（如 desktop 模式缩小版），则自动启用此延迟

3. 案例分析：Qatar Airways 官网 viewport 问题
• HTML 中声明了标准 viewport：width=device-width, initial-scale=1.0
• 但随后被 JS 在两个断点下改写为固定宽度 width=480
• 因此反过来触发非移动优化逻辑，导致交互延迟、INP 崩溃
• 使用 window.screen.width 而非 window.innerWidth，使得问题在 DevTools 模拟测试中难以察觉

4. 优化方案与最佳实践
• 使用标准 viewport 配置：<meta name="viewport" content="width=device-width, initial-scale=1">
• 避免使用固定宽度或在 JS 中修改 viewport
• 采用 CSS media queries 管理不同尺寸布局
• 通过 viewport 宽度进行断点分布，避免依赖物理屏幕宽度

5. 持续监测与性能保障
• 借助 DebugBear 可设定定期性能测试与性能预算 (performance budgets)
• 提供 Lighthouse 集成、图形对比、阈值报警等功能
• 支持真实用户监控 (RUM)，捕获真实点击延迟与 INP 细节
• 推荐结合模拟测试与生产环境监控，确保页面长期稳定

Debugbear

How to Optimize Viewport for Mobile for Faster Interactions | DebugBear

Optimize viewport for mobile for faster interactions is a new Lighthouse performance insight that helps you detect viewports that are not optimized for mobile.

AI 摘要：本文系统介绍了现代 CSS 颜色系统的演变与新特性，重点包括新版 rgb() 与 hsl() 的语法变化、相对颜色（relative colours）的用法、改进的亮暗主题处理方式、颜色空间（colour spaces）的应用，以及应对更广色域设备的新工具。作者旨在帮助不专注设计的开发者高效掌握现代 CSS 色彩特性，从而提高代码一致性与灵活性。

1. 现代 CSS 写法演进
• 从传统的十六进制与函数写法过渡到更灵活的空间分隔语法
• 新版 rgb() 与 hsl() 可直接包含透明度通道，无需“a”版本
• / 用于区分主色值与 alpha 通道，提高一致性
• 空格分隔语法引入新规范以支持更多色彩函数，如 oklch()、hwb()、color()

2. 相对颜色（Relative Colours）

• 允许从已有颜色生成新颜色，通过语法 rgb(from #ff0000 r g b) 实现
• 可结合自定义属性（CSS variables）动态调整不透明度或亮度
• 帮助快速生成同系浅色、深色变化，便于主题一致管理
• 可用于构造组件风格如提示框（toast），只需修改基础色

3. 改进的亮暗主题（Theming）
• 传统方法需在媒体查询与主题类中重复定义变量
• light-dark() 函数允许在单条声明中同时定义明亮与暗色配色
• 结合 color-scheme 可根据用户系统偏好自动切换
• 支持组件级别的独立 color-scheme 控制，增强设计灵活度

4. 颜色空间（Colour Spaces）
• 颜色空间决定浏览器如何计算与过渡颜色
• 支持在 linear-gradient() 中指定颜色空间，如 oklch、lab、hwb
• 新空间可避免传统 sRGB 中的颜色过渡失真
• “longer hue” 参数用于控制渐变方向，生成更自然或彩虹式渐变

5. 扩展色域与精准配色
• 介绍 color() 函数与广色域（wide gamut）空间 display-p3 的使用场景
• 适用于与品牌色或印刷标准（如 Pantone）匹配需求
• 浏览器会自动降级不支持的色域，保证兼容性

6. 展望与总结
• CSS 色彩能力远超以往，包括即将介绍的 color-mix()、oklch() 等函数
• 开发者无需成为设计师，也能直接在代码层面进行色彩管理与调和

Piccalilli

A pragmatic guide to modern CSS colours - part one

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series, by Kevin Powell, is for you.

AI 摘要：本文通过实例展示如何将 GSAP 动画库与 WebGL 着色器（Shaders）结合，以构建沉浸式网页交互视觉。作者从基础的 HTML 布局与 Three.js 场景搭建开始，逐步扩展至通过 GSAP 动画驱动着色器 uniform 参数，实现包括灰阶渐变、点击波纹、鼠标揭示遮罩、点击与按压的流体扭曲、以及基于滚动的动态模糊等复杂 GPU 动效。文章强调 JavaScript 动画时间线与 GLSL 实时渲染逻辑的联动，让网站视觉能以自然、物理感与交互性呈现。

1. 基础设置与 HTML/CSS 结构
• 构建页面容器与隐藏溢出内容，准备 GSAP Draggable 和 ScrollTrigger 绑定。
• 在 Three.js 环境中创建 Stage 类，负责 Renderer、Camera、Scene 管理。
• 使用 GSAP ticker 同步渲染循环，实现动画与渲染一致更新。

2. WebGL Stage 与平面载入
• 使用 TextureLoader 创建平面 (PlaneGeometry)，加载 DOM 中的图片纹理。
• 将 DOM 元素与 Canvas 中的物体同步，通过正交相机的坐标转换函数转换屏幕坐标到世界坐标。
• 替换标准材质为 ShaderMaterial，导入自定义 vertex/fragment shader。

3. 点击波纹与灰阶渐变效果（Ripple + Grayscale）
• 使用 GSAP Observer 监听点击事件。
• 点击后修改 shader uniform uGrayscaleProgress 在彩色与灰阶之间平滑过渡。
• 添加鼠标点击点 uMouse uniform，使过渡从点击中心扩散。
• 加入顶点波动（Ripple）动画，在 vertex shader 中用正弦函数生成波形变形。
• 结合 GSAP Timeline 同步控制灰度和波纹周期。
• 管理多平面状态，实现点击切换与反向第二动画效果。

4. 纹理遮罩揭示（Texture Reveal Mask Effect）
• 引入双纹理 (uTexture, uTextureBack) 并使用 uMixFactor 控制混合。
• 通过鼠标 hover 事件，使用 Raycaster 定位交互对象。
• 在 fragment shader 中基于鼠标坐标生成圆形遮罩，平滑混合两张纹理。
• 悬停时 reveal 动画开启，离开时渐出还原。

5. 点击按压揭示（Click & Hold Mask Reveal）
• 通过 GSAP Observer 监听 onPress/onRelease/onMove，管理按压持续状态。
• 使用异步 Timeline 表现“按住充能—释放复位”的动画逻辑。
• shader 中使用噪声函数 (noise) 与 uTime 动态扰动 mask，制造液态波动感。
• 实现交互中的纹理扭曲、流动与时间关联视觉。

6. 动态模糊轮播（Dynamic Blur Effect Carousel）
• 结合 GSAP Draggable 与 ScrollTrigger 使轮播支持拖动与滚动同步。
• 计算每个平面到屏幕中心的距离，根据距离动态更新 uBlurAmount。
• 在 shader 中使用多重 Kawase 模糊算法，混合多层模糊采样和平滑区间。
• blur 与 scroll 动态联动，创造景深般的焦点模糊效果。

7. 总结与启发
• GSAP 为动画时序与交互逻辑提供流畅控制。
• Shaders 提供像素级视觉自由度与 GPU 实时渲染性能。
• 在 Web 前端中实现生动视觉，展现设计与技术融合的趋势。

AI 摘要：文章讨论 width: stretch 与 height: stretch 这两个新加入 CSS 标准的属性值。作者回顾其历史背景，说明它如何统一了过去 -webkit-fill-available 与 -moz-available 的实现，并探讨了它与 box-sizing: border-box 的区别、动画特性（animatable）以及当前的浏览器支持情况。文章指出，虽然 stretch 功能简单，但它解决了长期以来 width: 100% 受内边距影响导致溢出的问题，为布局控制带来了更直观、更可靠的选择。

1. stretch 的由来与标准化
• Chromium 浏览器自 2025 年 6 月起支持 stretch，统一了非标准属性 -webkit-fill-available 与 -moz-available。
• 在 @supports 出现之前，开发者难以根据浏览器正确选择对应实现。
• 这一特性被开发者 Dave Rupert 在 Bluesky 平台上重新发现，引起社区关注。

2. stretch 的工作机制
• 行为类似 width: 100%，但忽略 padding，因此不会因内边距造成溢出。
• 从技术上看，stretch 控制元素的 margin box 以匹配包含块的尺寸。
• 对比 box-sizing: border-box ：虽然二者可达相似效果，但 stretch 更语义化且更灵活。

3. 为什么考虑使用 stretch 而非通用 box-sizing
• 使用通配符选择器 * 设置 box-sizing: border-box 无法涵盖所有伪元素。
• 维护完整伪元素列表既繁琐又易错，而 stretch 可减少这类问题。
• 对某些场景而言，开发者可能希望保持 100% 不包含 padding 的默认行为。

4. 动画与过渡特性
• box-sizing 无法被动画化，但 stretch 可与 100% 间平滑过渡。
• 需启用属性 interpolate-size: allow-keywords 才能插值动画。
• 未来可通过 calc-size(stretch, size) 精确控制插值行为。

5. 浏览器兼容性与渐进增强方案
• 当前仅 Chromium 系列 (Opera 122+、Chrome/Edge 138+、Android 140+) 支持。
• 可通过 @supports 设置自定义属性 --stretch，为 Firefox 与 Safari 提供兼容实现。
• 一旦全面支持后，可直接使用 width: stretch。

6. 总结与开发者建议
• stretch 是一种小而实用的布局增强功能，提升工作流质量。
• 即使继续使用 box-sizing 也无妨，但理解并尝试新特性有助于优化设计思维。
• 多一种写法，意味着多一种选择，更贴合个人或项目的编码哲学。

CSS-Tricks

We Completely Missed width/height: stretch | CSS-Tricks

The TL;DR is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space.

AI 摘要：Harmonizer 是 Evil Martians 推出的色彩工具，可在 Figma 插件或 Web 界面中使用，利用 OKLCH 与 APCA 生成具一致亮度与对比度的配色方案。该工具通过定义光度等级、色相与背景上下文，自动生成可在浅色与深色模式中保持视觉一致的色彩体系。支持导出多种开发格式（Tailwind、CSS 变量、JSON）

1. 工具介绍与设计初衷
• Harmonizer 旨在解决现有设计系统中颜色等级不一致、对比度难以统一、浅色/深色模式映射不对称等问题。
• 利用感知一致的亮度（lightness）与对比（contrast），确保 UI 元素间的视觉可靠性与可访问性。

2. 工作原理
• 继承 Figma 文档的色域设置（P3 或 sRGB）。
• 用户可定义色阶（如 100–900）及相应光度步进。
• 支持设定对比度计算方向（前景/背景）及背景上下文（白、黑或自定义）。
• 一键生成 Palette，自动产生色彩预览与变量。

3. 核心特性
• 可调色彩配置文件（P3 或 sRGB）。
• 基于 OKLCH 实现感知一致的色度 (chroma)。
• 使用 APCA 或 WCAG 对比计算公式，提升屏幕可读性。
• 支持自定义背景颜色、自动识别现有调色板、自动更新样式变量。
• 提供可共享的设定文件（Config）与开发导出（Tailwind、CSS、JSON）。

4. 技术背景与实现细节
• 使用 PNPM 管理 monorepo，包含 core、web、figma-plugin 三个子包。
• 主要命令包括安装依赖、构建、预览、格式化及类型检查。
• 借助 Spred 响应式库与 React 实现状态管理。
• 色彩计算逻辑在 Web Worker 中执行，避免阻塞主线程。
• 通过 CSS 变量动态控制外观，实现全局响应式配色。

5. 设计理论与算法基础
• OKLCH：提供感知上平衡的亮度与色度模型。
• APCA：面向自发光显示器的现代对比度算法。
• APCACH：自定义计算器，将上述两种算法融合以生成高度可访问的色彩。

GitHub

GitHub - evilmartians/harmonizer

Contribute to evilmartians/harmonizer development by creating an account on GitHub.

AI 摘要：本文综述了 Chrome 团队在 2025 年对 View Transition API 的更新，包括浏览器支持进入 Baseline、React 核心支持、新的自动命名与嵌套过渡功能、调试工具改进、动画属性继承优化及未来即将推出的 Scoped View Transition 等特性。这些改进显著提升了过渡动画在 Web 开发中的灵活性、性能与一致性。

1. 浏览器与框架支持进展
• Baseline 支持：View Transition API 即将成为 Interop 2025 Baseline 新规范，Firefox 144 将支持 document.startViewTransition(updateCallback)、view-transition-class、自动命名（view-transition-name: match-element）及 :active-view-transition 选择器。
• React 集成：React 团队已在 React 核心中集成 <ViewTransition> 组件，从实验版 (react@experimental) 进入 Canary 通道，文档与讲解视频同步更新，意味着 API 设计趋于稳定。

2. 新发布功能（Recently Shipped Features）
• 自动命名元素：view-transition-name: match-element 允许浏览器自动为匹配元素生成内部名称，减少开发时的手动命名负担。
• DevTools 调试支持增强：Chrome 139 起，开发者工具能正确显示针对 ::view-transition-* 伪元素使用 view-transition-class 的样式规则，便于动画调试。
• 嵌套过渡组 (Nested View Transition Groups)：自 Chrome 140 起可嵌套 ::view-transition-group，保留层级结构，使 3D 旋转、裁剪等效果在过渡中保持。
• 继承更多动画属性：伪元素现在会继承更多 animation-* 属性（如 timing-function、iteration-count 等），简化同步动画管理。
• 修正 finished promise 延迟问题：finished 回调执行不再等待额外帧，从而消除动画尾部闪烁问题。

3. 即将推出的功能（Upcoming Features）
• Scoped View Transitions：允许在任意 DOM 子树上启动局部过渡 (element.startViewTransition())，可同时运行多个独立过渡，并仅锁定交互范围在对应子树。Chrome 140 开放实验测试。
• ::view-transition 定位变更：将在 Chrome 142 从 position: fixed 改为 absolute，实现与 CSS 规范统一。
• document.activeViewTransition 属性：即将推出的新属性，可直接访问当前活动的 ViewTransition 实例，便于跨文档或同文档过渡管理。
• ViewTransition.waitUntil API：允许使用 Promise 控制过渡结束时机，可实现等待异步操作（如 fetch）后再结束动画，为未来滚动驱动（scroll-driven）过渡铺路。

4. 展望与反馈
• Chrome 团队表示将持续迭代 View Transition 技术，未来重点关注 Scoped Transition 与更丰富的开发者 API。
• 鼓励通过 CSS WG 或 Chromium 提交功能建议与问题反馈。

Chrome for Developers

What's new in view transitions (2025 update)  |  Blog  |  Chrome for Developers

An overview of what changed for View Transitions in 2025

AI 摘要：2025 年 9 月，Baseline 项目在浏览器兼容性标准化方面取得显著进展。最重要的变化是 Browserslist 原生支持 Baseline 查询，大幅简化项目集成流程；同时多个 Web 平台特性进入 “新近可用” 与 “广泛可用” 阶段，反映出跨浏览器功能互操作性的累积成果。此外，Interop 2026 提案阶段结束，未来关注点已确定；Baseline 时间轴工具亦获得用户体验升级，为开发者提供更直观的功能追踪与过滤体验。

1. Baseline 与 Browserslist 集成
• Browserslist 现已内置 Baseline 查询支持，无需额外 npm 包。
• 新语法如 baseline widely available、baseline newly available、baseline 2022 等，可直接定位功能状态。
• 支持 “with downstream” 查询，用于包含下游浏览器的环境。
• 资料参考：Browserslist 现在支持 Baseline。

2. 9 月功能更新概览
• “Baseline 新近可用” 功能包括 content-visibility、<link rel="dns-prefetch">、URLPattern 等。
• “Baseline 广泛可用” 功能多达 21 项，涵盖 CSS、Web API、Wasm 等领域，如 Constructable Stylesheets、Import Maps、OffscreenCanvas、Push API 等。
• 这标志着功能互操作性（Interoperability）的稳步推进。

3. Interop 2026 提案总结
• Interop 是各主流浏览器厂商协作确定优先兼容领域的年度项目。
• 2026 年的提案阶段已完成，各供应商正筛选关键功能领域。
• 此过程与 Baseline 功能纳入周期紧密关联。

4. Baseline 时间轴工具优化
• 由 Rick Viscomi 创建的 Baseline 时间轴工具 获得 UX 改进。
• 新增键盘快捷键（如 -w、-n、-i 等）以快速筛选不同可用性级别的特性。
• 有助于开发者更高效地浏览和评估 Web 平台功能状态。

5. 展望与社区反馈
• 官方邀请社区通过 Issue Tracker 提交 Baseline 相关内容与建议。
• 预计未来 Baseline 将持续扩展新功能，并强化浏览器协同。

web.dev

2025 年 9 月基准每月摘要  |  Blog  |  web.dev

了解 2025 年 9 月 Baseline 的各种动态。

AI 摘要：本文演示了如何使用 CSS 的 Anchor Positioning（锚点定位）功能，让 tooltip（提示框）动态对齐并保持在可视区域内，无论锚点元素的位置如何，同时通过伪元素及 margin 技巧控制 tooltip 箭头的显示及隐藏效果。文章还分享了代码片段和在线交互示例，展示如何通过 @position-try 与 position-try-fallbacks 实现降级处理，并展望未来 CSS 规范中的 anchored queries 支持。

1. 锚点定位的核心概念
• 使用 anchor-name 将元素指定为锚点
• position-anchor 用于将 tooltip 锚定到指定的锚点元素
• 控制位置属性（如 bottom、top 等）动态计算，实现与锚点间距调整

2. Tooltip 位置与箭头处理
• 定义 --distance 和 --size 等 CSS 自定义属性控制间距与箭头尺寸
• 使用伪元素 :before 绘制 tooltip 箭头，并通过 clip-path 形成箭头形状
• 通过继承 margin 和位置计算，达到根据锚点自动隐藏或显示箭头的视觉效果

3. 动态适配与回退机制
• 利用 @position-try 和 position-try-fallbacks 为 tooltip 设置备用位置（如从上切换至下）
• 受限于当前 CSS Anchor Positioning 的语法限制，部分逻辑需通过“hack”实现
• debug mode 演示 tooltip 在视图中移动时的实时定位与隐藏动画

4. 标准进展与未来展望
• 目前 @position-try 中的可用属性有限
• 未来可通过 anchored queries 精准适配布局，实现更简洁的 tooltip 自动定位逻辑

5. 延伸阅读
• 3D Box using Modern CSS：使用 corner-shape 创建 3D 盒子效果
• CSS Shapes using corner-shape：以 corner-shape 重现常见 CSS 图形

Css-Tip

Dynamic Tooltip Position with Anchor Positioning

A tootlip that follows its anchor while adjusting the position of its tail

AI 摘要：本文由 CSS 社区知名开发者 Chris Coyier 撰写，分享了他首次整理并发布的 CSS Starter（非传统 Reset）。文章重点阐述其设计原则：为个人常用而作、注重简洁与可用性、优先逻辑属性 (logical properties)、避免自定义变量、利用 @layer 提升可维护性、兼顾可访问性与现代特性。整体风格更像是“理想的浏览器默认样式”，旨在作为灵活的基础而非强制的规范。

1. 基本原则 (Principles)
• 专为作者个人实践设计，但可供他人借鉴
• 区分 Reset 与 Starter，更偏向“添加优化”而非彻底清零
• 推崇逻辑属性 (logical properties)，避免过早定义 --custom-properties
• 强调 @layer 提升样式可控性
• 注重轻量、实用与“浏览器默认理想化”

2. 核心样式结构与实现 (Core CSS Structure)
• 基础元素：html { color-scheme: light dark; }，启用明暗模式支持
• 排版/字体：使用 clamp() 定义流体字体、tab-size: 2、hanging-punctuation 提升阅读体验
• 文本与标题：统一 box-sizing；标题自定义粗细/间距，正文 text-wrap: pretty + 限制宽度
• 链接样式：更轻盈的下划线处理、颜色基于 OKLCH
• 列表、表格：内嵌符号样式，表格结构更贴近现代 UI/UX 需求
• 媒体元素：默认不越界，figure/figcaption 做细微优化
• 表单/按钮：继承字体、宽度优化、符合无障碍 (a11y) 的交互与外观
• 隐藏与辅助样式：提供 .screenreader-only 与 :focus-visible 增强可访问性

3. 特别改进点 (Special Considerations)
• Dark Mode 支持：自动继承系统主题，滚动条/表单控件一致化
• 流体布局：clamp() 实现响应式字体与流式布局的平衡
• 可访问性增强：包含禁用态控制、无障碍隐藏、焦点可见性等最佳实践
• 平滑交互：兼容 prefers-reduced-motion，支持现代 CSS 的视图过渡 (view-transition) 与 interpolate-size

4. 作者态度与开放性 (Author’s View & Flexibility)
• 本 Starter 并非框架，也非版本化发布，推荐“按需拷贝”
• 样式适度、务实，避免过度规范化
• 邀请社区反馈，鼓励批判与改进

Frontend Masters

The Coyier CSS Starter

I felt called out by Mike Mai’s You are not a CSS dev if you have not made a CSS reset.

AI 摘要：本文指出大多数开发者在前端实现中无意间给用户加载了远大于实际需求的图片，这浪费了带宽与计算资源。作者以 NextJS <Image> 组件为例，解释 sizes 属性在响应式图片 (responsive images) 中的重要性，并系统讲解了 srcset、sizes、图片加载策略 (lazy vs eager loading)、设备像素比 (DPR) 等概念，最终提供完整的 “Cheat Sheet” 实用总结，帮助开发者高效地为不同屏幕设备提供最佳尺寸的图片。

1. 现实检视 (Reality Check)
• 使用高分辨率原图在小屏幕设备上会导致带宽浪费
• 即使使用 NextJS <Image> ，若缺少 sizes 属性，仍会传输超大图

2. sizes 属性的核心作用
• 明确规定图片渲染尺寸，帮助浏览器选择最佳匹配
• 设置 sizes="100vw" 显著压缩文件大小（最高可减少 25 倍）

3. 响应式图片的基本概念
• 像素限制**：超过屏幕物理限制的像素冗余无意义
• 引入 srcset 与 sizes：提供多种分辨率图片并让浏览器选择最优版本

4. 在复杂布局中的使用
• 当图片宽度并非等于屏幕宽度时，必须结合 sizes 指定实际渲染逻辑
• 支持多断点 (media queries)，可为不同 viewport 设置不同加载策略
• sizes="auto" 仅在懒加载 (lazy loading) 模式下生效，且浏览器兼容性有限

5. 图片加载策略
• loading="eager"：默认立即加载，适合首屏关键图片 (FCP)
• loading="lazy"：延迟加载，推荐用于非关键图片，高效节省资源

6. 设备像素比 (Device Pixel Ratio, DPR)
• 区分 **CSS pixel 与 device pixel
• 对应关系由 DPR 决定，例如 DPR=2 需要两倍分辨率图片
• srcset 支持 w 单位（推荐）和 x 单位（DPR 描述符），前者更适合响应式

7. 实用指南 (Cheat Sheet)
• 固定尺寸图片（如 icon）：设置固定 sizes，srcset 使用 DPR 描述符即可
• 响应式图片：
• 若为首屏内容：指定具体 sizes
• 若非首屏内容：加上 loading="lazy" 并优先用 sizes="auto, ...fallback"

8. 参考资料
• MDN Responsive Images
• HTML Living Standard
• Use density descriptors (web.dev)

Reason Under Pressure

Your Images Are (Probably) Oversized

Or why you should always set the `sizes` and `srcset` attributes on your (responsive) <img> tags.

AI 摘要：文章认为业界对 CSS 的频繁重塑，并非因为 CSS 本身不足，而是由于现代前端框架的组件化理念与 CSS 天性（全局、层叠、继承）的不匹配。各种工具和方法只是不同痛点的权衡解法，并不存在“银弹”。真正重要的是清楚认知权衡，选择能接受的复杂度和限制，而非不断寻求完美替代方案。

1. CSS 的设计初衷与现今差异
• CSS 最初为文档排版而生，适合全局样式、继承和层叠
• 现代前端应用已高度组件化和动态化，而 CSS 并非为此而设计
• 大量的“额外策略”试图弥补这种错位

2. 技术选项与权衡
• BEM：命名可预测，但选择器冗长
• CSS Modules：提供作用域隔离，但在运行时主题化方面有限
• Utility-first CSS（如 Tailwind）：迭代快速，但标记冗杂
• CSS-in-JS：灵活且贴近逻辑，但带来运行时开销与复杂度
• Cascade Layers 与 :where()：更细粒度控制，但团队需要学习投入
• 每项工具仅解决部分问题，不能一劳永逸

3. 问题的真正根源
• 前端框架（React / Vue / Svelte 等）强调组件作用域
• CSS 的全局特性与组件化逻辑发生冲突
• 长期以来开发者试图让 CSS 充当模块系统，但它从未被设计成那样

4. 核心思考：面对取舍
• 选择 CSS Modules，意味着局限的运行时灵活性
• 选择 Utility-first CSS，则要接受模板冗长
• 选择 CSS-in-JS，要谨慎监控性能和打包体积
• 没有完美解法，只有根据上下文作选择

5. 结论：接受“不完美”
• CSS 的问题不存在彻底解法
• 放弃寻找银弹，接受权衡
• “足够好可以上线”的 CSS，才是最终目标

Den Odell

We Keep Reinventing CSS, but Styling Was Never the Problem

We keep changing how we style the web, but the real problem isn’t CSS. It’s how we build around it.

AI 摘要：本文详细展示了使用 Framer Motion 在 React 项目中实现动画的方式，对比了传统 CSS 实现与 Framer Motion 的简洁 declarative（声明式）方式，并通过 Fade-In、Hover、List Staggering、Drag-and-Drop、Sortable List 等实例演示其强大功能。文章强调了 Framer Motion 的生产级特性（如 gestures、physics、variants、Reorder 等），并给出了初学和进阶的使用方向。

1. 为什么选择 Framer Motion
• 提供生产级动画解决方案，语法简洁，学习成本低
• 完美兼容 React 与 TypeScript，支持 declarative 宣告式写法
• 强大特性：drag 拖拽、spring 物理动画、scroll 动效、shared layouts

2. 开发环境准备与安装
• 使用 Vite 初始化 React + TypeScript 项目
• 使用 npm install framer-motion 安装依赖
• 提供 Demo 链接 便于快速试验

3. 动画实例逐步讲解
• 基本 Fade-In：对比 CSS keyframes 与 motion.div（initial/animate/transition）
• Hover 动画：对比 Tailwind hover/active 与 whileHover whileTap 的简洁写法
• List Staggering：传统 nth-child + 延迟 VS variants + staggerChildren 的声明式方案
• Drag-and-Drop：利用 drag、dragConstraints 等 props 快速实现拖拽，不需手写 DOM 监听
• Sortable List：利用 Reorder.Group 与 Reorder.Item 实现可排序列表的流畅交互

4. 总结与进阶提示
• Framer Motion 让复杂动画开发更直观和简洁
• 初学者可从 motion.div、animate、transition 入门
• 进阶可使用 AnimatePresence、Reorder、useMotionValue 等更高级功能
• 动画开发核心思想：声明式描述交互，而非命令式逻辑

Medium

Animating Elements through framer motion with React.js

Today, most of the website requirements you come across will ask for animations and effects. While you can definitely build animations with…

AI 摘要：本文讲述了 CSS zoom 属性如何从 IE 5.5 的非标准功能开始，被开发者滥用、误解、依赖，进而导致兼容性困境。随着 CSS transform 出现，zoom 一度被各浏览器忽略或不一致实现。但由于其在布局层面的独特作用，开发者持续呼声使其最终被纳入 W3C 规范，并在 Interop 2025 得到统一支持。这段历程反映了 Web 标准在兼顾创新与兼容中如何形成共识。

1. 非标准的起点
• 2000 年 IE 5.5 引入 zoom，允许元素放大或缩小，但缺乏正式规范。
• 各浏览器厂商竞相差异化实现，造成碎片化问题，开发者不得不写兼容代码。

2. 替代与取舍
• Mozilla 坚持标准化，未支持 zoom，转而推动 CSS transform。
• Safari 同时实现 transform 与 zoom，导致实现差异与兼容问题。
• zoom 因缺乏标准，处于既流行又边缘的尴尬位置。

3. 使用误区与“伪流行”
• 后续研究发现 zoom 使用率虚高，原因多是用 zoom:1 修复 IE 的 layout bug。
• 通过 HTTP Archive 数据分析，排除 zoom:1 后，实际真实使用率下降约 94%。
• 意味着 zoom 的高排名不过是兼容遗留问题，而非开发者真正需求。

4. 开发者诉求与再度回归
• 部分高流量 Web 应用（如 Excel Web、Gmail 移动端）需要 zoom 的布局影响特性。
• 2023 年 CSS Working Group 提出重新定义 zoom，简化并规范化语义。
• 2025 年进入 Interop 计划，获得主要浏览器支持，终于成为标准化功能。

5. 经验与启示
• Web 的共识虽慢，但能孕育开放与长期可持续的方案。
• 避免依赖专有技术，因短期便利可能导致长期维护成本与兼容困境。
• Web 标准的推进常与社区反馈、开发者需求紧密相关。

AI 摘要：本文介绍了 Chrome 新发布的 DevTools MCP 服务，它通过 Model Context Protocol (MCP) 将大型语言模型 (LLM) 与 Chrome DevTools 连接，使 AI 编程助手能够实时调试网页、诊断错误、模拟用户操作、分析性能问题等，从而提升生成代码的可用性和准确性。文章同时提供了使用场景示例、配置方法以及社区参与途径。

1. 背景与意义
• AI 编程助手生成代码时往往无法看到运行效果，相当于“蒙着眼睛编程”。
• Chrome DevTools MCP 服务解决了这一问题，直接让 AI 编程助手接入浏览器调试环境。

2. Model Context Protocol (MCP) 概述
• MCP 是一个开源标准，用于连接大型语言模型 (LLM) 与外部工具和数据源。
• Chrome DevTools MCP server 将调试与性能分析能力引入 AI agent。
• 示例工具：performance_start_trace，可自动启动 Chrome 并记录性能数据以供分析。

3. 应用场景与示例
• 实时验证代码修改：AI agent 可直接在浏览器中确认修改是否生效。
• 诊断网络与控制台错误：AI 可检查网络请求和日志，排查如 CORS 问题。
• 模拟用户行为：自动执行表单填写、点击测试，复现功能性 bug。
• 调试样式与布局问题：实时检查 DOM 和 CSS，解决复杂样式错误。
• 自动化性能审计：运行性能追踪，分析如 LCP (Largest Contentful Paint) 等指标。

4. 使用与配置方法
• 配置方式：在 MCP client 中添加 chrome-devtools 服务。
• 测试示例：运行 prompt "Please check the LCP of web.dev."。
• 更多工具参考：见 tool reference documentation。

5. 社区参与与后续发展
• 当前为公测版本，功能会逐步增加。
• 欢迎开发者与厂商反馈需求与问题。
• 参与方式：通过 GitHub issue 提交建议或 bug。

Chrome for Developers

Chrome DevTools (MCP) for your AI agent  |  Blog  |  Chrome for Developers

Public preview for the new Chrome DevTools MCP server, bringing the power of Chrome DevTools to AI coding assistants.

AI 摘要：本文介绍了 CSS 的新特性 @starting-style，它允许使用 transition 实现入场动画，但作者指出该特性存在严重的 specificity（优先级）陷阱，使得动画常常无法按预期运行。作者对比了 @starting-style 与传统的 keyframes，分析了具体问题案例，并提出三类解决方案：使用 !important、借助 CSS custom properties（变量）、退回到 keyframes。整体结论是：虽然 @starting-style 看似简化了写法，但 keyframe 动画依然更稳定、通用且易于维护。

Joshwcomeau

The Big Gotcha With @starting-style • Josh W. Comeau

CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS keyframe animations. But is the juice worth the squeeze?

AI 摘要：本文梳理了 2025 年现代 CSS 的最新进展，包括动画到 auto、@function、if()、text-wrap、linear() easing、 shape()、增强的 attr()、reading-flow 等特性。这些新功能大多提升了样式抽象能力、响应式设计的灵活性和排版的可控性，同时展现了 Chrome 为主、Safari/Firefox 跟进的支持现状，并给出 Polyfill 和渐进增强的可行性建议。

1. 动画与尺寸控制
- Animate to Auto：首度支持从固定数值过渡到 `auto`、`min-content` 等关键字，解决了长久以来无法动画到内在高度的问题。
- field-sizing：表单元素可根据内容自动扩展，高度自适应不再依赖 JS。

2. HTML 与交互增强
- Popovers & Invokers：新增 `popover` 和 `invoker` 属性，原生支持弹出层及控制呼叫，提升可访问性与无 JS 支持的友好性。
- Custom Selects：允许开发者完全自定义 `<select>` 的 UI，不再局限于操作系统原生样式。

3. 函数与逻辑能力
- @function：允许开发者在 CSS 内自定义函数，提升逻辑复用与避免重复代码。
- if()：原生条件语法，类似 `switch`，用于条件性的样式应用。
- linear() easing：支持更复杂的动画缓动效果，可实现多点定义的动态曲线，而非仅限于 `cubic-bezier()`。
- shape()：改良版路径函数，用 CSS 单位定义 `clip-path`、`offset-path` 等，实现复杂图形与路径动画。
- random()（预览特性）：Safari 已支持，用于随机化样式值（实验性）。

4. 属性与排版优化
- text-wrap：新增 `balance`、`pretty`，提升文字换行的美观性与可读性，特别优化标题与段落排版。
- 增强的 attr()：可将 HTML 属性值解析为数字、颜色等数据类型，提升数据驱动的 CSS 表达能力。
- reading-flow：重新映射视觉顺序与键盘导航顺序，避免因布局重排导致的 Tab 键焦点错乱。

5. 值得关注的趋势
- Masonry 布局：提案逐步接近规范化，用于实现瀑布流布局。
- margin-trim：Safari 首发，期待跨浏览器可用。
- sibling-index() / sibling-count()：有助于顺序动画和灵活选择。
- View Transitions：Firefox 正在实现，进一步统一页面过渡体验。
- calc() 扩展：将支持单位间的乘除运算。

6. 经典与延续
- Container queries / container units：继承 `media queries` 的伟大进步。
- :has() 伪类：极大强化选择器能力。
- 滚动驱动动画 / Anchor Positioning / View Transition：现代 CSS 交互特性逐步进入主流支持。
- 额外视口单位（如 dvh） 已进入 baseline。

Frontendmasters

What You Need to Know about Modern CSS (2025 Edition)

If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.