CSS text-box-trim 如何裁掉行盒首尾空白：从半行距到垂直居中
按钮文字看起来偏上，是行盒里字体度量留下的半行距在作怪。文章解释 text-box-trim 与 text-box-edge 如何按 cap、alphabetic 等字体度量裁掉行盒首尾空白，说明它与 line-height、ascent/descent 的关系，以及负 margin 和固定行高方案为何会随字体回退失效，并给出适用边界与浏览器支持判断。
#CSS
共 30 篇文章
CSS font-palette 如何为彩色字体选择调色板：从 COLR 表到主题切换
彩色字体把字形轮廓与颜色分开存储，调色板则决定每个颜色槽取什么值。文章以品牌图标字体随主题切换配色为例，说明 COLR/CPAL 表如何携带多套调色板、font-palette 如何按索引或名称选择、@font-palette-values 如何用 override-colors 覆盖颜色，并对比 SVG 图标方案在缓存与渲染上的差异与回退边界。
CSS @scope 的作用域邻近性：内层同名规则为何胜出
组件库样式与页面样式共存时，同名选择器常常互相覆盖。本文解释 @scope 如何限定匹配范围，作用域邻近性如何在特异性之后、出现顺序之前决定胜负，并对比 BEM 与 @layer 的适用边界。
CSS light-dark() 如何实现主题色自动切换：从 color-scheme 到 UA 样式
设计系统常把浅色与深色主题写进两套自定义属性，再用媒体查询覆盖，维护成本高且容易漏改。本文以组件库主题切换为场景，解释 light-dark() 如何依据 color-scheme 的计算值返回对应颜色，说明它与自定义属性、prefers-color-scheme 媒体查询的差异，并给出显式声明 color-scheme、回退策略与可观测信号的工程做法。
CSS initial-letter 如何实现首字下沉：从排版控制到浏览器支持边界
首字下沉在文章正文排版中很常见，但用 float 手工拼出的方案在行高、字体度量和多行对齐上容易失稳。本文以一篇中文长文的开篇段为贯穿场景，说明 initial-letter 的尺寸与下沉值如何决定首字占位和基线位置，它与 float 方案在布局参与方式上的差异，以及在不支持该属性的浏览器里如何做渐进增强与降级。
CSS overflow: clip 与 overflow-clip-margin：裁剪边界如何避免滚动容器
很多页面用 overflow: hidden 裁掉装饰元素，却意外得到可被脚本滚动的容器和滚动链。本文解释 overflow: clip 为何不创建滚动容器、overflow-clip-margin 如何扩展裁剪边界，并给出固定定位装饰场景下的取舍与支持边界。
CSS scroll-snap-stop: always 如何强制停留：从滚动惯性到用户意图
图片轮播和分页列表常用 scroll-snap 对齐卡片，但一次快速滑动常会越过多个 snap 点。本文解释 scroll-snap-stop: always 如何在滚动惯性阶段拦截跨越、它与 scroll-snap-type 的交互、对性能与交互体验的影响，并给出适用边界与降级判断。
CSS 相对颜色语法如何从现有颜色派生新颜色：从颜色计算到设计系统
相对颜色语法让浏览器在运行时基于已有颜色通道计算新颜色，无需 Sass 或 JavaScript 预处理。文章以主题色生成悬停态为贯穿场景，解释 from 关键字与通道变量的处理模型，对比 color-mix() 的混合逻辑，说明与 Sass 颜色函数的差异、浏览器支持边界与回退写法。
CSS scrollbar-gutter 如何预留滚动条空间：为什么 overlay 滚动条会导致布局偏移
固定宽度页面在内容变长时，经典滚动条会挤占可用宽度，导致整页内容横向跳动。本文解释 scrollbar-gutter 的 gutter 位置与 stable、both-edges 取值如何提前预留空间，说明 overlay 滚动条下该属性为何失效，并对比 padding 方案、给出诊断信号与适用边界。
CSS overflow-anchor 滚动锚定：内容插入时视口为何不再跳动
本文解析 overflow-anchor 属性如何通过选择锚节点并调整滚动位置来防止视口跳动，以动态加载内容场景为例说明其工作原理、适用边界与禁用场景，帮助前端开发者正确使用滚动锚定。
font-size-adjust 如何保持备用字体的视觉尺寸：从 x 高度到字体回退
当首选字体不可用而回退到备用字体时，文本的视觉大小可能突变。本文以中文网页的多字体回退栈为例，解释 font-size-adjust 如何通过调整字号使备用字体的 x 高度与首选字体一致，并分析其计算机制、对行高与布局的影响以及浏览器支持边界。
CSS 滚动驱动动画的 range：如何精确控制动画的起止进度
本文聚焦 CSS 滚动驱动动画中 animation-range 的机制，解释如何将动画时间线映射到滚动容器的特定区间，并与默认的全区间映射对比。以长页面中多个元素依次进入视口触发动画为例，结合 IntersectionObserver 方案分析 range 的触发时机、性能影响、适用边界与浏览器支持。
CSS color() 与 OKLCH：为什么广色域颜色在 sRGB 屏幕上会失真
本文以设计系统主题色为例，解释 CSS color() 函数与 OKLCH 色彩空间如何定义超出 sRGB 的广色域颜色，以及当显示设备不支持时浏览器如何通过色域映射将颜色转换到 sRGB，导致颜色失真。文中对比 HEX/RGB 的局限，并给出使用 color() 与 @media (color-gamut) 的实践建议。
CSS color-mix() 的颜色插值：为什么混合结果与预期不同
本文以主题色生成悬停态为例，解析 color-mix() 在不同色彩空间（sRGB、OKLab 等）中的插值机制，解释为何混合结果受色彩空间和插值方法影响，并与 Sass 颜色函数对比，说明浏览器支持边界与回退策略。
CSS 滚动驱动动画的 timeline-scope：为什么命名时间线需要作用域提升
本文讨论 CSS scroll-driven animations 中 timeline-scope 属性的作用：它如何将子元素的命名滚动时间线提升到祖先作用域，使非父子关系的元素也能共享同一时间线。以页面级滚动进度条驱动多个区域动画的场景为例，说明命名时间线的查找机制、作用域限制、timeline-scope 的声明方式及其对动画同步的影响，对比传统 JS 滚动监听方案的性能与复杂度，并给出适用边界与浏览器支持。
CSS Custom Highlight API 如何实现文本高亮：从选区样式到性能边界
本文介绍 CSS Custom Highlight API 如何通过 ::highlight() 伪元素为任意文本范围应用样式，并与 ::selection 对比，分析其性能影响（如重绘范围），以代码编辑器语法高亮为例，对比传统 span 包裹方案，说明适用边界。
CSS text-wrap: pretty 如何优化文本布局：从换行质量到性能开销
本文以博客文章正文排版为例，分析 text-wrap: pretty 如何通过调整段落末尾几行的换行位置来避免孤行、提升排版质量，并解释其与 text-wrap: balance 的差异、对布局计算次数的影响，以及适用场景和性能权衡。
CSS 容器样式查询：为什么 @container style() 不会触发子元素重排
本文以主题切换为例，解释 CSS 容器查询中 @container style() 的机制，分析其与尺寸容器查询的差异，说明样式查询为何不会导致布局重排，并对比传统类名切换方案的适用边界与浏览器支持。
CSS scroll-snap 的 mandatory 与 proximity：为什么强制吸附会引发滚动卡顿
本文以图片轮播场景为例，分析 scroll-snap-type 的 mandatory 与 proximity 值如何影响滚动行为，解释强制吸附导致滚动位置突变和性能问题的机制，并给出减少卡顿的实践建议。
CSS Anchor Positioning 如何实现元素锚定：从 anchor() 到 fallback 机制
本文以弹出菜单定位场景为例，讲解 CSS Anchor Positioning 如何通过 anchor-name、position-anchor、anchor() 函数和 position-area 将元素锚定到其他元素，并重点分析为什么需要 position-try-fallbacks 回退机制，以及与传统 JS 定位方案的权衡和浏览器支持边界。
CSS overscroll-behavior 如何阻止滚动链：从滚动穿透到嵌套滚动容器
本文以模态框内滚动穿透到背景页面为例，解释 overscroll-behavior 的 contain 与 none 值如何控制滚动链和滚动穿透。对比传统 JavaScript 阻止滚动的方案，分析其适用边界、浏览器支持及对可访问性的影响，帮助前端开发者做出更优的滚动行为决策。
CSS :has() 选择器如何影响样式计算与性能：从关系选择到布局重算
本文以表单校验提示场景为例，解析 :has() 关系型选择器的匹配机制，说明它如何让父元素样式依赖子元素状态，并深入样式失效与重算流程，对比传统 JS 类名切换方案，讨论性能开销、适用边界与浏览器支持。
CSS transition-behavior: allow-discrete 如何让 display 参与平滑过渡
手风琴组件展开收起时，display:none 的切换无法产生过渡效果。本文解释 CSS Transitions Level 2 的 transition-behavior 属性如何允许 display 等离散属性参与过渡，分析其翻转时机、与连续属性的差异、浏览器支持及性能影响。
CSS text-wrap: balance 如何影响排版与性能：从文本平衡到布局计算
本文以标题排版场景为例，分析 text-wrap: balance 如何让浏览器平衡多行文本的宽度，解释其基于最大宽度迭代的布局计算机制，对比手动换行或 JS 测量方案，并说明 balance 的适用边界（短文本）、性能开销（布局次数增加）及与 pretty 的差异。
CSS View Transitions 如何捕获新旧状态快照：跨文档过渡为何需要隔离
本文以 SPA 路由切换为贯穿场景，剖析 View Transitions API 如何通过伪元素树和静态快照实现平滑过渡，重点解释跨文档过渡时快照隔离的必要性，以及同源限制、渲染阻塞与回退机制，并与 React Transition Group 等方案对比。
CSS 滚动驱动动画：时间线如何与滚动进度绑定并影响合成
本文以长页面滚动指示器为例，解析 scroll-timeline 与 view-timeline 如何将动画进度映射到滚动位置，对比其基于合成器更新与主线程更新的差异，并给出适用边界。
CSS @layer 中 !important 为何反转层优先级：组件库样式覆盖的机制与边界
本文以组件库样式覆盖为场景，解析 CSS @layer 中级联层的排序规则，重点说明 !important 声明如何反转层优先级，并给出避免样式冲突的实践建议。
CSS content-visibility 如何跳过离屏渲染：长商品列表滚动不再卡顿的机制与边界
本文以长商品列表为例，解析 content-visibility 如何通过布局、样式、绘制包含与交集观察跳过离屏元素的渲染，从而降低初始渲染与滚动时的布局绘制成本。同时说明它与 contain 的区别、auto 的失效条件、对滚动条和可访问性的影响，以及何时应该使用。
CSS @layer 如何重新定义级联优先级：从选择器权重到层顺序
传统 CSS 依赖选择器权重解决样式冲突，但组件库覆盖场景中权重往往失效。本文以组件库样式覆盖为例，讲解 @layer 如何引入层顺序作为新的优先级维度，说明层内与层间的比较机制、未分层样式与 important 的交互规则，以及浏览器兼容边界与工程实践。
CSS Containment 如何隔离布局与绘制以提升渲染性能
本文以长列表商品页为贯穿场景，解析 CSS contain 属性中 layout、paint、size 等值的隔离机制，说明它们如何缩小样式、布局与绘制的计算范围，并对比 content-visibility 的异同，帮助你在实际项目中做出正确的性能优化决策。