-webkit-font-smoothing 是 WebKit 浏览器属性，本文中被设为 antialiased 以启用灰度抗锯齿。该设置可减少文字重量和模糊感，解决 Figma 与网页的渲染差异。它仅在 Mac 上起作用，需配合另一属性使用，对细字重小字号需注意避免过淡。

-moz-osx-font-smoothing 是 Firefox 在 Mac 上的属性，本文中设为 grayscale 以切换灰度抗锯齿。文章说明它与 WebKit 属性配合，能让文字渲染更清晰轻盈，接近设计稿效果。该属性同样仅限 Mac，对 Windows 用户无效。

CSS 在本文中用于覆盖浏览器默认字体渲染，通过四行全局规则切换抗锯齿方式。文章给出具体代码示例，说明该方法能修正次像素带来的过重效果，使网页文字更轻、更接近设计意图。仅 Mac 平台有效，Windows 仍保持原有渲染。

文章提到社区早期方案使用 SVG backdrop-filter，仅在 Chromium 中有效，Safari 与 Firefox 均不支持。作者最终放弃该方案，转而采用自研的跨浏览器技术。

文章中 CSS clamp() 用于定义流体尺寸的最小值、首选值与最大值，例如 clamp(1rem, 1rem + 2cqw, 2rem)。首选值随容器宽度变化，实现响应式字体或布局，但结果常为非整数。round() 常与其配合使用，将最终值约束到固定步长，提升可预测性。

本文作者 Ahmad Shadeed 通过卡片组件、字体排版和线条对齐等实例，演示 round() 如何让 clamp() 产生的流体值按固定步长取整。他还提供了交互式演示，方便读者调整模式与间隔并观察结果。

cqw 是容器查询宽度单位，文中用于 clamp() 的流体表达式，如 1rem + 2cqw 或 1rem + 5cqw，使尺寸随容器宽度百分比变化。单独使用时计算结果易出现小数，影响视觉一致性。结合 round() 后可将 cqw 驱动的值对齐到指定像素间隔，实现更规律的响应式效果。

本文中 Fluid Sizing 指使用 clamp() 结合容器查询单位实现随容器尺寸变化的响应式尺寸，如字体或宽度随 cqw 动态调整。但直接使用时计算值常出现 19.7px 等不规则数字，导致排版和间距缺乏节奏感。文章提出通过 round() 将这些值对齐到固定步长，从而获得更可预测的流体尺寸效果。

本文核心介绍 round() 函数，用于将 clamp() 计算出的流体值按指定步长向上、向下或就近取整。参数包括模式（up/down/nearest）、待取整值与间隔（如 4px）。实际应用中可让字体、卡片宽度或高度对齐到 4px、8px 等规律数值，解决流体尺寸不一致问题，适用于排版与网格对齐场景。

本文通过 container-type: inline-size 启用容器查询，让子元素尺寸基于父容器而非视口计算。配合 cqw 单位，clamp() 可实现组件级流体排版。round() 进一步将容器查询产生的浮点值取整，保证卡片标题或网格元素在不同容器宽度下保持一致节奏。

文章最后推荐作者 Ahmad Shadeed 的互动课程 The Layout Maestro，称其帮助学习者建立 CSS 布局的核心心智模型，并附有课程落地页截图作为宣传。

本文介绍 calc-size() 用于解决 CSS Grid 场景下 round() 无法获取真实元素高度的问题。通过 calc-size(auto, round(up, size, var(--base))) 写法，可将卡片高度向上取整到最近的基准值，实现上下边缘对齐线条的效果。

本文在讨论多卡片编辑布局时提到 CSS Grid，当使用 round() 配合 100% 对元素高度取值时，grid item 的实际高度小于卡片本身，导致无法正确对齐到背景线条。文章通过示意图指出这一限制，并提出后续解决方案。

作者直接复制 Tailwind 的 preflight 样式作为 reset，包括 box-sizing: border-box 和 html 的 line-height 设置。长期使用后已形成依赖，切换时需要适应这些默认行为。Reset 被视为从 Tailwind 继承的系统之一，用于为后续组件和布局提供一致的基础。

本文中 CSS-Tricks 是 Julia Evans 参考的重要来源之一。她特别提到该站刊登的《A responsive grid layout with no media queries》一文，为她用 CSS Grid 实现无需媒体查询的响应式布局提供了灵感。她在文章结尾感谢包括 CSS-Tricks 在内的社区资源，帮助她更好地组织 CSS 代码。

作者将多个站点从Tailwind迁移至vanilla CSS，采用组件化文件组织、根变量定义字体规模，并用auto-fit网格实现无需媒体查询的响应式布局。相比Tailwind的实用类方式，这种原生方法提供了更大自由度，但需要自己建立重置、间距和基础样式等系统来维持一致性。

本文作者 Julia Evans 分享了自己将多个站点从 Tailwind 迁移到语义化 HTML 加原生 CSS 的过程。八年前她因缺乏结构化 CSS 经验而选择 Tailwind，如今她重新实现 reset、组件隔离、颜色系统、字体规模、工具类等 Tailwind 曾提供的体系，同时探索 grid 布局和 esbuild 构建。她还提到受多篇博客启发，决定认真对待 CSS 本身而非依赖工具。

本文提到@scope作为实现组件样式隔离的现代CSS特性，作者目前主要依靠命名约定而非@scope规则来防止组件间CSS互相影响。她表示对该特性的示例用法感兴趣，希望未来能用它进一步强化组件边界的可靠性。

本文中 Smashing Magazine 被 Julia Evans 列为 CSS 学习的重要参考。她在迁移 Tailwind 的过程中阅读了大量来自该站的文章，并将其与 CSS-Tricks 等资源共同视为社区分享实践的代表。这些阅读帮助她建立 reset、组件、间距等结构化规则，推动她从工具依赖转向对原生 CSS 的深入理解。

文章引用《A whole cascade of layers》等博文，将CSS Cascade Layers视为组织代码的灵感。作者计划用层级区分reset、组件、工具类和基础样式等不同部分，让各系统独立管理，避免样式冲突，同时保留Tailwind曾提供的清晰结构。

本文中 Container Queries 是 Julia Evans 在 CSS 重构后列出的待学特性之一。她在文章结尾提到自己对这一功能感到好奇，希望未来能用它实现更灵活的组件级响应式布局。这与她目前尝试用 grid 减少媒体查询的做法形成呼应，反映出她从 Tailwind 转向原生 CSS 后，对现代 CSS 新特性的持续探索。

文章核心是作者学习结构化CSS的过程，从Tailwind转向按组件拆分文件、使用嵌套选择器、CSS变量管理字体与颜色，并通过网格和owl选择器处理间距与响应式。她强调每种关注点都需要明确规则，否则容易陷入混乱，同时表达了对@layer和container queries等新特性的兴趣。

本文把 Subgrid 列为 Julia Evans 未来想深入学习的 CSS 特性。她在讨论响应式设计时，分享了自己使用 grid-template-areas 和 auto-fit 的经验，并表示 Subgrid 是下一步值得尝试的功能。这体现了她希望借助原生 CSS 的高级网格能力，解决 Tailwind 难以实现或不够灵活的布局场景。

文章中作者在响应式设计部分转向使用 CSS Grid 来构建更灵活的布局，减少对媒体查询的依赖。通过 auto-fit 和 minmax 实现大屏两列小屏一列的自适应效果，同时大量运用 grid-template-areas 来组织内容区域。这种做法在 Tailwind 中难以实现，成为脱离 Tailwind 后探索现代 CSS 能力的重要实践。

本文中Tailwind CSS是作者八年前因缺乏CSS组织经验而选择的工具，帮助她快速制作多个小型网站。迁移时她复制了其preflight重置样式、颜色调色板和字体规模等系统，但指出新版本必须依赖构建工具、文件体积达2.8MB，并限制了高级CSS特性如网格布局的灵活使用。

利用 Hershey 字体已拆分为多段笔画的特点，文章通过控制 stroke-dashoffset 依次驱动各段动画，并添加平滑连接过渡，实现类似手写的连续书写效果，动画时长与缓动均可自定义。

本文引用 Evil Martians 博客“How to Favicon in 2026”一文，说明现代 favicon 仅需少量文件即可满足主流需求，作为技术背景引入。

本文指出过去需要多个 favicon 文件的混乱局面已结束，现在 handful 文件即可满足需求。重点讨论了使用单个 SVG 作为 favicon 的方法，它既解决分辨率问题，又能通过内部媒体查询适配主题偏好。作者以 nn1.dev 网站为例演示实际效果，并对比三款浏览器的渲染差异。

本文作者 Pawel Grzybek 在自己组织的 nn1.dev meetup 网站实践了 SVG favicon 主题适配方案，通过多浏览器截图展示差异，并主动提交 WebKit bug 推动问题解决。

本文将 prefers-color-scheme 媒体查询直接写在 SVG favicon 的 style 标签内，用于检测用户暗色模式偏好并切换背景色。示例代码显示亮色模式下 fill 为 #ffffff，暗色模式下变为 #000000。该特性理论上让 favicon 自动跟随系统外观，但实际取决于浏览器支持程度。

本文测试显示 Google Chrome 支持 SVG favicon 中的主题媒体查询，但切换系统外观后必须刷新页面才能生效新样式。在 nn1.dev 网站的预览图顶部可见其表现。作者认为对普通用户而言刷新问题可接受，但仍不如即时响应理想。

文章在 SVG favicon 内部使用 Media Queries 结合 prefers-color-scheme 实现主题适配。Google Chrome 和 Firefox 均能正确响应查询并改变图标颜色，而 Safari 则完全忽略这些覆盖，仅渲染基础样式。作者已向 WebKit 提交相关 bug 报告，指出这影响了“it just works”的体验。

本文通过 Chrome、Firefox 与 Safari 的实机对比指出，Safari 无法在 SVG favicon 中响应 prefers-color-scheme 媒体查询，仅渲染基础版本而忽略用户系统主题偏好。作者在 nn1.dev 网站实践后确认该限制，并提交了 WebKit 相关 bug 报告。

本文指出 Firefox 在 SVG favicon 主题适配上表现最佳，能立即响应 prefers-color-scheme 变化，无需刷新即可更新图标颜色。预览图中间部分展示了其效果，作者称其为三款浏览器中实现最完善的方案。该特性让 favicon 真正跟随用户偏好动态调整。

本文中[[CSS]]承担了DOOM全部渲染工作，包括3D定位、纹理对齐、动画过渡和滤镜效果。项目将原始WAD几何数据转为自定义属性，由CSS引擎完成三角函数计算与场景更新，展示了现代CSS处理复杂3D场景的能力。

本文中[[CSS Math Functions]]包括hypot()、atan2()、sin()和cos()，直接在CSS中计算墙壁宽度、旋转角度及观察者模式相机偏移。JavaScript仅传入原始DOOM坐标，剩余数学运算交由CSS引擎完成，实现渲染与逻辑分离。

针对纯 CSS 剔除问题，作者采用 type grinding 技巧：创建暂停动画切换 visibility，再用 calc 出的 0/1 值设置负 animation-delay，使元素在视锥外自动隐藏，待 if() 普及后可替换。

作者发现 Safari 中对 3D 定位元素同时使用 @starting-style 的 opacity 过渡与 display:none 时，过渡会持续反复触发，成为项目遇到的浏览器兼容性问题之一。

本文中[[clip-path]]配合polygon()和path()将矩形div裁剪成DOOM任意多边形扇区形状，支持evenodd规则处理平台与孔洞。部分地板还使用shape()函数在百分比坐标系中实现复杂边界与内部挖空。

文章提到 Safari 的 View Transitions API 在过渡时会把 preserve-3d 的 3D 场景捕获为 2D 快照，导致整个 DOOM 世界在切换瞬间完全扁平，作者已准备提交 bug 报告。

本文中 CSS Anchor Positioning 用于将武器精灵和触控按钮锚定到状态栏顶部，使其随状态栏因 flex-wrap 产生的高度变化自动调整位置，实现响应式 HUD 布局，无需 JavaScript 干预坐标计算。

本文中[[DOOM]]指通过数千个div元素在浏览器中完整3D渲染的经典游戏。每个墙壁、地板、敌人和道具均由CSS处理视觉呈现，JavaScript仅运行游戏循环并更新自定义属性，实现了无需Canvas或WebGL的可玩第一人称视角。

本文中[[CSS 3D Transforms]]用于把DOOM地图顶点和扇区转化为3D空间中的div。通过translate3d、rotateY和rotateX将世界坐标映射到CSS坐标系，并反向移动整个场景来模拟玩家视角移动。

本文利用 SVG Filters 实现 spectre 怪物的隐身效果，通过 CSS 引用包含 feColorMatrix、feTurbulence 和 feDisplacementMap 的滤镜，生成黑色剪影与噪声扭曲的半透明闪烁轮廓。

本文中[[@property]]用于注册--player-z、--light等自定义属性，使其支持CSS过渡与关键帧动画。门开关、升降机升降、灯光闪烁和玩家坠落均可由CSS平滑处理，无需JavaScript每帧更新对应值。

Niels Leenheer 为本文作者，他从 WAD 文件提取地图数据，构建了完全由 CSS 3D 变换渲染的 DOOM 游戏，代码已开源至 GitHub，旨在测试现代 CSS 的 trig 函数、@property 和 anchor positioning 等特性极限。

本文指出 CSS if() 可直接根据计算数值条件设置 visibility，从而优雅解决剔除问题，但目前仅 Chrome 支持，Safari 与其他浏览器尚未实现。

本文中 CSS 3D Transforms 使用 perspective(800px) 配合 rotateX 与 rotateY 实现随指针移动的手机倾斜效果。transformStyle: preserve-3d 保持子元素深度关系，willChange 提示 GPU 加速。倾斜值同时驱动边缘阴影与反光位置偏移。

本文中 CSS Gradients 分别创建金属斜面（135° 线性）、相机镜头径向光影，以及屏幕尖锐对角反光与柔和环境光洗。渐变中心偏移至 35% 或 40% 位置模拟固定光源角度。负定位 oversized 渐变确保倾斜时反光不露边。

第 5 层 3D 倾斜效果中，文章使用 transform-style: preserve-3d 让子元素继承 3D 渲染上下文。若省略此属性，所有子层会塌陷到同一平面，导致景深与遮挡关系失效，无法呈现真实的设备旋转效果。

本文中 CSS 通过六层嵌套 div 结构构建 iPhone 模拟器视觉效果，分别负责金属斜面、暗色机身、屏幕裁剪、玻璃反光和动态阴影。使用 padding、borderRadius 比例计算及多重属性叠加模拟真实光影与深度。最终与交互逻辑结合形成可感知的实体外观。

本文中 box-shadow 通过九层不同模糊半径与透明度的堆叠模拟自然环境阴影，避免单一阴影的锐利边缘。同时用于屏幕内嵌深度环，以及倾斜时产生的实体边缘挤出效果。所有阴影与渐变共同构成光影层次。

在第 5 层鼠标响应 3D 倾斜实现中，文章对容器元素设置 will-change: transform，作为 GPU 提示提前创建独立合成层，避免首次移动时触发重绘，从而让倾斜动画更流畅。

本文指出 text-wrap: pretty 能避免段落末尾出现孤立单词，使文字更连贯自然。该属性比 balance 更适合正文段落，效果较为微妙。作者对比了普通换行与使用该属性后的差异，建议在段落中使用以提升阅读体验。

文章说明 CSS Keyframe Animations 按固定时间线运行，无法中途重定向，适合一次性序列动画。作者给出规则：交互用 Transitions， staged 序列用 Keyframe。实验中快速切换可明显感受到两者差异。

本文说明 Tailwind CSS 可通过 antialiased 和 tabular-nums 等工具类快速应用字体平滑与等宽数字效果。作者建议将 antialiased 添加到全局布局，使所有文本更清晰；tabular-nums 则用于数字更新时保持对齐。这些实用类帮助快速落地界面细节优化。

文章推荐用多层 box-shadow 替代 border，能在浅色模式下营造深度且适应任意背景。示例 shadow 由三层组成：1px 边框、-1px 模糊、2px 投影，hover 时颜色略深。作者指出纯色 border 在复杂背景上易失效，而 shadow 更灵活。

本文中 font-variant-numeric 通过 tabular-nums 值让数字等宽，避免动态更新时出现跳动。示例演示了数字从 1000 增长的过程，效果清晰。需注意 Inter 等字体启用后数字形态会发生变化，适合计数器、价格等场景。

本文对比指出 CSS Transitions 可随时打断并朝最新状态插值，适合交互反馈。用户快速点击时过渡能立即响应新指令，而不会继续执行旧动画。作者建议将它用于下拉菜单、开关等需要中断的场景。

本文介绍 text-wrap: balance 可让标题文字在各行均匀分布，避免单行过长或过短，从而提升标题的可读性和视觉平衡。该属性特别适合短标题场景，与普通换行相比能让界面显得更精致自然。作者通过对比示例展示其在固定宽度下的效果，强调这是快速改善文本排版的小细节。

本文指出在 macOS 上设置 -webkit-font-smoothing: antialiased 可让文字渲染更细腻清晰，避免默认次像素抗锯齿导致的偏重效果。作者推荐将其应用到整个 HTML 布局中，让所有文本元素受益。该调整属于让界面文字观感更专业的微小改进。

Una Kravets 是本文作者，她构建了多个 border-shape 应用 demo，如基于变量的 tooltip 形状计算器和 chevron 导航样式。文章中她对比了 border-shape 与 corner-shape 的差异，并展示了如何结合 anchored container queries 实现动态效果。她还分享了早期 Houdini scalloped 边框的迁移思路。

本文中 Interop 2026 指包含 shape() CSS 函数的互操作性项目。该函数可直接在 CSS 中绘制复杂路径，是 border-shape 属性支持的核心能力之一。文章指出 shape() 已纳入 Interop 2026，推动非矩形边框在 Chrome 等浏览器中的标准化实现。

corner-shape 已登陆 Chrome，用于调整元素四个角的样式，提供浏览器内置的简单形状选项。它属于同一 Level 4 规范，但仅限于角部处理，无法实现中间切口、凸出或星形等复杂非标准形状。作者建议复杂场景改用 border-shape。

border-shape 和 corner-shape 均属于 CSS Borders and Box Decorations Module Level 4 规范。该规范定义了更丰富的边框几何能力，让开发者能用统一语法控制边框形状，而非依赖旧有 hack。

文章指出，过去创建非矩形形状（如气泡或心形）通常依赖 clip-path 裁剪元素边框。但这种方式只是遮罩，并非真正改变盒子几何，导致边框、阴影等无法自然跟随新形状。border-shape 被视为更优的替代方案。

本文提到作者早期用 CSS Houdini 实现的 scalloped 边框 demo，如今可通过 border-shape 的 shape() 直接复现。Houdini 示例包含大量 arc 命令和 content-box 坐标，border-shape 使其不再依赖 Houdini 的复杂 API。文章以此说明新属性对复杂边框的简化作用。

shape() 是 border-shape 支持的一种强大新函数，用于在 CSS 中直接绘制复杂路径。它也是 Interop 2026 的内容之一。文章中用于实现工具提示箭头、V 形导航和扇形边框等效果，语法类似 SVG 路径但更灵活。

本文介绍的 border-shape 是即将推出的 CSS 属性，用于自定义元素边框的几何形状。它能重新定义盒子本身，使背景、边框图片、阴影和轮廓都跟随新几何形状。与 clip-path 不同，它不会单纯遮罩元素，而是真正改变边框结构。目前可在 Chrome Canary 146+ 的实验标志下测试，支持 shape()、基本形状和路径字符串。

本文中 Anchored Container Queries 用于根据 anchor 位置动态调整 border-shape 的动画效果。在 tooltip demo 中，它使边框形状随锚点变化而更新，无需额外 JavaScript。文章强调该组合让非矩形元素在响应式场景下保持几何一致性。

本文示例将 Tailwind CSS 作为 docs-agent 需了解的精确技术栈之一，与 React 18、Vite 并列。文章通过此例说明，agents.md 中提供具体依赖能提升 Agent 输出的一致性。

本文中 Safari 通过 macOS 系统设置的 App Shortcuts 功能自定义快捷键，将 Ctrl+Shift+左右箭头映射为「Show Previous Tab」和「Show Next Tab」，实现拇指滚轮切换标签页。需确保菜单标题与 Window 菜单中的名称完全一致。此方法同样适用于 Finder 等系统应用。

本文说明每个像素由红、绿、蓝三个 0-255 的数值组成，代表颜色混合比例。一张 1920×1080 的图像因此包含超过 200 万像素，原始存储需要约 6.2MB，这是后续讨论压缩必要性的起点。

本文说明CSS用于定义字体加载和主题覆盖，通过@font-face引入自定义字体即可启用高亮。文中展示了对CSS选择器、属性值、函数（如rgb()）的识别规则，并支持用override-colors调整配色，同时指出该方法无需CSS主题文件即可工作。

Safari 在文中作为 macOS Tahoe 的应用示例，作者截取其“Safari”“文件”“查看”菜单，显示图标添加不一致：部分菜单项有图标，部分没有，同组的“设置”与“隐私报告”处理方式不同。作者质疑选择逻辑，并指出同时存在切换标记和图标时的视觉混乱。

本文中 Safari 作为基准测试平台之一，测量了其对 Base64 数据的处理吞吐量。它采用 JavaScriptCore 引擎执行相关 JavaScript 代码，测试结果显示其在桌面与移动设备上的解码速度，并与 Firefox 等浏览器形成直接对比，体现了 WebKit 引擎在 Base64 场景下的实际表现。

文章提到 Tailwind 的独立 CLI 工具采用 Bun 构建，作为 Bun v1.2 版本后生产环境落地的案例之一，体现了 Bun 在实际项目中的应用价值。

本文指出 :where() 与 :is() 和 :not() 规则一致，伪元素不能放在其内部。因为这类伪类的作用是为元素添加匹配条件，而非直接选中伪元素本身。

本文「更多 CSS 技巧」部分提及，corner-shape 可与现代 CSS 功能结合，用于创建 3D 盒子效果，是相关技巧的主题之一。

本文仅在文末相关技巧链接中提及 Media Queries，指出可借助现代 CSS 的 if() 等特性以不同于传统方式表达媒体查询。该提及出现在“Dynamic media/container queries using if()”的简短描述中，与本文核心的 :is() 选择器解析无关，未提供具体语法或示例。

本文仅在文末相关技巧链接中提及 Container Queries，指出可借助现代 CSS 的 if() 等特性以不同于传统方式表达容器查询。该提及出现在“Dynamic media/container queries using if()”的简短描述中，与本文核心的 :is() 选择器解析无关，未提供具体语法或示例。

本文作者，在 css-tip.com 发布此文，解释 :is() 伪类为何无法与 ::before、::after 结合使用，并给出正确的选择器阅读方式。

本文提到CSS :not()与:is()遵循相同限制，即伪元素同样不能作为其参数。文章在结尾指出这一规则也适用于:not()和:where()，以避免出现逻辑矛盾的选择器写法。

本文「更多 CSS 技巧」中提到，sibling-index() 与 if() 搭配，可实现对特定范围元素的选中，是范围选择技巧的核心。

本文用::after与::before并列展示同一问题。作者指出:is(::before,::after)无法选中按钮的伪元素，因为该伪类的作用是为元素添加“是否匹配内部条件”的判断，而非直接选中伪元素本身。

本文中的CSS指用于编写网页样式的层叠样式表语言。文章通过具体选择器示例，说明CSS中功能伪类的解析方式，以及它与伪元素结合时的限制。重点解释了为何某些看似合理的简写写法在实际渲染中无法生效。

本文推荐的相关技巧中，if() 用于实现范围选择以及动态媒体查询和容器查询，属于现代 CSS 功能应用案例。

本文中的CSS :is()是用于合并多个选择器的功能伪类，例如把.container button.large和.container button.small简写为.container button:is(.large,.small)。文章指出该伪类会为元素添加匹配条件，而非简单展开选择器，因此不能接受::before或::after等伪元素作为参数，导致button:is(::before,::after)无效。

本文以::before为例说明伪元素不能放在:is()内。尝试使用.container button:is(::before,::after)来同时选中按钮的两个伪元素时会失败，因为:is()要求按钮元素本身匹配内部选择器，而按钮无法成为伪元素。

本文讨论的CSS Pseudo-elements主要指::before和::after。它们无法作为:is()的参数，因为:is()的匹配逻辑要求目标本身是元素，而非伪元素。文章通过对比普通类选择器与伪元素用法的区别，说明这种限制源于伪类的条件添加机制，而非简单语法展开。

文章在讨论 AI hand-off 时提到，Figma dev mode 输出的 Tailwind 描述较适合 AI 处理，但需额外付费，Paper 则通过更详细的 React 代码导出尝试提升代码兼容度。

-apple-visual-effect 是 Apple 自定义的私有 CSS 属性，可在 iOS 网页内容中启用 Liquid Glass 及标准模糊材质效果。需在 WKWebView 开启私有设置后才能工作，文章展示了使用该属性并通过 @supports 规则提供回退样式的代码示例，但强调其无法公开使用。

文章大量使用:has()选择器实现父元素根据子元素状态（如:checked、:focus-visible）动态调整样式，用于主题切换器、标签页切换和输入验证反馈；作者强调必须将其放在body或具体容器上使用，避免单独:has()导致全页性能问题，展示了其在纯CSS交互中的核心作用。

本文将 Tailwind CSS 与 Sass 并列，指出它们曾是应对早期 CSS 书写痛苦的方案。作者认为过去几年原生 CSS 已通过多项新特性大幅改善书写体验，不再需要依赖这类工具。文章主题强调现代 CSS 足以替代许多 JavaScript 实现，Tailwind 仅作为历史背景被提及，未展开其具体用法或优势对比。

本文简要提及BEM作为CSS命名方法论的备选方案，尤其当开发者不习惯嵌套语法时可阅读其文档；作者个人并不偏好BEM，但认为它能帮助组织复杂样式，避免过度依赖父子选择器嵌套，是现代CSS写作的另一种思路。

文章提到Sass曾因早期CSS编写困难而流行，但如今CSS已原生支持嵌套、相对颜色等特性，大幅降低了对Sass等预处理器的需求，使样式代码更易维护和阅读。

文章在讨论 body 内放置 style 标签时指出，规范禁止此做法主要是为了避免 FOUC（无样式内容闪现）。作者认为虽然存在风险，但实际使用中收益更大，建议验证器仅警告而非报错。这一观点服务于全文提倡的现代 CSS 实践与性能优化主题。

文章以详细前后代码对比展示 CSS Nesting 如何让多层选择器书写更直观，所有相关样式集中在一起，减少了需记忆父子关系的负担。作者称其为最喜爱的改进之一，能支持更短的类名并改善可读性。该特性自 2023 年 12 月起获所有浏览器完全支持，已成为 Baseline 广泛可用特性，契合全文“无需 JavaScript”的核心观点。

文章核心主题是现代CSS已足够强大，可实现过去依赖JavaScript的功能，如嵌套语法、相对颜色、@starting-style动画、:has选择器和响应式视口单位。强调CSS性能更优（独立合成线程）、无障碍性更好，且Baseline确保跨浏览器兼容，减少对预处理器的依赖。

本文指出传统vw/vh在移动端因地址栏隐藏而产生歧义，可能导致按钮被遮挡或背景不全；推荐改用lvh（最大视口）、svh（最小视口）和dvh（动态视口）单位，分别适用于全屏背景、固定屏幕元素和随滚动变化的场景，并给出实际数值对比表格说明差异。

本文中color-scheme属性被设置为light dark，告知浏览器根据用户系统偏好自动切换明暗主题；它还能通过:has()伪类被JavaScript或手动radio按钮覆盖，实现用户自定义主题选择；同时该属性会自动为原生按钮、表单和滚动条应用对应主题样式，无需额外脚本。

文中通过 hsl(from var(--like-color) ...) 示例说明相对颜色可在多种色彩空间中直接修改现有颜色，用于实现按钮悬停、边框等细微变化，无需 JavaScript 转换。作者指出这比在 JS 中处理颜色转换更简洁，还可用于生成整个配色方案。相关示例与 Nesting 结合展示，强化了现代 CSS 书写便利性的主题。

本文演示light-dark()函数配合color-scheme使用，为同一CSS变量在明暗模式下提供不同值，如--text: light-dark(#000, #FFF)；它简化了主题变量定义，同时让原生组件颜色自动适配，文章将其作为无需JavaScript的现代主题实现方式之一。

文章将 color-mix() 作为相对颜色功能的一部分，展示其在 oklab 等空间混合两种颜色的用法，例如 color-mix(in oklab, #8CFFDB, #04593B 25%)。此功能用于创建悬停效果或配套颜色，免去 JS 计算。作者强调这类原生特性让 CSS 能独立完成过去需预处理器或脚本的任务，服务于“无需 JavaScript”的论点。

文章详细介绍 @starting-style 规则如何简化元素入场动画（如淡入、位移），只需在规则内声明初始状态并配合 transition，无需 JS 插入元素后延迟加类或单独 @keyframes。示例展示 toast 组件的实现，强调其“开箱即用”的特性。该规则被列为现代 CSS 让动画更易实现的代表，直接支持全文减少 JavaScript 依赖的主张。

本文揭示苹果新增私有 CSS 属性 -apple-visual-effect，支持在网页内容中直接应用 iOS 26 的液态玻璃材质及各标准模糊材质。作者通过 @supports 规则展示如何为支持与不支持的系统分别提供样式，方便 webview 与原生界面融合。

CSS 在文中用于将 SVG 滤镜应用到界面元素，特别是 backdrop-filter 属性实现背景实时折射。文章展示了如何通过 CSS 控制 scale 等参数，并构建可交互的玻璃面板组件，强调目前仅 Chrome 支持该用法。

本文将 backdrop-filter 作为把 SVG 位移滤镜应用到界面元素的关键属性，实现液态玻璃的实时折射效果。仅 Chrome 支持把 SVG 滤镜用于 backdrop-filter，因此文中所有可交互玻璃面板组件均为 Chrome 专用。作者指出该属性让位移贴图能直接作用于元素背后内容，是把数学折射计算真正落地到 UI 的最后一步。

本文介绍 contents 作为 will-change 的值时，告知浏览器容器内部内容会频繁更新，但外层容器本身位置不变。示例结合 virtual-list 与 contain: content 使用，适合虚拟滚动列表等场景，可减少不必要的合成层创建和内存开销，提升整体渲染效率。

本文将布局定义为渲染第一步，由CPU完成，确定所有盒子的大小和位置。针对transform等属性的will-change可让浏览器跳过此阶段，直接进入GPU合成，从而实现更平滑的动画效果。

transform 是本文重点提及的合成友好属性，适合用 will-change 提前提示浏览器。动画 transform 时可跳过布局与绘制阶段，直接由 GPU 合成。文章示例中，提前声明 will-change: transform 可消除首次悬停时的轻微卡顿。

本文围绕CSS的will-change属性展开，说明它作为浏览器提示可预告即将动画的属性。正确使用时能让浏览器提前优化渲染流程，避免动画首帧卡顿，同时减少CPU占用。过度使用则会因创建额外图层而消耗更多内存。

Compositing 是渲染的最后一步，浏览器将已绘制的图层交给 GPU 进行叠加与显示。此阶段 GPU 负责处理位置、透明度等变化。若动画属性友好，浏览器可跳过布局与绘制，直接在合成阶段完成动画，从而提升性能。

opacity 与 transform 同属合成友好属性，动画时浏览器可直接在 GPU 合成阶段处理。本文建议对即将改变的 opacity 使用 will-change，以便浏览器预分配资源，避免动画初期出现意外抖动或延迟。

本文介绍will-change是CSS属性，用于向浏览器提示即将改变的属性如transform或opacity。浏览器可能据此将元素提前提升为独立合成层，在空闲时预分配资源，从而让悬停动画从第一帧就保持流畅。Safari对此提示反应最明显，但需指定具体属性且仅用于真正会动画的元素，否则会浪费内存。

Compositing Layer 指元素被提升到独立 GPU 图层后进行渲染。本文指出，will-change 可促使浏览器提前创建该图层，避免动画开始时的卡顿。独立图层能让 transform、opacity 等属性仅通过 GPU 合成完成，避免重复绘制。

本文说明 scroll-position 可作为 will-change 的值，用于提示浏览器仅滚动偏移即将变化。示例中应用于 parallax-wrapper（设置 overflow: auto），能让浏览器在空闲时预分配资源，使滚动动画从第一帧起就平滑，避免布局或绘制阶段的延迟。

filter（如 blur、brightness）是本文列出的少数真正受益于 will-change 的属性。现代浏览器对这类滤镜支持较好，可在 GPU 合成阶段完成变化，无需重新绘制。使用时应明确指定，避免使用 will-change: all 造成内存浪费。

本文中 Paint 是浏览器渲染流程的第二步，主要负责为元素填充像素、颜色、边框与阴影等内容。该步骤主要使用 CPU，并会占用额外内存存储绘制结果。若动画仅涉及 transform 或 opacity 等属性，可跳过此阶段，直接进入 GPU 合成。

文章指出Safari在缺少will-change时，动画元素会出现字符和图标的意外移动，问题尤为突出。它对合成层提升的处理较慢，导致动画初期出现卡顿或抖动，而添加will-change后该现象明显改善。

本文指出 mask 是 will-change 的推荐属性，浏览器能较好地在 GPU 合成层上处理遮罩动画，无需重新绘制像素。这有助于在复杂滤镜或透明效果的过渡中保持帧率稳定，避免因 will-change 缺失而出现的意外抖动。

本文将 clip-path 列为 will-change 的有效属性之一。现代浏览器对 clip-path 支持较好，可让 GPU 在合成阶段直接处理裁剪动画，而无需触发重绘，从而减少动画初期的卡顿并降低 CPU 负担。它与 transform、opacity 等属性并列，适合需要流畅视觉裁剪效果的场景。

文中 CSS 主要用来管理 OKLCH 颜色变量与动态样式。通过 --theme-l、--theme-c、--theme-h 三个自定义属性，配合 calc() 分别为控件生成高对比色、在调试模式下降低触手像素的饱和度与亮度，实现颜色主题的灵活复用与修改。

文章选用 OKLCH 色彩空间生成入侵者颜色。通过固定亮度、随机色度与色相的方式，确保每只入侵者颜色明暗一致且鲜艳度相近。代码把 L、C、H 分别存为 CSS 变量，跳过 60-120 度黄褐色区间，并支持后续用 calc 进一步调整。

文章聚焦 CSS 语言新增的 random() 功能，解释其如何在样式表内完成随机布局、颜色和动画，而无需 JavaScript。文中对比了不同随机共享模式，并给出大量实际代码示例，展示 CSS 在动态内容生成方面的扩展能力。

在星空示例中，文章使用 OKLCH 色彩空间配合 random() 为星星生成随机色相的柔和光晕。代码中通过 drop-shadow 层叠白光与彩色光，并结合 hard-light 混合模式，展示了 random() 在色彩设计中的实际应用效果。

本文介绍的 CSS random() 函数采用 random(min, max, step) 语法，可在 CSS 属性中直接生成随机数值，支持长度、百分比、角度等单位。文章通过星空、网格矩形、照片堆叠和转盘等示例展示其在布局、动画和颜色中的应用，并说明命名标识与 element-shared 两种随机值共享方式。目前该函数已在 WebKit 中实现，但规范仍在讨论中。

本文在幸运轮示例中使用CSS Keyframe Animations结合random()。@keyframes中通过random(2turn, 10turn, 20deg)生成最终旋转角度，实现转盘落地位置的不可预测性，展示CSS内随机性与交互动画的完整集成。

本文中shape()用于四角星的clip-path定义。通过指定形状坐标创建星芒轮廓，配合random()控制大小和element-shared旋转角度，使四角星与圆形星星形成对比，增强星空视觉层次。

本文指出 CSS 自定义属性与 random() 结合时，因文本替换特性需使用命名标识（如 --random-star-size）才能复用同一随机值。示例中通过 --star-size 实现星体大小与阴影模糊的联动，解释了为何直接 var() 无法保留随机结果的问题。

本文中CSS Grid用于随机放置矩形示例。通过将页面划分为100行100列的网格，结合random()为grid-area生成随机行列值，实现矩形在网格中的随机定位与色彩变化，展示random()与布局工具的结合。

本文指出 CSS Working Group 正在针对 random() 函数规范展开持续讨论，目前仍有若干开放问题，焦点在于该实现方式是否能最佳满足开发者需求。文章强调 Safari Technology Preview 已支持此功能，但最终规范方向仍需 Web 开发者社区反馈来决定，包括共享随机值表达方式和潜在用例。

预览窗口把用户编写的 CSS 包裹在 .preview 选择器内，利用 CSS 嵌套特性实现样式封装，确保用户样式仅影响预览区域，不会干扰编辑器其他界面元素。

本文中的CSS编辑器使用相同自动建议机制，支持选择器、属性及颜色值补全。用户CSS被封装在.preview样式块内，利用CSS嵌套特性隔离样式。滑动切换到预览窗格即可查看渲染效果，另有复制全部代码功能。

编辑器使用 scroll-snap-type 属性让三个面板（CSS、HTML、预览）在横向滚动时自动吸附对齐，用户左右滑动即可在不同模式间切换，无需额外 JavaScript 控制滚动停止位置。

本文主要使用 CSS 实现文字逐字母淡出模糊效果。通过为每个字符 span 设置 --i 和 --total CSS 变量，再配合 calc() 动态计算 opacity 与 filter: blur，实现从左到右逐渐消失的视觉效果。相比纯手动 nth-child 或 background-clip 渐变方案，这种方式更灵活且可复用于任意 HTML 元素。

在最终实现中与CSS变量配合，用于动态计算每个字符的模糊半径和不透明度。JavaScript为每个字符span注入--i和--total变量后，CSS通过calc()根据索引比例生成filter和opacity值，从而实现平滑的逐字母淡出效果。

用于存储每个字符的索引--i和总数--total，由JavaScript在拆分文本时注入到span元素上。这些变量被后续的calc()引用，实现了无需硬编码就能让CSS按位置计算模糊和透明度的灵活方案。

本文指blur滤镜，与opacity一起应用在每个字符span上。通过CSS变量和calc()根据字符位置动态调整模糊程度，使文字从清晰逐渐变为模糊并淡出，实现文章中的核心视觉效果。

本文将其作为备选方案，用于实现文字渐隐效果：先把文字颜色设为透明，再用线性渐变背景从不透明过渡到半透明，最后通过background-clip: text将背景限制在文字形状内。该方法对段落文字效果较好，但无法实现逐字母的独立控制，因此作者未采用它作为最终方案。

作者最初考虑用 :nth-child() 选择器配合硬编码 span 实现纯 CSS 方案，但因无法灵活处理任意文本长度而放弃，转而采用 JS 动态生成带 CSS 变量的 span 的方式。

Safari stable 对 width、height 的 infinity 值处理结果为 33554428 像素，比 2^25 仅少 3 像素；font-size 上限则达到 100000 像素，高于 Chrome。line-height 测试同样返回相同尺寸限制。文章指出 Safari 的钳位值同样接近但不等于理论最大值，且与 Chrome 共享相似的十进制特征，具体由来不明。

Google Chrome stable 将 width 与 height 的 infinity 值钳位到 33554400 像素，font-size 则限制在 10000 像素，表现出清晰的十进制硬上限。文章对比发现其与 Safari 的限制数值接近但略低，且均未出现 Firefox 那样的异常回落。实验确认 Chrome 对极大 CSS 值的处理相对一致但存在人为设定的上限。

CSS infinity 指 calc() 中使用的 infinity 关键字，本文将其乘以像素单位以探测浏览器对超大值的上限。实验分别在尺寸与字体场景下运行，发现 Safari 和 Chrome 会钳位到接近 2^25 的数值，而 Firefox 则出现 19.2px、3.40282e38 等异常 computed value。文章借此揭示了 infinity 在 CSS 中的实际渲染行为与潜在怪异表现。

calc() 在文中被用来执行 infinity 与 1px 的乘法运算，从而生成极大像素值并应用到尺寸和字体属性。作者通过该函数分别测试了 width、height、font-size 和 line-height，记录了各浏览器返回的 computed value 与实际 layout value。结果显示 calc() 对 infinity 的处理因浏览器而异，暴露了不同引擎的钳位策略。

Firefox Nightly 在测试中对 height: calc(infinity * 1px) 返回 19.2px（默认行高），width 计算值约 17895700 但布局值仅为其一半；font-size 的 computed value 达到 3.40282e38，实际渲染却为 2400px。设置 line-height: 1 后高度才接近预期。文章指出其行为与 Chrome、Safari 差异显著，具体原因尚待引擎开发者解释。

本文作者 Eric Meyer 通过在不同浏览器中应用 infinity 像素值，记录了宽度、高度、字体大小和行高的异常表现，并公开寻求技术解释。

本文通过 CSS 属性测试，探讨了使用 calc(infinity * 1px) 为元素设置理论无限尺寸的可行性。作者将该技巧应用于 div 的 width、height、font-size 和 line-height，以观察浏览器实际渲染上限。实验揭示了 CSS 在处理极端值时的浏览器差异，为理解布局计算边界提供了实测依据。

文章结尾提到，作者计划进一步测试 calc(-infinity) 在 z-index 属性上可能引发的渲染异常情况。

本文中用于色差卡棱镜表现的颜色插值。采用OkLab色空间进行颜色混合，能在保持明度和彩度感知均匀的同时实现自然过渡，提升整体格式的协调感。该处理在Houdini生成的网格顶点着色器中完成。

Chris Lilley 是 PNG 原始共同作者之一，现担任新规范的技术贡献者。本文指出他撰写了专门文章，解释 HDR 支持的具体实现方式。

文章用Tailwind 4.0.0、358kB作为样式库示例，演示当UI完全依赖robo-class时，HTML成为难以辨识的div嵌套。作者指出若同时添加ARIA role，即使使用Tailwind也能让元素职责一目了然，便于远距离理解代码意图。

本文指出使用CSS-in-JS框架时，HTML常因大量 robo-class 变成难以辨识的 div 汤，导致调试时无法快速定位表格行列等结构。作者强调通过语义化 HTML 或 ARIA role，能让元素用途一目了然，从而提升远距离理解代码的能力。

文章重点批评 iOS 26 Safari 标签页预览界面的改版：常用「新建标签页」移至左上角不起眼位置，切换标签页组却放在最易操作的底部，「完成」按钮反而置于右上角最显眼处。整体操作步骤增加，被称为新设计语言的「巅峰之作」。地址栏工具也回归旧布局，部分手势被隐藏。

本文将Rec.2100作为目标HDR显示空间，游戏通过固定函数从FP16线性缓冲转换至此空间。但实测峰值亮度始终停留在约950尼特，即使将主机HDR设置调至10000尼特也无变化。任天堂自带测试图仅达500尼特，表明动态范围和色域均未真正启用，输出更接近SDR拉伸后的伪HDR效果。

本文中 CSS Grid 是 Figma 设计 Auto Layout 时的技术约束依据，导致布局功能仅限于网页可实现的样式。这种限制让 Figma Slides 缺少 Keynote 的文本自动填充容器等演示专用特性，体现了从设计工具扩展到演示领域的困难。

文章明确要求Artifacts仅使用Tailwind核心工具类，因环境中无Tailwind编译器可用。样式限制在预定义的基础样式表类中。

本文提到 Safari 早期解析逻辑有缺陷，要求日期时间偏移字段必须全部存在，后修复并跟随规范改为对 ISO 日期字符串使用 UTC。它与 Chrome、Firefox 一起经历了从 ES5 到 ES7 的解析行为演变，最终保持一致。

本文以 CSS Cascade Layers 为例说明规范从提出到浏览器全面支持的速度：Miriam 于 2019 年 10 月提出，2022 年 3 月已在所有主流浏览器实现。该特性被用来对比 contrast-color() 可能达到的落地周期，强调「从构思到 Baseline 仅需 2 年」的可能性。文章指出此类快速迭代的规范工作为目前用 RCS 模拟对比颜色提供了时间参考。

文章将 OKLCH 作为计算自动对比文本颜色的核心色彩空间，称其是 CSS 支持的最具感知均匀性的极坐标色彩空间。作者基于 OKLCH 的 L（Lightness）分量设定阈值（0.7 或 0.623 等），通过 clamp 与无穷大运算让 L 高于阈值时输出黑色、低于阈值时输出白色。文中给出了在 sRGB、P3、Rec.2020 等不同色域下的实测阈值，并提供可直接用于生产的 CSS 代码片段。

Safari 支持相对颜色语法，与 Chrome 共同构成 RCS 当前的主要用户覆盖。文章指出旧版 Safari 是剩余不支持用户的来源之一。作者强调，只要使用 @supports 检测特性，即可在 Safari 等现代浏览器中安全应用 RCS 模拟的对比色逻辑。

文章附录指出 color-mix() 与 RCS 结合使用时存在浏览器 bug，会导致相对颜色语法失效。目前 Chrome 125 和 Safari TP 已修复该问题。作者提供了两种绕过方法：将 @supports 条件改为检测 color-mix()，或通过 @property 注册颜色自定义属性以确保颜色值被解析后再进入 RCS 计算。

文中把 sRGB 色域作为「现代低端屏幕」的代表范围进行阈值实验，得出在此范围内最高仍能通过 WCAG 的阈值为 65%。作者指出，若仅考虑屏幕实际可显示颜色，可将阈值从 62.3% 提升至 64.5%（P3）甚至更高，从而在合规与可读性之间获得更好权衡。

contrast-color() 是 CSS Color 5 规范中用于自动选择高对比度文本颜色的函数，本文将其作为目标进行模拟。该函数可直接写为 color: contrast-color(var(--color))，解决用户自定义颜色、设计系统或 web 组件中的文本可读性痛点。作者推动了其 MVP 版本进入规范，但预计正式跨浏览器支持仍需数年，因此提出 RCS 模拟方案作为过渡。

作者使用 Color.js 对 OKLCH 参考范围进行系统遍历实验，计算白/黑文本在不同明度下的 APCA 与 WCAG 对比度区间，并生成交互式 playground 供读者验证阈值选取。

本文中 Interop 2024 被列为 Relative Colors（RCS）特性的重点关注领域，旨在推动浏览器实现一致性。文章指出 Firefox 已表达积极的标准化立场，相关 Bugzilla 问题近期有进展并已分配，作者因此乐观预计该特性将很快在 Firefox 128 中落地，从而加速 RCS 的跨浏览器支持。

@supports 用于检测浏览器是否支持 RCS，测试语法如 (color: oklch(from red l c h))。本文在不支持 RCS 的浏览器中提供回退样式，例如使用半透明白色背景加黑色文字，或多层 text-shadow。文章同时用 @supports 实现对 contrast-color() 的“fall forward”，确保未来一旦支持即可自动启用更优方案。

文章把 Oklab 与 OKLCH 并列，视为 Lab/LCH 的改进版感知均匀色彩空间，用于解释为什么单纯比较 Lightness 即可近似判断黑白文本的可读性。文中指出 Oklab/OKLCH 虽不能完全等同于对比度，但与实际可读性存在显著相关性，因此可作为 RCS 方案的数学基础。

本文围绕 CSS 颜色功能展开，讨论如何利用已广泛支持的特性模拟尚未普及的对比度函数，以解决动态背景下的文本可读性问题。文章重点展示了使用 CSS 自定义属性、数学函数和颜色空间操作，实现黑白文本自动切换的方案，并结合 @supports 提供回退，确保在不支持新特性的浏览器中仍能基本可用。

截至 2024 年 5 月，相对颜色语法已在除 Firefox 外的所有浏览器实现。文章指出 Firefox 对 RCS 持积极标准立场，并被列为 Interop 2024 重点，实际于 Firefox 128 发布。这使得 RCS 模拟方法当时已覆盖全球 83% 用户，且剩余不支持用户主要来自旧版 Chrome 与 Safari。

本文将 Display P3 色域作为现代高端屏幕的代表范围进行实验，通过在该色域内迭代 OKLCH 颜色计算黑白文本的最佳切换阈值，最终得出 64.5% 的 L 阈值可在保证 WCAG 合规的前提下提升可读性。

Relative Color Syntax（RCS）允许通过在任意颜色空间中对颜色分量进行数学运算来生成新颜色。本文核心利用它模拟对比文本颜色，构造表达式 --l: clamp(0, (l / var(--l-threshold) - 1) * -infinity, 1)，再应用到 oklch(from var(--color) var(--l) 0 h)。截至 2024 年 5 月，其全球用户覆盖率已达 83%，文章认为可用于生产环境，但需配合 @supports 回退。

本文作者 Lea Verou 设计了相对颜色语法（RCS），并推动 contrast-color() 函数进入 CSS 规范。她提出用已广泛支持的 RCS 特性模拟 contrast-color()，通过 OKLCh Lightness 阈值在黑白文本间切换。文章重点分析了 62.3% 与 70% 两档阈值在 WCAG 合规与实际可读性之间的权衡，并给出完整回退与渐进增强方案。

Google Chrome 支持相对颜色语法，是全球 83% 用户可使用 RCS 的主要来源。文章提到，剩余 17% 不支持用户中，多数来自旧版 Chrome 而非 Firefox。作者建议结合 @supports 提供回退，以便在生产环境中安全使用该模拟方案。

文章把 Rec. 2020 色域视为未来高端屏幕的颜色范围，实验显示在此范围内黑白文本切换的最佳 L 阈值可降至 63.4%，比 sRGB 和 P3 更低，以在更大色域下仍维持 WCAG 合规。

@property 可注册自定义属性 --color，指定 syntax 为 ，从而解决 color-mix() 与 RCS 联用时的浏览器 bug。注册后颜色值会在进入 RCS 前被解析为确定值，避免无效颜色问题。由于 @property 支持范围远大于 RCS，该方案不会降低整体兼容性，适合在生产代码中作为稳健的 workaround 使用。

本文提到 CSS 的兴起促使图像地图使用减少，同时展示如何用 CSS 为 SVG 内锚点设置 opacity 与 transition，实现悬停时的视觉反馈与平滑动画。该用法让旧式图形导航在保持表现力的同时，满足现代交互与响应式需求。

本文中 CSS position: sticky 被 Motion 用于替代 JavaScript pinning，浏览器可原生处理 99% 的固定场景。文章指出此属性能消除一整类因 pinning 产生的 thrashing 操作。相比 GSAP 的 scrollTrigger pinning，Motion 通过该 CSS 特性减少了大量视口与滚动测量。

本文展示了用 CSS 实现跳过链接的隐藏机制。通过 .skip-link:not(:focus):not(:active) 选择器，结合 clip-path、position:absolute 等属性，将链接在视觉上完全隐藏，同时保留键盘和屏幕阅读器可访问性；当链接获得焦点时自动显示。文章还用 CSS 去掉 main 元素被聚焦后的默认轮廓，避免误导用户认为内容区域可交互。整个方案无需 JavaScript，符合 WCAG 2.4.1 要求。

这是文章核心工具，用于创建burst背景。代码示例为repeating-conic-gradient(black 0deg 10deg, #666 10deg 11deg)，通过角度硬停止自动重复形成密集辐射线条，配合径向叠加可调整起始位置。

本文标签中包含 OKLCH，表明文章主题与 CSS 现代色彩空间相关。文中通过重复圆锥渐变演示 burst 背景效果，OKLCH 适合在此类渐变中提供更均匀的色彩过渡和感知一致性。

本文介绍在CSS中使用硬停止点技巧制作爆发状背景。通过渐变函数的颜色切换与重复，可快速生成辐射条纹效果，并结合叠加实现更复杂的视觉图案。文章以实际代码演示了从条纹到burst的实现过程。

文章先以linear-gradient()为例展示硬停止条纹写法，如red 50%, blue 50%，再用background-size重复形成图案，作为后续conic方法的技术铺垫，说明颜色切换而非渐变的原理。

文章建议使用 @property 注册自定义属性，将其插入到 repeating-conic-gradient 定义中，从而实现 burst 背景的动画效果。

文章称其为制作条纹的更合适工具，支持双停止点语法简化代码，如#d84315 0 10px, #fbc02d 10px 20px，自动处理重复，引出conic版本的类似应用思路。

文中用radial-gradient()叠加在conic爆发背景上，使图案从非中心位置开始；还建议通过repeating radial gradient添加透明停止点，模拟Robinhood首页的线条分隔效果。

文章说明conic-gradient()支持硬色标停止点，可生成从中心向外辐射的图案。尽管示例重点使用重复版本，但基础conic-gradient()同样能实现爆发效果，作为linear-gradient()的圆形替代方案。

本文中 CSS 是实现纯图像故障效果的核心技术，无需 JavaScript 即可运行最终版本。作者通过生成多个 div 条带、设置背景定位和随机高度，再叠加 transform 与 filter 动画，模拟图像被切片、位移和色彩扭曲。CSS 变量结合动态生成的 keyframes 让每个条带获得独立动画参数，实现随机且可复用的故障效果。该方案同样适用于任意 HTML 内容。

Safari 对 hue-rotate 动画存在兼容问题：初始值为 none 时无法触发过渡，必须改写为 hue-rotate(0)。作者在关键帧中调整初始状态后解决了该问题，并指出浏览器实现复杂度高，此类小 bug 难以完全避免。

本文提到 CSS Working Group 设计 text-wrap: pretty 的初衷是让浏览器自主提升排版质量，近期已将仅避免孤行的功能独立重命名为 avoid-short-last-lines，以区分不同目标。

本文使用 CSS mask-image 属性将动态 div 区块裁剪成与服务端预渲染的 TOC 轮廓完全一致的形状。通过把 URI 编码后的 SVG 作为遮罩值，结合 transform 与 transition 实现高亮滑块的平滑移动。该技巧复用了“动画导线”章节中的遮罩思路，让高亮部分能随视口滚动而流畅更新。

本文指出 text-wrap: stable 与默认的 auto 行为一致，采用单行优先的传统算法，主要用于可编辑内容或动画文本，以避免编辑或动画过程中文字重排跳动。文章建议在需要保留 1991 年以来首行优先排版逻辑的场景下使用该值，确保内容稳定。

本文对比说明 text-wrap: balance 会让段落或标题中各行长度尽量相等，常用于标题、caption 等短文本，使整体视觉宽度变窄。该属性与 pretty 不同，不会保留容器满宽，而是优先平衡行长。文章指出其不适合长段落，否则会造成各段宽度差异过大，影响排版一致性。

作者使用 CSS Keyframe Animations 为每个图像条带定义位移与色彩动画。通过在 0.1% 间隔内设置极接近的关键帧，实现瞬间 snap 移动而非平滑过渡。每个动画包含两次跳跃，同步改变 transform 与 filter，并随机分配持续时间 5-10 秒与延迟。最终生成的 keyframes 通过 CSS 变量注入随机参数，保证效果不重复。

本文介绍 WebKit 在 Safari Technology Preview 216 中实现的 text-wrap: pretty，它采用多行段落算法对整个段落进行排版，可避免孤立短行、改善参差不齐的右边缘、减少连续连字符，并提升整体可读性。与 Chromium 仅处理末尾四行的有限实现不同，WebKit 版本覆盖全文所有行，效果更显著，但尚未处理 typographic rivers。文章强调其适用于正文主体，且性能影响极小，适合大范围使用。

hue-rotate() 被用于动画中随机偏移图像色相，配合位移强化故障失真感。作者在 Safari 中发现，若初始状态使用 none，filter 动画将失效，必须改写为 hue-rotate(0) 才能正常触发。随机角度值通过 CSS 变量（--glitch-hue-1、--glitch-hue-2）注入各条带，与 drop-shadow 共同模拟色彩分离效果。

本文详细演示了一种纯 CSS 图像故障效果，最初为机器人诗人项目设计。通过将图片切成随机高度条带、快速横向位移并同步 hue-rotate 颜色，模拟屏幕损坏的视觉。每个条带执行两次突兀跳跃，叠加蓝色与红色阴影模拟色差。效果完全由 CSS 动画驱动，生成后无需 JavaScript 即可独立运行。

本文中的 Rag 指文本行右侧不规则的边缘轮廓。bad rag 表现为相邻行长度差异过大、视觉 jagged，而 good rag 则通过调整使行长更一致以提升可读性与美观。text-wrap: pretty 通过整段评估显著改善 rag，使文本块更接近规整矩形，且效果覆盖全文而非仅最后四行。

本文中，CSS 自定义属性（--glitch-x-1、--glitch-hue-1 等）被用来把 JavaScript 生成的随机位移与色相值传递给动画。每个条带通过内联样式随机赋值，再配合预先生成的多套关键帧，实现每条独立的闪烁节奏与色彩偏移，从而在无 JavaScript 的情况下保持随机效果。

文中提到 steps() 计时函数，但作者发现它不适用于本故障效果。因为 steps() 依赖插值后的离散取值，无法产生所需的突然跳变。作者转而采用极接近的关键帧百分比，在单帧刷新时间内完成位移，从而用纯 CSS 实现类似 steps 的突兀视觉反馈。

文章归档于 CSS/SASS 分类，表明作者将 Sass 视为与 CSS 配合的样式预处理工具，用于组织和生成复杂的动画代码。尽管最终演示使用纯 CSS，但 Sass 可能参与了初始样式结构或变量管理，以支持多条带动画的维护与扩展。

Safari 是本文中明确不支持 HDR 表情的主要浏览器。测试结果显示，大多数情况下 Safari 无法正确渲染这些高动态范围图片，导致亮度增强效果失效。文章建议用户优先使用 Chrome 等支持良好的浏览器进行验证。

本文介绍 text-wrap-style 是 text-wrap 的另一长属性，负责选择具体排版算法，可取 auto、stable、balance、pretty 或 avoid-short-last-lines。文章指出此拆分让开发者能分别控制换行模式与算法风格，并提供了与 white-space 的兼容 fallback 建议。

本文引用 CSS Text Level 4 规范对 text-wrap: pretty 的定义，允许浏览器自行决定改进范围，包括减少行长差异、避免河流及优化连字符，强调各浏览器可根据自身能力选择实现策略。

本文说明 text-wrap-mode 是 text-wrap 的长属性之一，用于控制是否开启换行，取值包括 wrap 和 nowrap。文章强调通过该属性可独立设置换行开关，与 text-wrap-style 解耦，便于样式级联和 fallback 处理。

本文介绍该值为 CSS Text Level 4 新增独立属性，专门用于避免段落末尾出现单个词的短行。文章明确指出其与 pretty 的区别：pretty 还会改善 rag 和减少连字符，而 avoid-short-last-lines 仅聚焦短行问题，功能更单一，目前尚未被浏览器实现。

本文列出旧 UA 样式规则，对 x h1、x x h1 等选择器依次设置递减的 margin-block 与 font-size。Firefox、Chrome 等浏览器正移除这些规则，使所有 h1 恢复统一默认样式。新样式下嵌套 h1 不再自动变小，开发者需自行定义字号与边距。

本文推荐使用 :where(h1) 来设置统一的 margin-block 和 font-size，因其特异性为零，可在不覆盖其他 h1 规则的前提下满足新 UA 样式要求，避免 Lighthouse 警告。

Safari 通过 bug 292765 跟踪 h1 默认 UA 样式的移除工作，尚未公布具体发布时间表。本文将其与 Firefox、Chrome 的推进计划并列，作为需关注的浏览器实现进度。

TAC是作者提出的CSS方法论，在文末被提及。作者希望未来CSS能更好支持HTML属性（如attr()），以便在TAC组件中用更简洁的属性而非自定义属性实现LQIP等功能。

文章附录提出用 CSS attr() 替代自定义属性，直接从 HTML 的 lqip 属性读取整数值并在样式中引用。作者认为这能简化标记结构，并期待 attr() Level 5 规范普及后实现更干净的写法。

Gradify 能生成多层线性渐变来粗略模拟图片。文中展示其典型输出需在 style 属性写入多行冗长渐变代码，标记臃肿且对无构建流程的站点不友好，成为作者提出单属性 CSS 方案的直接对比案例。

本文核心使用多层径向渐变叠加线性渐变来渲染 3×2 网格的亮度分量与基础色，从而生成模糊占位符。作者详细说明了渐变位置、半径及二次缓动设置，以实现无缝融合与模糊效果。

本文核心依赖 CSS 自定义属性 --lqip 来传递占位符数据。该属性以整数形式存储 base 颜色与 3×2 网格亮度信息，CSS 通过 mod、round 等函数解包后生成颜色变量和多层径向渐变，实现零标记侵入的占位渲染。

Oklab 色彩空间被用于 LQIP 编码中的 base 颜色：低 8 位中用 2 位存亮度、3 位各存 a/b 分量。作者认为其主观平衡效果优于 RGB，便于后续 CSS 通过 oklab() 函数直接构造颜色变量并叠加亮度层。

appearance: base-select 是新增的 CSS 属性，用于将 切换到可完全样式化的“base”状态。应用后会改变 HTML 解析规则、渲染结构，暴露新部件与状态，并让选项以 popover 形式置于顶层、使用 anchor() 定位，同时提供最小化默认外观以便自定义。该属性同时会移除部分旧行为，如最长选项自动宽度、系统级移动端组件等。

appearance: base-select

04.01

时隔多年，Safari 重新支持 text-autospace

Safari 18.4 新增 view-transition-name: match-element 支持，仅通过元素本身是否相同来匹配过渡，适用于单页视图过渡。之前 18.2 版本已支持 auto 值，可同时用于多页过渡场景。

CSS View Transitions

04.01

Chrome 支持 CSS 自定义 select 元素

Una Kravets 为本文提供了多项自定义 select 演示，并撰写了早期 RFC 反馈帖及后续规范更新说明。她重点解释了从最初提案到最终实现的变更，帮助开发者理解解析器调整和部件自定义方式。

Una Kravets

04.01

时隔多年，Safari 重新支持 text-autospace

Safari 18.4 新增对 text-autospace 属性的支持，可在 CJK 文字与非 CJK 字母或数字之间自动插入额外间距。支持 ideograph-alpha、ideograph-numeric、normal 和 no-autospace 等值，默认仍为 no-autospace，未来可能切换为 normal 以改善排版。

CSS text-autospace

04.01

Chrome 支持 CSS 自定义 select 元素

本文指出，开启 base-select 后，

的弹出选项可使用 anchor() 函数进行定位。该特性让选项层能相对于触发元素精确定位，同时保持 popover 顶层特性，解决了传统下拉菜单难以样式化和定位的问题。

Safari 18.4 新增 ::details-content 伪元素，可单独选中

CSS shape() 是 Safari 18.4 新增的 CSS 基础形状函数，能用带单位的 CSS 值描述 SVG 风格路径，解决 path() 无法响应元素尺寸的问题。可直接用于 clip-path 属性，实现自适应的复杂图形裁剪效果。

Safari 18.4 中 WebKit 新增对 writing-mode: sideways-rl 和 sideways-lr 的支持。这些模式用于将原本水平排版的文本垂直展示，作为图形设计效果。与 vertical 模式相比，sideways 模式能正确处理标点符号和基线差异，并改变文本换行与对齐方式。

本文中 ::picker(select) 是与 搭配使用的伪元素，用于选中并应用 appearance: base-select。开启后，选项列表会作为顶层弹出层显示，并可通过 CSS Anchor Positioning 进行定位，实现与触发按钮的灵活对齐与动画效果。

::picker(select)

04.01

Chrome 支持 CSS 自定义 select 元素

本文作者 Adam Argyle 系统介绍了 Chrome 135 起

元素支持 CSS 定制的特性。他制作了使用全部新功能的演示，并参与多个 CodePen 示例，展示了如何在保持 JavaScript 接口不变的前提下实现丰富视觉效果。

Safari 18.4 是苹果浏览器的最新版本，集成了 WebKit 的 84 项新功能与 184 处问题修复，重点提升 web 兼容性与功能完整性。文章详细介绍了其在推送通知、CSS、媒体、Web API 等领域的更新，强调对现有特性的质量打磨。

文章指出，过去使用 clip-path 配合 path() 时，因路径值仅支持 CSS 像素而缺乏响应性，开发者常被迫改用 masking。Safari 18.4 通过引入 shape() 函数，显著改善了 clip-path 在复杂图形裁剪场景下的可用性与灵活性。

本文介绍从 Chrome 135 起， 元素可通过 CSS 实现完全自定义。使用 appearance: base-select 后，HTML 解析器会保留 内的富内容（如 SVG、图片），选项将渲染在顶层并支持锚点定位，同时暴露内部部件和状态供样式化。原有 JavaScript 接口不变，但会失去跟随浏览器窗体外渲染、触发系统原生组件等特性，存在因解析变更导致旧站点风险。

<select> element

03.30

CSS、iOS 和 Android 的阴影参数转换

本文以 Safari 为主生成大部分 CSS 投影截图。当前 Safari 模糊处理已符合 CSS 规范，而旧版曾影响 Skia 代码采用 1/sqrt(3) 缩放，导致 Android 与现代 CSS 投影不一致。文章指出这一历史原因解释了平台差异。

Safari

03.30

CSS、iOS 和 Android 的阴影参数转换

本文将 CSS 的 box-shadow 作为跨平台阴影对比的基准，其模糊半径按规范定义为标准差等于半径的一半。实验显示 CSS 与 Figma、Sketch 的阴影视觉效果一致，但 Android 因 Skia 渲染而略显模糊，iOS 则需要半径减半才能对齐。文章提供了从 CSS 到其他平台的具体缩放公式，用于导出匹配阴影。

CSS

03.30

CSS、iOS 和 Android 的阴影参数转换

本文中 box-shadow 指 CSS 用于实现网页投影的属性。测试显示其模糊半径处理遵循 W3C 规范（标准差为半径一半），与 Sketch、Figma 渲染结果一致，但与 Android、iOS 存在缩放差异。文章通过跨浏览器截图确认该属性在 Safari、Firefox、Chrome 中表现基本相同。

box-shadow

03.22

Document PiP API 介绍

本文提到 LearnHTMLCSS.online 平台同时教授可访问的 CSS，当使用 Document PiP 时需同步 CSS 样式到浮动窗口以保持预览一致。平台通过该 API 让用户在独立窗口中查看带样式的 HTML 渲染结果。文章指出此同步处理是实现完整交互预览的关键步骤之一。

CSS

03.22

Document PiP API 介绍

本文明确 Safari 目前不支持 Document Picture-in-Picture API，在支持表格中被标注为 not supported。这导致在该浏览器上需依赖优雅降级方案，例如让预览区域占据当前页面剩余空间而非弹出窗口。文章提醒开发者在规划用例时需考虑此不支持情况。

Safari

03.16

CSS Relative Colors

本文中 OKLCH 被用作相对颜色生成的主要色彩空间，用于创建色阶、禁用态灰阶、互补色及多变体颜色。通过将 chroma 设为 0 可轻松得到灰色变体，且因感知均匀的 lightness，能保持一致的对比度与亮度。文章多次对比显示，其在标签、按钮、TechCrunch 风格布局中优于 HSL，避免了颜色过亮或振动问题。

OKLCH

03.16

CSS Relative Colors

文章介绍 LCH 作为人类感知导向的色彩空间，用于相对颜色时能让相同 lightness 的不同 hue 呈现一致亮度，解决 HSL 颜色看起来过亮或不均的问题。文中以红色与绿色示例对比，说明使用 lch(from ... calc(h+90) ...) 可获得更自然的视觉效果，并指出 OKLCH 进一步改进了 LCH 的不足。

LCH

03.16

CSS Relative Colors

文章重点展示了 calc() 在 Relative Colors 中的应用，可直接对 hsl() 或 oklch() 的通道值进行加减运算，如 calc(l + 10) 生成更浅色阶或 calc(h + 90) 创建互补色。该方法无需预先知道颜色具体数值，浏览器会自动解析并计算结果，确保色彩比例尺的一致性。

calc()

03.16

CSS Relative Colors

文中多次提及 Sass 曾用于 rgba($brand-color, 0.5) 这类操作，将预定义颜色快速转为半透明版本。如今 CSS Relative Colors 已能原生取代该功能，无需编译步骤即可完成相同任务，降低了项目对预处理器的依赖。

Sass

03.16

CSS Relative Colors

本文将 HSL 作为相对颜色的基础用法示例，通过 hsl(from #9333ea h s calc(l+10)) 生成浅色或深色变体。但文章强调其 lightness 不具感知均匀性，导致相同 lightness 的颜色对比度不一致，标签与按钮示例中对比度测试均不及 OKLCH。

HSL

03.16

CSS Relative Colors

文章用 rgb(from #000 r g b / 0.1) 演示相对颜色修改透明度，适用于按钮边框、阴影、渐变叠加及模态背景。计算后颜色仍保留在 sRGB 空间，文中多次展示通过调整 alpha 值实现动态效果，并作为 color-mix() 的现代替代方案。

RGB

03.16

CSS Relative Colors

作为 Relative Colors 的回退方案，color-mix() 可在 srgb 色彩空间中混合颜色与透明或黑色，从而实现透明边框与明暗变体。文中演示了其与 @supports 规则配合的用法，在旧浏览器中提供兼容支持，同时保持与新语法的功能一致。

CSS color-mix()

03.16

CSS Relative Colors

本文作者 Ahmad Shadeed 在 2016 年曾为 CSS Tricks 撰文讲解 rgba 用法，本文则系统介绍 CSS 相对颜色作为替代方案。他提供了大量交互演示，包括按钮悬停、Trello 头部、阴影及 TechCrunch 风格布局，并分享了从 Sass 迁移到原生 CSS 的实践心得。

Ahmad Shadeed

03.16

CSS Relative Colors

本文以 CSS Relative Colors 为主题，详细讲解了其语法与实际应用。通过 color-function(from origin-color channel1 channel2 channel3 / alpha) 的形式，可直接基于十六进制或变量颜色动态生成透明边框、悬停深色、渐变叠加及阴影等效果。相比以往必须依赖预处理器或手动拾取颜色，该特性让 CSS 能原生完成颜色通道的计算与调整，显著简化了设计系统中的颜色变体管理。

CSS Relative Colors

03.16

CSS Relative Colors

文章对比了传统 CSS 与新特性的差异，指出过去处理颜色透明度或明暗变化时，只能通过 rgb() 手动拆分通道或重复定义变量。如今借助 Relative Colors，CSS 无需预处理器即可直接修改任意颜色通道，实现更灵活的动态样式。

CSS

03.08

为什么我喜欢在网页中设计产品

Container Queries 在文中被展示为基于容器尺寸而非视口的响应式方案，作者用 @container 示例说明其可针对特定区域精准应用样式。结合 cqi 单位，它让流体设计更精确，作者视其为浏览器原生能力优于固定画布工具的关键体现。

Container Queries

03.08

为什么我喜欢在网页中设计产品

文中强调 CSS 支持用 em、rem、vw、cqi、calc 和 clamp 等单位按设计意图表达尺寸，避免像素硬编码带来的局限。层叠机制让一次样式修改即可影响大量元素，作者举例展示用几行代码即可完成按钮颜色等全局或条件化变更，远比维护多份静态稿高效。

CSS

03.08

为什么我喜欢在网页中设计产品

本文将 scroll-driven animations 列为近年浏览器原生支持的新特性之一，与 CSS Grid、容器查询、视图过渡等并列。它让设计师无需等待设计工具更新，就能立即在浏览器中探索基于滚动触发的动画创意，从而更快地将新交互可能性应用到实际项目中。

Scroll-driven Animations

03.08

为什么我喜欢在网页中设计产品

CSS Grid 被列为近年来让设计工具望尘莫及的新特性，已进入 baseline 可用阶段。作者对比 Figma 推出 flexbox 类似功能时 Grid 已广泛支持，说明浏览器设计能立即利用其强大布局能力创造新体验，无需等待工具更新。

CSS Grid

03.08

为什么我喜欢在网页中设计产品

文中与 Grid 并列提及 Subgrid，作为能简化嵌套布局并拓展创意可能性的现代标准。作者认为这类特性让设计师在受众可受益时就可直接使用，体现浏览器工作流程对新规范的即时接纳优势。

CSS Subgrid

03.08

为什么我喜欢在网页中设计产品

文章提到 Figma 推出 Auto Layout 时，CSS Grid 已比其更强大且普及更早。Flexbox 被视为设计工具追赶 Web 标准的一个参照，强调在浏览器中使用原生 CSS 布局特性，能比等待工具更新更早享受更强的响应式设计能力。

Flexbox

03.04

CSS text-box-trim

leading-trim 是 text-box 属性在早期提案中的名称，曾用于描述修剪文本框上下多余空间的功能。该名称出现在 Ethan Wang 的文章中，后来规范统一为 text-box，功能保持一致，目的是解决排版中不可控的半行距问题。

leading-trim

03.04

CSS text-box-trim

text-box 是 text-box-trim 与 text-box-edge 的简写属性，从 Chrome 133 起正式支持。该属性允许开发者一次性修剪文本上下半行距空间，常用写法如 text-box: trim-both cap alphabetic，可让 padding: 10px 在不同字体下实现视觉平衡，解决传统排版中无法控制的额外空白问题。

text-box

03.04

CSS text-box-trim

text-box-edge 是定义修剪边缘参考的长属性，可选 cap、ex、text、leading 或 alphabetic 等值。它与 text-box-trim 搭配使用，决定将文本框修剪到大写字母顶、x 高度还是字母基线，从而实现更精确的光学对齐效果。

text-box-edge

03.04

CSS text-box-trim

浏览器支持表格显示 Safari 从 18.2 版本起支持 text-box-trim，与 Chrome 共同推进该 CSS 特性的落地。文章引用 Safari 官方博客，确认该版本已实现文本框修剪功能。

Safari

03.04

CSS text-box-trim

本文作者，于2025年1月14日发布文章。他系统介绍了Chrome 133起支持的text-box属性，解释了该属性如何通过trim-both、cap、alphabetic等值修剪文本上下方的half-leading空间，实现按钮、标题等元素的精确光学居中与对齐。文章还提供了CodePen演示和实际应用对比，展示不同字体下的布局改进效果。

Adam Argyle

03.04

CSS text-box-trim

文章引用其博客《The Thing With Leading In CSS》，用于说明CSS中half-leading的由来：排版时将铅条分为上下两部分分别置于文本两侧。文章借此引出text-box属性可分别命名并裁剪over与under空间，解决传统布局中不可控的空白问题。

Matthias Ott

03.04

CSS text-box-trim

text-box-trim 是 CSS 的长形属性之一，用于指定修剪文本框上方或下方的空间，可取 trim-start、trim-end、trim-both 或 none。它与 text-box-edge 配合，从 Chrome 133 开始支持，帮助开发者精确控制文本的块级方向空白，实现按钮、标题等元素的光学居中与对齐。

text-box-trim

03.04

CSS text-box-trim

文章演示 text-box-trim 在 writing-mode 改变时的逻辑自适应表现，能保持图文或多行文本的精确对齐。无论文字方向如何，修剪后的文本框仍能与相邻元素保持一致的边缘对齐效果。

writing-mode

03.04

macOS 小技巧

本文将 Safari 定位为 macOS 内置浏览器，重点整理了其高效操作技巧。包括用 Option-Command 方向键在标签组内进行二维导航、视频右键进入画中画模式、Option 关闭其他标签页、以及强制刷新网页等实用方法。这些技巧帮助用户在网页浏览、标签管理和媒体播放场景中提升操作速度。

Safari

01.30

attr() 新特性：可赋予变量类型

Una Kravets 为本文作者，在 una.im 上详细介绍了 attr() 的类型化与回退功能。她创建了产品卡片、星级、网格和弹出菜单等多个 CodePen 示例，展示如何用属性值替代内联样式与 JavaScript。

Una Kravets

01.30

attr() 新特性：可赋予变量类型

本文聚焦 CSS attr() 函数的升级能力，该函数现可接受类型参数如 type() 或 type()，并支持回退值。它不再仅限于 content 属性中的字符串引用，而是能直接用于 background-color、grid-column 等属性。文章通过产品卡片、星级评分、网格定位和锚定弹出层等示例，展示其如何减少内联样式与 JavaScript 依赖，实现属性值到 CSS 值的直接转换。

CSS attr()

01.30

attr() 新特性：可赋予变量类型

CSS Working Group 负责制定 CSS Values Level 5 规范，定义了 attr() 的类型化语法与安全限制。本文引用该规范链接，说明 Chrome 133 实现正是基于此标准草案。

CSS Working Group

01.30

attr() 新特性：可赋予变量类型

Bramus Van Damme 在 developer.chrome.com 撰写了进阶 attr() 文章，其中包含结合 View Transitions API 的演示。本文作者在结尾引用该文，补充了更多实际应用场景。

Bramus Van Damme

01.30

attr() 新特性：可赋予变量类型

文章演示如何用 attr() 将 data 属性值直接赋给 grid-column 属性，实现网格项目的动态定位。示例中

通过 attr(place-col type()) 设置列位置，无需额外脚本或内联样式。此用法与 CSS Grid 的布局机制结合，适合从数据库或循环渲染中获取位置信息的组件场景。

CSS Grid

01.30

attr() 新特性：可赋予变量类型

文章讨论 CSS 中 attr() 的扩展用法，强调新语法可将 HTML 属性转为颜色、数值或自定义标识符等类型值。示例包括用 attr() 控制背景色、百分比填充和网格列位置，展示其与 calc()、linear-gradient 等特性的结合。相比传统内联样式或自定义属性，此方式更符合关注点分离原则，适用于组件化开发场景。

CSS

01.30

attr() 新特性：可赋予变量类型

本文中 CSS Anchor Positioning 被用作 attr() 新特性的实际用例。通过 attr(data-anchor type())，开发者可从 data 属性直接读取锚点名称，统一设置 anchor-name 与 position-anchor，避免为每个弹出菜单重复编写内联样式。

CSS Anchor Positioning

2024

12.31

CSS Wrapped 2024

Safari 在本文中被提及对自定义滚动条的旧伪元素方案提供支持，同时对 scrollbar-width 和 scrollbar-color 有部分支持。它也在 2024 年实现了视图过渡功能，与 Chrome 形成互操作性对比，说明跨浏览器滚动条样式和页面切换动画的兼容现状。

Safari

12.31

CSS Wrapped 2024

该属性用于 positioned 元素，指向目标锚点的名称（如 --over-easy），建立锚定关系后即可通过其他属性决定相对位置，是 Anchor Positioning 的核心连接步骤。

position-anchor

12.31

CSS Wrapped 2024

scrollsnapchange 事件在滚动停止且用户结束交互时触发，时机与 scrollend 相近。事件对象可获取 snapTargetBlock 与 snapTargetInline 属性，方便在滚动对齐后执行确认逻辑。文章演示其与 scrollsnapchanging 配合，可实现标尺选值等需要最终确认的滚动吸附交互。

scrollsnapchange

12.31

CSS Wrapped 2024

文章指出，当需要对内在尺寸关键字进行计算或在两个相同关键字间过渡时，可使用calc-size()函数替代interpolate-size。它提供更精细的控制，例如获取像素值后参与运算，适用于复杂动画场景，与interpolate-size形成互补。

calc-size()

12.31

CSS Wrapped 2024

在Animate to height: auto章节中，文章说明interpolate-size属性（Chrome 129起支持）可让页面通过:root { interpolate-size: allow-keywords }声明，启用从长度值到min-content、max-content等内在尺寸关键字的平滑过渡与动画。该属性通常足以满足需求，是实现高度自动过渡的最简方式。

interpolate-size

12.31

CSS Wrapped 2024

与 scrollbar-width 同为 Chrome 121 新增的滚动条样式属性，可同时指定轨道与滑块颜色（如 hotpink blue），实现跨浏览器一致的滚动条视觉定制。

scrollbar-color

12.31

CSS Wrapped 2024

Firefox 在本文中支持 scrollbar-width 与 scrollbar-color 两个标准化滚动条属性，并正在推进同文档视图过渡的实现。文章通过对比指出，Firefox 与 Chrome 在滚动条样式上已达成一致，但跨文档视图过渡仍需继续跟进，体现标准化后的浏览器互操作进展。

Firefox

12.31

CSS Wrapped 2024

本文介绍 CSSOM Nested Declarations 是为修复 CSS 嵌套怪异行为而新增的 CSSNestedDeclarations 接口。它确保样式规则后的声明不会向上移动位置，从而让 .foo 元素正确获得 green 背景而非 red。该特性已在 Chrome 130 落地，并与此前放宽嵌套解析的改动互补。

CSSOM Nested Declarations

12.31

CSS Wrapped 2024

本文将 CSS Anchor Positioning 描述为声明式定位方案，通过 anchor-name 定义锚点，positioned 元素可相对锚点布局，无需第三方库即可实现菜单、工具提示、选择器等分层界面。

CSS Anchor Positioning

12.31

CSS Wrapped 2024

CSS Working Group 在本文中被指出未将 ::-webkit-scrollbar 系列伪元素纳入标准，导致旧方案仅在 Chrome 和 Safari 可用。而 scrollbar-width 和 scrollbar-color 则是该工作组推动的标准属性，已在 Chrome、Firefox 及部分 Safari 中落地，代表官方对滚动条样式的统一解决方案。

CSS Working Group

12.31

CSS Wrapped 2024

本文指出 @property 于 2024 年成为 Baseline 新特性，支持为自定义属性声明类型、继承行为和初始值。注册后浏览器可正确插值属性，实现平滑过渡与动画。示例中通过 @property 定义 --angle 属性，结合 keyframes 实现旋转渐变边框效果，代码更简洁且可读性提升。

@property

12.31

CSS Wrapped 2024

Chrome 121 起支持的标准化属性，用于直接设置滚动条宽度（如 10%），替代此前仅 Chrome/Safari 支持的 ::-webkit-scrollbar 伪元素，Firefox 也已支持。

scrollbar-width

12.31

CSS Wrapped 2024

文章在介绍Chrome 128对ruby排版的改进时指出，yisi（一丝）创建了一个工具，可自动为中文文本添加拼音并调整外观效果。该工具用于展示ruby-align属性及可换行ruby的实际应用，与 phonetic annotations 的呈现控制相关。

一丝

12.31

CSS Wrapped 2024

本文介绍 @starting-style 用于定义元素首次样式更新前的初始状态，配合 CSS 过渡可创建入场动画。示例展示新 div 从黄色淡入到透明背景，以及对话框打开时的缩放淡入效果。文中提醒对离散可动画属性需设置 transition-behavior: allow-discrete 以确保动画正常触发。

CSS @starting-style

12.31

CSS Wrapped 2024

本文介绍 Chrome 131 新增的 ::details-content 伪元素，用于包裹

元素中除

外的全部内容，实现对展开折叠区域的独立样式控制。配合 display 属性，可轻松构建横向手风琴或 Material Design 风格的折叠组件。

::details-content

12.31

CSS Wrapped 2024

scrollsnapchanging 事件在滚动容器出现新吸附目标时立即触发，适合即时视觉反馈。事件同样提供 snapTargetBlock 和 snapTargetInline 属性，开发者可据此同步更新输入框或高亮状态。文章强调该事件与 scrollsnapchange 组合使用，可构建流畅的滚动选择体验。

scrollsnapchanging

12.31

CSS Wrapped 2024

Bramus Van Damme 是本文多篇特性的主要作者，负责 animate-to-height-auto、exclusive-details、styleable-details、custom-scrollbars、cross-document-view-transitions、backdrop-inheritance、light-dark、@property、popover、@starting-style、ruby-align 及 CSSOM nested declarations 等章节。他以 Chrome 开发者身份提供代码示例和演示，系统梳理 2024 年 Chrome 的 CSS 进展。

Bramus Van Damme

12.31

CSS Wrapped 2024

本文介绍 light-dark() 函数用于根据 color-scheme 自动选择颜色值。在 :root 上设置 color-scheme: light dark 后，该函数接受两个颜色参数，浅色或未知模式返回第一个值，深色模式返回第二个值。文中展示了通过它定义 --primary-color 等自定义属性，实现界面在明暗主题间的自动切换，无需额外媒体查询。

light-dark()

12.31

CSS Wrapped 2024

Chrome 122 起 ::backdrop 伪元素成为树状继承元素，会从其来源元素继承可继承属性。开发者可在特定元素上覆盖自定义属性值，::backdrop 即可直接访问这些值，例如为打开的 dialog 设置主题变量。文章指出此改动让弹出层样式控制更符合直觉，无需额外全局声明。

::backdrop

12.31

CSS Wrapped 2024

本文提到 Chrome 128 起 ruby 注音支持换行，并新增 ruby-align 属性控制注音与基础文本的对齐方式。可选值包括 space-around、space-between、start 和 center。文中对比了长注音文本在换行前后的渲染效果，指出该属性可优化中文拼音或补充信息的排版呈现。

ruby-align

12.31

CSS Wrapped 2024

Adam Argyle 在本文中撰写了 anchor-positioning、scroll-snap-events 和 paint-order 三个部分，重点展示声明式锚点定位、滚动捕捉事件及 text-stroke 的绘制顺序控制。他通过可视化演示和实际用例，说明这些特性如何让工具提示、滚动选择器和描边文字的实现更简洁可靠。

Adam Argyle

12.31

CSS Wrapped 2024

position-area 指定 positioned 元素相对于锚点的位置区域，支持 block-end、center 等逻辑值与物理值，文章演示了通过该属性快速实现不同方向的锚定布局。

position-area

12.31

CSS Wrapped 2024

本文在描述锚点定位功能时提到，Una Kravets制作了一个可视化GUI工具，用于展示position-area属性的多种可选值，帮助开发者直观理解如何将定位元素相对于锚点进行布局。该工具出现在锚点定位的演示环节，与菜单、提示等分层界面构建场景相关。

Una Kravets

12.31

CSS Wrapped 2024

本文说明 paint-order 可调整 text-stroke 时文本填充与描边的绘制顺序。默认顺序为 fill、stroke、markers；将值设为 stroke fill 可让描边先绘制再填充，避免白色填充+黑色描边时的视觉问题。文中指出此属性让 text-stroke 更适合生产环境使用，配合 -webkit-text-stroke 即可实现理想效果。

paint-order

12.31

CSS Wrapped 2024

本文说明 @view-transition 规则用于开启跨文档视图过渡。开发者只需在样式表中写入 navigation: auto，即可让符合同源条件的页面导航自动触发过渡。规则启用后，页面仍通过 view-transition-name 指定参与过渡的元素，并由 CSS 动画驱动过渡过程。

@view-transition

12.31

CSS Wrapped 2024

本文在Components部分专门介绍了field-sizing属性，它允许textarea、select和input通过单行CSS声明field-sizing: content实现内容自适应尺寸。此前需要JavaScript统计字符或预估平均宽度，现在可适配任意字体、字号、语言和书写模式。该特性显著降低了表单元素内在尺寸的实现成本。

field-sizing

12.31

CSS Wrapped 2024

本文中 Google Chrome 是 2024 年多项 CSS 新特性的主要推动者和首批实现浏览器。从 Chrome 121 到 131，它陆续支持 field-sizing、interpolate-size、跨文档视图过渡、滚动捕捉事件、@starting-style 等功能，让开发者无需 JavaScript 即可实现内容自适应输入框、平滑高度动画、手风琴效果和入口过渡动画。文章以 Chrome 为核心，展示这些特性如何降低开发成本并成为 Baseline 新特性。

Google Chrome

11.30

重新评估 WebKit 字体平滑

文章指出 Firefox 128 及以上版本已支持 -webkit-font-smoothing，因此 -moz-osx-font-smoothing 属性已无必要再单独使用。作者在 macOS 测试后得出结论：只需保留 -webkit- 前缀版本即可实现相同效果。

-moz-osx-font-smoothing

11.30

重新评估 WebKit 字体平滑

本文讨论的CSS属性，用于在macOS浏览器中关闭默认的次像素抗锯齿渲染模式，使文字显示更轻、更接近其他操作系统的字重。文章指出该属性仅对macOS有效，现代浏览器包括Firefox 128+均支持，推荐加入CSS重置以获得一致排版效果。

-webkit-font-smoothing

11.30

重新评估 WebKit 字体平滑

本文中 Josh Comeau 的现代 CSS Reset 在 body 规则里加入 -webkit-font-smoothing: antialiased，用于关闭 macOS 浏览器默认的次像素抗锯齿。作者测试后确认此做法能让 macOS 网页文字粗细与其他系统更接近，从而提升跨平台一致性。文章结论是今后会将该规则加入自己的重置样式表。

CSS Reset

11.30

重新评估 WebKit 字体平滑

其2021/2024版Modern CSS Reset中加入-webkit-font-smoothing: antialiased;，理由是macOS自Mojave后已系统禁用次像素抗锯齿，旧有批评已不适用；作者最终采纳此做法以实现更轻、更一致的文字渲染。

Josh Comeau

11.30

重新评估 WebKit 字体平滑

文中建议在字体堆叠中使用 font-size-adjust 属性，以平衡不同字体在同一字号下的实际视觉大小差异。作者认为这有助于在应用抗锯齿规则后仍保持排版可读性。

font-size-adjust

09.30

Safari 18.0 中的 WebKit 功能

Safari 18.0 是首个支持在 Relative Color Syntax 中引用 currentcolor 或系统颜色关键字的浏览器。通过 oklch(from currentcolor calc(L * 4) C H) 等写法，可基于当前文字颜色动态生成背景色，实现颜色间的关联计算。该特性减少了对设计系统变量的依赖，让颜色定义更灵活，同时兼容浅色/深色模式下的系统颜色。

Relative Color Syntax

09.30

CSS 实现 Apple Watch 动画

CSS 负责实现所有动画效果，包括指针旋转关键帧、多表盘透明度切换，以及 transform-origin 设置。作者还使用 matrix3d 实现透视变形，并借助 tan()、atan2() 函数解决小屏下的 SVG 缩放适配问题，使动画在不同宽度下保持正确形态。

CSS

09.30

Safari 18.0 中的 WebKit 功能

Safari 18.0 新增对 content-visibility 属性的支持。该属性可告知浏览器页面中可能初始位于屏幕外的部分，建议跳过其布局与渲染，从而加快首屏加载速度。它主要用于性能优化场景，开发者可据此控制内容的渲染时机。

content-visibility

09.30

CSS 实现 Apple Watch 动画

本文中作者用 CSS Keyframe Animations 实现 Apple Watch 表盘动画：秒针等元素通过 spin_seconds 等关键帧实现 60s 线性旋转，transform-origin 针对不同元素精确设置；多组关键帧动画控制五个表盘在 20s 周期内交替淡入淡出，实现平滑过渡。

CSS Keyframe Animations

09.30

Safari 18.0 中的 WebKit 功能

Safari 18.0 实现 View Transitions API，支持通过 document.startViewTransition() 捕获页面状态并执行动画过渡。新增 view-transition-name 属性与 ::view-transition-old/new 伪元素，可自定义特定元素的进入/退出动画；:active-view-transition 伪类用于检测过渡状态，默认提供淡入淡出效果。

View Transitions API

09.30

CSS 实现 Apple Watch 动画

作者通过 matrix3d CSS 属性对动画 SVG 进行 3D 透视变换，数值由 Construction Set 生成，包含 16 个参数，实现将平面动画覆盖层扭曲到与倾斜手表图像一致的角度。

matrix3d

09.30

Safari 18.0 中的 WebKit 功能

Safari 18.0 起，backdrop-filter 无需 -webkit- 前缀即可使用，同时修复了多项 bug 并提升了跨浏览器一致性。该属性可对元素后方内容应用模糊、饱和度、对比度等滤镜效果，适用于标题等需要突出前景的场景。自 2015 年起已在 Safari 中支持，现已成为可广泛使用的图形设计工具。

backdrop-filter

09.30

CSS 实现 Apple Watch 动画

文章利用 CSS 3D Transforms 中的 matrix3d 函数，配合 transform-origin 和 scale 调整，在不同屏幕宽度下保持 SVG 动画与背景图的对齐，完成倾斜视角的视觉效果。

CSS 3D Transforms

09.30

Safari 18.0 中的 WebKit 功能

Safari 18.0是本文核心，集成了WebKit全部新特性，包括Distraction Control隐藏干扰元素、Video Viewer全窗播放、网页应用链接自动打开与扩展支持等用户功能。浏览器新增View Transitions API、Relative Color Syntax对currentcolor的支持，以及HEVC WebRTC等媒体能力。文章指出Safari 18.0在iOS 18、macOS Sequoia和visionOS 2上同步推出，重点优化了空间网页和无障碍体验。

Safari

09.30

CSS 实现 Apple Watch 动画

作者借助该在线工具输入 Photoshop 测得的四个角坐标，自动生成 matrix3d 值，用于将 SVG 覆盖层精确透视变形，使其与倾斜的 Apple Watch 表壳图像完美贴合。

The CSS3 Matrix Construction Set

09.30

CSS 实现 Apple Watch 动画

本文详细说明了 CSS 数学函数在响应式动画中的实际应用。当屏幕宽度小于 720 像素时，作者用 tan() 和 atan2() 将带单位的长度转换为无单位数值，计算出正确的缩放比例，从而让 matrix3d 变换后的 SVG 覆盖层能自适应不同尺寸，避免了直接使用 calc() 因单位问题导致的失效。

CSS Math Functions

09.30

Safari 18.0 中的 WebKit 功能

Safari 18.0 新增对 CSS 自定义属性的 Style Queries 支持，可在 @container style() 规则中根据父元素自定义属性值应用一组样式。例如当 --background 为 black 时，将标题与段落设为白色；支持通过容器查询名称改变引用目标，类似 Sass 混入的可复用样式分组。

Style Queries

07.30

Slash pages

本文提及 Miriam Suzanne（链接指向 miriamsuzanne.com）作为 /why 页面的创建者示例。该页面用于阐述作者的价值观、发展方向以及希望在世界中存在的方式。她提供的案例帮助读者理解 slash pages 中 minifesto 类型的应用。

Miriam Suzanne

04.30

Breakpoints in Responsive Design

断点指触发布局切换的屏幕尺寸范围，文中给出四种常用 T 恤尺寸划分：超小≤500px、小 500–1200px、中 1200–1400px、大≥1400px，并配以 Warby Parker、IBM、Airbnb 等实例说明列数与导航的变化。

Breakpoint

04.30

Pinball User Interface

本文列出Breaking Development会议演讲“UI Design and Layout with CSS Flexbox”，将其作为多设备布局的技术方案，与响应式设计实践并列呈现。

CSS Flexbox

04.30

盲人编程实例

作者不会CSS，通过阅读Bootstrap文档并询问Gemini后抄示例，用其编排网页布局，使网站虽简陋但可被屏幕阅读器使用，适合盲人操作。

Bootstrap

04.30

Breakpoints in Responsive Design

媒体查询用于在代码中定义断点的宽度区间，文章强调设计师需与开发团队共同设定断点值，以便通过媒体查询实现不同屏幕范围内的布局切换。

Media Queries

04.30

Pinball User Interface

本文索引列出多场An Event Apart演讲“Object Oriented CSS”，强调其在Web设计中的应用方法，与CSS框架和可维护性主题相关。

OOCSS

03.30

Console delight

Safari在本文中不支持%c的CSS和SVG渲染，仅显示原始文本。文中指出其为主要不支持的浏览器，限制了控制台特效的跨平台一致性。

Safari

03.30

Console delight

文章重点介绍了css-doodle库，适合创建SVG效果并作为背景图用于控制台消息，支持多种命令和动画示例。

css-doodle

03.30

Console delight

本文中CSS通过%c占位符应用于控制台消息，支持动画、CSS变量和@media查询，但不支持:hover、外部背景图或@import规则，文中提供了大量兼容性表格。

CSS

02.28

Loadership

CSS 是 Loadership 支持的输出格式之一，用于定义加载动画的样式和动画效果。用户配置后可复制包含 CSS 的代码，实现平滑专业的加载指示器。

CSS

01.30

a global design system

文章将 Open Props 列为可与全球设计系统搭配的样式方案之一，供团队在不改变组件功能的前提下实现自定义视觉风格。

Open Props

01.30

a global design system

文章以 CSS Zen Garden 类比全球设计系统，强调其提供通用组件结构后，可像该项目一样让不同团队自由叠加各自品牌样式，实现高度主题化。

CSS Zen Garden

01.30

a global design system

文中指出 Tailwind CSS 等工具可用于自定义样式，但全球设计系统应提供更中性的基础组件，让用户自由叠加这类样式层而非依赖其默认外观。

Tailwind CSS

01.30

a global design system

文章提及 Bootstrap 作为已广泛使用的 UI 库，但强调这类工具通常携带组织特定审美，主题化能力有限，难以满足全球多样化品牌需求。

Bootstrap

01.30

Design Token 的一些命名经验

文章在讨论 kebab-case 时提到，该格式被用于部分设计系统和 CSS 命名约定中，作为与 underscore_case 形成对比的一种选择。它被归类为代码友好的命名风格，适合与开发者协作时采用，以提升设计令牌在代码中的可维护性与一致性。

CSS

2023

12.30

Chrome 团队 2023 年的 CSS 总结

Chrome 111 起 :nth-child() 与 :nth-last-child() 可传入选择器列表，先筛选子元素再应用 An+B 逻辑，实现更精细的复杂选择。

CSS :nth-child()

12.30

Chrome 团队 2023 年的 CSS 总结

本文中 timeline-scope 允许将非祖先元素的命名滚动时间线提升作用域。Chrome 116 起支持，声明在共同父元素上后，其子元素即可引用该时间线。解决了动画元素与滚动容器不在同一 DOM 子树的问题。

CSS timeline-scope

12.30

Chrome 团队 2023 年的 CSS 总结

本文由 Chrome UI DevRel 团队撰写，Una Kravets 是团队成员之一，参与了 2023 年 CSS 新特性总结与展示工作。

Una Kravets

12.30

设计工具手柄对比

圆角半径控件在对象尺寸过小时会被所有支持该功能的工具自动隐藏。文章提到当对象较小时，边界框控件会重叠或被省略，圆角控件也遵循相同处理逻辑。

Corner Radius

12.30

Chrome 团队 2023 年的 CSS 总结

本文介绍 prefers-reduced-transparency 媒体查询，用于响应用户系统减少透明度的偏好设置。它可帮助开发者在界面中降低或移除半透明效果，改善视力障碍用户的阅读体验。该查询与 prefers-reduced-motion 等偏好查询共同构成了无障碍设计工具集。

CSS prefers-reduced-transparency

12.30

Chrome 团队 2023 年的 CSS 总结

Chrome 118 引入 @scope 规则，可将样式限定在特定子树内，通过 scoping root 与可选的 scoping limit 避免过度特定选择器。

CSS Scope

12.30

Chrome 团队 2023 年的 CSS 总结

本文指出 Relative Color Syntax 通过 calc() 对颜色通道进行相对或绝对修改，可精确调整饱和度、明度或透明度。与 color-mix() 互补，它为主题与即时变体提供了更细粒度的控制手段。

Relative Color Syntax

12.30

响应式 SVG

文中指出 preserveAspectRatio 属性功能类似于 object-position，可控制 viewBox 在 SVG 容器中的对齐方式。默认值为 xMidYMid（居中），作者示例用 xMaxYMin 模拟右上对齐，xMidYMax 实现 swirl 底部对齐。

object-position

12.30

响应式 SVG

本文结尾提供了一个 CodePen 示例链接，演示了三种使用响应式 SVG 实现 swirl 线条的方法。作者特别偏好将 SVG 作为 data URI 嵌入 CSS 的方案，认为其无需额外 DOM 元素，更高效优雅。该演示整合了 viewBox、preserveAspectRatio 与 symbol 的应用，展示无 JS 的响应式效果。

CodePen

12.30

Chrome 团队 2023 年的 CSS 总结

文章在排版章节指出，text-wrap 的 balance 与 pretty 值可由浏览器根据字号、语言和可用空间自动优化换行。balance 追求和谐的文本块，pretty 则避免孤行并改善连字处理。开发者无需手动调整，即可获得跨语言的优质排版效果。

CSS text-wrap

12.30

Chrome 团队 2023 年的 CSS 总结

本文中，linear() 函数用于创建复杂的缓动效果，可近似实现弹跳或弹簧动画。Chrome 113 起支持该函数，通过将曲线简化为关键点并线性插值实现。相比传统 easing，它简化了非线性动画的编写，同时保持了性能优势。

CSS linear() function

12.30

Chrome 团队 2023 年的 CSS 总结

本文将 Interop 2023 描述为 2023 年 CSS 进步的起点，推动容器查询、subgrid、:has() 及新颜色空间等特性在所有现代浏览器中落地，成为跨浏览器兼容的核心推动力。

Interop 2023

12.30

Chrome 团队 2023 年的 CSS 总结

文章介绍 color-mix() 可在任意色彩空间中混合颜色，包括透明度。该函数相当于渐变中的单一时刻，支持 white、black 或其他颜色混合。开发者可借此实现动态主题与颜色变体，属于 2023 年色彩能力的重要补充。

CSS color-mix()

12.30

响应式 SVG

symbol类似Figma组件，是可复用的独立画板，拥有独立的viewBox与preserveAspectRatio。通过defs定义后用use引用，可多次插入并分别设置宽高与对齐规则。文中将swirl做成symbol，再用height:100%与preserveAspectRatio实现响应式定位。

SVG Symbols

12.30

Chrome 团队 2023 年的 CSS 总结

本文将 Style Queries 列为 2023 年响应式设计的重要进展之一。它允许通过自定义属性值对父元素样式进行查询，从而实现更灵活的组件样式控制。与容器查询结合使用，能让组件根据自身上下文动态调整外观，减少对全局媒体查询的依赖。

Style Queries

12.30

Chrome 团队 2023 年的 CSS 总结

本文介绍离散属性过渡支持 display、content-visibility 等属性的动画。Chrome 116 起可使用 transition-behavior: allow-discrete，在 50% 位置切换离散值。配合 @starting-style 可实现从 display:none 的平滑入场动画。

Discrete Property Transitions

12.30

Chrome 团队 2023 年的 CSS 总结

本文指出 View Transitions API 于 Chrome 111 发布，支持单页应用中页面状态间的视觉过渡动画。通过 document.startViewTransition 可自动捕获前后快照并处理过渡，开发者仅需少量 CSS 即可实现平滑切换。该 API 显著提升了 Web 应用的交互质感。

View Transitions API

12.30

Chrome 团队 2023 年的 CSS 总结

本文在色彩部分说明，CSS Color Level 4 为网页带来了 Oklab、Oklch、Display P3 等新色彩空间与函数。开发者可检测硬件与浏览器支持，并使用 HDR 色彩创建渐变和混合。2023 年该规范落地后，色彩表现力大幅提升。

CSS Color Module 4

12.30

Chrome 团队 2023 年的 CSS 总结

文章在响应式设计章节强调，Container Queries 让组件可根据父容器尺寸而非视口尺寸应用样式。开发者无需再将页面布局与组件布局耦合，真正实现组件级响应式。2023 年该特性已在所有现代浏览器稳定支持。

Container Queries

12.30

Chrome 团队 2023 年的 CSS 总结

本文在响应式设计板块介绍 CSS update 媒体查询，用于检测设备的刷新率能力。它可返回 fast、slow 或 none 等值，帮助开发者针对低刷新率设备优化交互，避免不必要的动画或更新。该查询完善了媒体查询体系，提升了跨设备体验一致性。

CSS update media query

12.30

响应式 SVG

本文核心主题是无需JavaScript即可实现响应式SVG。以Threads应用的头像连接线为灵感，作者演示如何通过viewBox、preserveAspectRatio和symbol构建可随容器高度自适应、始终保持底部对齐的swirl图形。SVG默认表现类似object-fit:contain，可省略viewBox或结合CSS实现更灵活的布局。

SVG

12.30

Chrome 团队 2023 年的 CSS 总结

本文提到 CSS scripting 媒体查询可检测 JavaScript 是否可用，支持渐进增强策略。开发者无需再通过 HTML class 切换来判断脚本支持情况，可直接在 CSS 中根据脚本可用性调整界面。该特性简化了无脚本回退逻辑，提升了开发效率。

CSS scripting media query

12.30

响应式 SVG

文章说明 SVG 默认行为相当于应用了 object-fit: contain，即在宽高比例与 viewBox 不一致时仍保持图形比例且完整显示。作者以此解释 SVG 的缩放特性，并通过 preserveAspectRatio 实现类似其他 object-fit 值的效果。

object-fit

12.30

Chrome 团队 2023 年的 CSS 总结

Chrome 117 支持 subgrid，使内层网格可继承外层网格的行列定义，尤其适合对齐动态内容，无需手动调整文案长度。

CSS Subgrid

12.30

Chrome 团队 2023 年的 CSS 总结

Chrome 120 支持嵌套选择器，减少重复书写与样式表体积，后续放宽了 & 的使用限制，进一步简化组件样式组织。

CSS Nesting

12.30

响应式 SVG

文章展示通过 CSS 在 SVG 内部定义样式，例如用 calc(100% - 24px) 控制矩形高度，使竖线恰好停在 swirl 上方；此外还提及将 SVG 作为 data URI 嵌入 CSS background-image 的用法，实现无额外 DOM 元素的响应式效果。

CSS

12.30

Chrome 团队 2023 年的 CSS 总结

本文中 @starting-style 规则为元素提供“打开前”样式，支持从 display:none 平滑进入。Chrome 117 起支持，常用于 popover、dialog 等顶层元素入场动画。需与 overlay 属性或 transition-behavior 配合使用以实现完整过渡效果。

CSS @starting-style

12.30

Chrome 团队 2023 年的 CSS 总结

本文由 Chrome UI DevRel 团队撰写，Bramus Van Damme 是团队成员之一，参与了 2023 年 CSS 新特性总结与展示工作。

Bramus Van Damme

12.30

Chrome 团队 2023 年的 CSS 总结

本文末尾署名的 Chrome UI DevRel 团队成员之一。文章由团队共同撰写，Adam Argyle 参与了对 2023 年 CSS 新特性的总结与演示，包括架构基础、排版、色彩、响应式设计、交互及组件等多个板块的更新介绍。

Adam Argyle

12.30

Chrome 团队 2023 年的 CSS 总结

本文中滚动驱动动画可将 CSS 或 Web Animations API 动画与滚动位置绑定。Chrome 115 起支持，支持 scroll-timeline 和 view-timeline。动画可在主线程外运行，实现丝滑的滚动联动效果。

Scroll-driven Animations

12.30

Chrome 团队 2023 年的 CSS 总结

Chrome 111 添加了对 sin()、cos()、tan() 等三角函数的支持，已在所有主流引擎可用，便于动画与布局场景，例如围绕中心点排列元素。

CSS Trigonometric Functions

12.30

Chrome 团队 2023 年的 CSS 总结

本文介绍了 CSS overlay 属性，用于让元素从顶层平滑退出时进行过渡动画，尤其适用于 popover 和 dialog 等组件。若不使用该属性，元素会立即被裁剪或遮挡，无法看到退出动画效果。

CSS overlay

12.30

Chrome 团队 2023 年的 CSS 总结

本文介绍了 :user-valid 和 :user-invalid 伪类，它们仅在用户与表单控件交互后才匹配有效或无效状态，与 :valid/:invalid 不同，能更精准地反映用户操作后的验证结果。

CSS :user-valid

12.30

Supabase 设计状况

Tailwind CSS 与 Figma 变量通过管道同步，实现设计文件与生产环境颜色、间距等属性一致。团队利用此机制让设计变量直接映射为 Tailwind 类名，减少手动对齐工作。

Tailwind CSS

12.30

Chrome 团队 2023 年的 CSS 总结

本文在排版部分介绍，initial-letter 属性可在 Chrome 110 及以上版本使用，用于控制首字母的放置方式，支持 dropped 或 raised 效果。开发者可通过两个参数分别指定下沉深度与上提高度，甚至可组合使用。该属性为排版提供了更精细的 CSS 控制，无需额外脚本。

CSS initial-letter

12.30

Chrome 团队 2023 年的 CSS 总结

本文强调 :has() 选择器已在所有现代浏览器中落地，是 2023 年 CSS 的标志性特性。它能根据子元素的存在或状态选择父元素，解决了长期缺失的“父选择器”问题。该特性与容器查询配合，支持组件级响应式逻辑，显著提升了样式表达力。

:has() selector

12.30

响应式 SVG

文章参考列表中引用了 Sara Soueidan 撰写的《Understanding SVG Coordinate Systems and Transformations》，作为深入理解 SVG 坐标系统与变换的推荐资源。该链接与本文主题直接相关，补充了 viewBox 和 preserveAspectRatio 等核心概念的背景知识。

Sara Soueidan

12.30

Supabase 设计状况

文章指出，CSS Custom Properties 作为 Figma Variables 的导出目标，与 TailwindCSS 结合后，让设计文件与代码库共享同一套颜色系统。例如 background.default 直接映射为 bg 类名，foreground.light 映射为 text-light。该机制使设计改动能更快落地到生产环境，并可扩展至排版、尺寸等更多属性。

CSS Custom Properties

11.30

着色器深度介绍

原文提到最初用 CSS 的 border-radius 属性制作平静的 blob 动画，作为对比引出 shader 方案。作者认为 shader 能实现更复杂且高效的效果，超越单纯 CSS 动画。

CSS

10.30

Photoshop 网页版 CSS 结构解析

Photoshop Web 版在新建文件尺寸选择、图层属性面板、输入控件及菜单项等场景使用 CSS Grid。通过命名网格线、grid-area 及属性选择器实现动态布局；作者指出部分菜单项的 8 列 4 行网格属于过度设计。

CSS Grid

10.30

Photoshop 网页版 CSS 结构解析

文章重点分析了 Photoshop Web 版大量使用 Flexbox 构建复杂界面。Context bar、图层面板等组件均采用嵌套 flex 容器配合 gap 实现对齐与间距；逻辑属性命名（start/center/end）便于支持 LTR 与 RTL。

CSS Flexbox

10.30

Photoshop 网页版 CSS 结构解析

Ahmad Shadeed 推出的 CSS 布局课程，包含 70+ 课时和 150+ 交互示例，强调理解布局思维而非单纯记忆语法。

The Layout Maestro

10.30

Photoshop 网页版 CSS 结构解析

图层面板缩略图使用 object-fit: contain，确保图片按比例完整显示，避免因容器尺寸变化而产生拉伸或裁切失真。

object-fit

10.30

Photoshop 网页版 CSS 结构解析

在讨论图层缩进实现时，作者对比了 Figma 的做法：Figma 使用 spacer 组件添加层级间距，而 Photoshop Web 版则通过 CSS calc 与 indent 属性直接设置 padding-right。两者目标相同但技术路径不同。

Figma

10.30

Photoshop 网页版 CSS 结构解析

文章详细展示了 CSS 变量在界面动态调整中的广泛应用。通过 large-thumbs、size、quiet 等 HTML 属性切换变量值，可控制图层缩略图尺寸、进度条、单选按钮及注释定位颜色，实现主题与状态切换。

CSS Variables

10.30

Photoshop 网页版 CSS 结构解析

文章指出界面采用 start/center/end 等逻辑命名而非 left/right，以同时支持 LTR 与 RTL 模式。作者引用自身 RTL Styling 101 指南，说明该命名方式是构建双向布局应用的最佳实践之一。

RTL Styling

10.30

Photoshop 网页版 CSS 结构解析

本文作者 Ahmad Shadeed 详细检查了 Photoshop Web 的 CSS 代码，分享了 flexbox、grid、CSS 变量等有趣发现，并附带个人课程推广信息。

Ahmad Shadeed

10.30

Photoshop 网页版 CSS 结构解析

在 Photoshop Web 的混合模式菜单中，sp-menu 通过设置 overscroll-behavior: contain，配合 max-height: 55vh，避免滚动时连锁触发 body 的滚动行为，确保菜单内的滚动独立于页面整体。

overscroll-behavior

10.30

Photoshop 网页版 CSS 结构解析

本文开头提到 Adobe Photoshop Web 版使用了多项 Web 技术，其中包括 P3 colors。该实体仅作为构建专业设计应用所采用的技术之一被简要列举，未展开具体实现或样式细节。

P3 Color Space

09.30

CSS 的 easy 主题模式切换

文章指出 Safari 在 17.5 版本通过 WebKit 实现对 light-dark() 的支持，并提供 WebKit 跟踪 issue #262914 供跟进。

Safari

09.30

CSS 的 easy 主题模式切换

文章嵌入两个 CodePen 示例，分别用于检测浏览器是否支持 light-dark() 以及演示该函数在明暗模式下的实际效果。

CodePen

09.30

CSS 的 easy 主题模式切换

本文介绍 schemed-value() 是 light-dark() 的最终目标形态，可响应任意 color-scheme 值并支持非颜色返回值，目前仍处于提案阶段。文章指出其需待自定义配色方案普及后才有实际用途，当前因浏览器限制暂无必要实现。

schemed-value()

09.30

CSS 的 easy 主题模式切换

文章指出，过去切换浅色/深色模式通常依赖 prefers-color-scheme 媒体查询来修改自定义属性值，但这会导致大量重复的变量声明。light-dark() 函数的出现简化了这一流程，无需编写媒体查询即可实现颜色切换。

prefers-color-scheme

09.30

CSS 的 easy 主题模式切换

文中提到 color-scheme 的工作机制与 System Colors 计算方式相似。未来若支持自定义配色方案，注册时需指定 System Colors 的具体值，light-dark() 也将成为 schemed-value() 的语法糖形式。

System Colors

09.30

CSS 的 easy 主题模式切换

CSS Working Group 推动了 light-dark() 的标准化，源于 Chromium 内部函数的提案讨论，并为 color-scheme 属性预留了自定义标识符以支持未来扩展。

CSS Working Group

09.30

CSS 的 easy 主题模式切换

文章对比传统做法，指出使用 CSS Custom Properties 配合 prefers-color-scheme 媒体查询时，常需为每种模式重复定义变量。引入 light-dark() 后，可直接在单个声明中完成两种模式的颜色赋值，减少重复代码。

CSS Custom Properties

09.30

macOS Sonoma 添加到程序坞发生了什么

Safari 负责创建 Web App，并处理 Web App 超出域名范围的链接与所有下载文件。Web App 的外观与行为均基于 Safari，但运行时不依赖完整 Safari 进程，而是由系统内另一个组件加载。

Safari

09.30

CSS 的 easy 主题模式切换

本文介绍的 light-dark() 是 CSS 新增的工具函数，接收两个颜色值参数，根据当前使用的配色方案返回对应颜色：浅色或未知时返回第一个，深色时返回第二个。该函数仅适用于颜色值，需配合 color-scheme 属性使用才能正确生效，还支持在单个元素上强制指定模式。

light-dark()

09.30

CSS 的 easy 主题模式切换

本文作者 Bramus Van Damme 在文中详细介绍 light-dark() 用法、color-scheme 配合方式，并分享自己此前撰写的相关 Chromium 内部实现分析。

Bramus Van Damme

09.30

CSS 的 easy 主题模式切换

color-scheme 属性用于声明元素支持的配色方案，light-dark() 的工作依赖该属性与用户偏好的协商结果。文章说明必须在根元素设置 light dark 值才能启用该函数，同时可在子元素上覆盖此属性以强制特定模式。

color-scheme

09.30

CSS 的 easy 主题模式切换

light-dark() 函数被定义在 CSS Color Module Level 5 规范中，作为 color 类型的显式语法，可在任何接受颜色的属性中使用。规范明确其计算规则：浅色或未知方案返回第一个颜色参数，深色方案返回第二个。

CSS Color Module 5

07.30

为什么电子邮件格式依然这么糟糕？

Flexbox在本文中被提及为网页开发中高效的弹性布局工具，已被所有主流浏览器支持。邮件客户端却不支持或支持不完整，无法确保一致渲染效果。作者因此建议邮件开发必须退回最基础的HTML/CSS特性。

Flexbox

07.30

Threads 一些 CSS 布局发现

本文引用 MDN Web Docs 解释 overflow-wrap: anywhere 的特性，指出它与 break-word 基本一致，但会额外考虑词断开产生的软换行机会对最小内容内在尺寸的影响。作者表示自己常用 break-word，并对两者在实际中的差异感到好奇，希望 Threads 团队能给出使用原因。

MDN Web Docs

07.30

Threads 一些 CSS 布局发现

文章指出 Threads App 的启动画面使用了动态视口单位 dvh，以更好地适配不同设备高度。作者对此表示认可，并推荐阅读自己之前撰写的关于新型视口单位的详细文章，帮助读者深入了解其用法与优势。

CSS Viewport Units

07.30

Threads 一些 CSS 布局发现

Threads 在用户资料页标签布局中使用内联 CSS 变量存储标签数量，网格列数由此变量控制。根元素还定义了 --barcelona-threadline-column-width 变量用于帖子布局首列宽度。文章强调这种做法便于后续增减标签时仅修改变量值。

CSS Variables

07.30

Threads 一些 CSS 布局发现

Threads 帖子正文应用了 overflow-wrap: anywhere 属性。文章对比了其与 break-word 的差异，指出前者在计算 min-content intrinsic sizes 时会额外考虑软换行机会。作者未观察到两者在实际渲染中的明显区别。

overflow-wrap

07.30

为什么电子邮件格式依然这么糟糕？

文章说明邮件中的