Revealing Text With CSS letter-spacing
CSS 的 letter-spacing 属性通常用于调整字符间距，但它在文本动态显示效果中展现了巧妙的创意应用。由于 CSS 目前缺乏像 ::nth-letter 这样的选择器来单独操作字符，开发者可以利用 letter-spacing 的正值和负值特性，结合颜色透明化与过渡动画，实现文字的揭示、隐藏与切换效果。 通过设置负 letter-spacing 值（如 -1ch），可使字符重叠并隐藏，配合 color: transparent 可完全隐藏文本；再将其动画过渡到正值（如 0ch），字符便逐渐分离并恢复可见颜色，形成从聚集到展开的视觉动画。这种方法适用于复选框切换文本、悬停展开缩写词等交互场景。文章进一步展示了如何结合 overflow: clip、text-indent 以及 ::first-letter 伪元素，实现更复杂的文本动态切换与布局控制，为纯 CSS 的文字动效提供了低成本且灵活的实现思路。
Cross-Document View Transitions: Scaling Across Hundreds of Elements
跨文档视图转换（Cross-Document View Transitions）在从简单示例扩展到包含数百个元素的实际产品页面时，面临显著挑战。核心难题在于每个视图转换名称必须唯一，导致为每个元素单独编写动画样式的CSS规则呈爆炸式增长，难以维护。文章探讨了两种高效解决方案。其一是利用`view-transition-class`属性为同类元素分组，配合通配符选择器（如`::view-transition-group(*.card)`）用寥寥数行CSS统一控制所有同类元素的动画，无论数量多少。其二是采用“按需分配”策略，不在页面加载时为所有元素预设名称，而是通过`pageswap`和`pagereveal`事件，在用户交互（如点击）的精确时刻为涉及的元素动态添加与移除视图转换名称。这种方式避免了浏览器为未参与过渡的数十个元素进行无用快照和计算，显著提升了中低端设备上的性能。文章还提及了一个理想的纯CSS方案（使用`ident()`函数），但指出其尚未被浏览器支持，因此上述基于现有标准的模式是当前实现规模化过渡的实用路径。
Fixed-Height Cards: More Fragile Than They Look
固定高度卡片看似能保证视觉对齐，实则依赖内容始终适配预设尺寸的脆弱假设。当遇到多语言翻译、字体缩放或内容变化时，固定容器与动态内容会产生冲突，导致布局破裂或内容溢出。作者通过博客组件实例指出，单纯依赖 `overflow: hidden` 和行截断（如 `-webkit-line-clamp`）只是掩盖了结构性张力。 解决方案的关键在于移除三重约束：取消固定高度、避免绝对定位用于布局、停止强制截断内容。通过使用 CSS Grid 的自动行高对齐（`align-items: stretch`）替代固定高度，配合 Flexbox 构建卡片内部流式布局（如 `flex: 1` 让内容区自适应填充），可使组件自然响应内容变化。同时，采用 `clamp()` 函数实现流式字体大小，增强跨视口适配能力。 文章强调，健壮的布局应基于内容驱动而非预设限制。通过模拟压力测试（如极端文本、字体放大、图片缺失）可提前暴露脆弱性。最终，从“预测内容”转向“适应内容”的结构性调整，使组件能在多变场景下保持稳定，无需依赖防御性隐藏规则。
Making Zigzag CSS Layouts With a Grid + Transform Trick
本文讲解如何使用CSS Grid和Transform属性创建锯齿状布局。首先分析Flexbox方案的缺陷：需要固定容器高度且破坏标签顺序。转而采用两列网格布局，并通过nth-child选择器对偶数项应用translateY(50%)实现交错下移。关键点在于CSS Transform的百分比计算基于元素自身尺寸而非父容器，因此偏移量能自适应元素高度。针对网格间距问题，计算偏移量时需加入一半间距值以对齐行间隙。为解决Transform不改变布局导致的容器溢出，需根据元素高度和间距为容器预留底部内边距。该方案保持源顺序与视觉顺序一致，有利于可访问性，且动画效果需兼容偏好减弱动效的用户。最终布局通过网格结构、Transform偏移和底部填充三个技术点组合实现。
A Scrollytelling Gift for Mum on Mother’s Day 2026
作者以纪念母亲的名义，运用前沿Web技术构建了一个交互式“滚动叙事”虚拟礼物。文章核心展示了如何利用新兴的CSS滚动吸附（Scroll Snap）事件与查询功能，实现基于滚动的页面切换与动态内容触发。作者详细阐释了技术实现：通过设置`scroll-snap-type`和`scroll-snap-align`定义吸附容器与目标，再借助`scrollsnapchanging`与`scrollsnapchange`的JavaScript事件监听，在用户滚动至“白天”或“夜晚”面板时，触发不同的动画逻辑。这种方法实现了确定性过渡与随机性元素（如UFO飞行路径、文字物理效果）的结合，创造了独特的交互体验。文章同时将技术选择与设计哲学相联系，说明如何用交互式故事和逻辑来应对混沌世界的灵感来源，本质上是一次将前沿浏览器特性（目前主要支持Chromium内核）应用于创意表达的教程式实践。
Using CSS corner-shape For Folded Corners
本文介绍了一种使用CSS corner-shape属性实现元素折叠角效果的技术方案，作为对传统clip-path方法的替代。作者首先回顾了基于clip-path的折角实现，然后详细阐述了如何利用border-radius配合corner-shape: bevel来创建折痕。核心步骤包括：定义表示折角坐标的CSS变量，通过border-top-right-radius和corner-top-right-shape: bevel在元素右上角创建折线；利用::before伪元素生成“翻折面”，并通过绝对定位将其放置到正确位置；使用overflow: clip处理溢出。为提升真实感，文章进一步引入了容器样式查询，根据x和y坐标值动态计算border-bottom-left-radius，从而模拟出符合透视的折痕与阴影效果。最终实现了一个仅通过两个坐标变量即可控制的可复用工具。文章最后对比了corner-shape方案与clip-path方案，指出corner-shape方案代码更简洁，但目前缺乏Safari和Firefox的支持。
Soon We Can Finally Banish JavaScript to the ShadowRealm
本文深入解析了TC39正在提案的JavaScript ShadowRealm API。文章首先厘清了JavaScript的“单线程”特性，指出其更准确的表述是每个“领域”单线程执行。一个JavaScript应用可以拥有多个相互隔离的领域，每个领域拥有独立的全局对象与内置对象，但领域间的通信和资源访问受限。现有领域机制虽能提供一定隔离，但不足以满足将不可信或需隔离的代码（如第三方库、测试代码）安全沙箱化的需求。 ShadowRealm正是为解决此问题而提出的新概念。它创建了一种特殊领域，该领域拥有自己干净的全局环境与内置对象，但代码仍共享宿主领域的主线程执行，从而避免了多线程通信的复杂性。这使得开发者可以轻松创建一个与主应用环境完全隔离的“洁净室”，在其中执行代码而不用担心污染全局作用域或相互干扰。尽管ShadowRealm提供了强大的隔离能力，但文章也明确指出它主要是一个完整性边界，而非绝对安全边界。其API设计（通过`evaluate`方法执行代码）与`eval`有相似之处，核心价值在于提供了一种轻量级、无新线程开销的代码隔离方案，特别适用于构建可靠的测试环境或封装不受信任的代码。
rotate()
CSS `rotate()` 函数是 `transform` 属性的一个核心功能，用于在二维平面内对元素进行旋转。其基本语法为 `rotate(
rotateZ()
CSS rotateZ()函数用于围绕Z轴旋转元素，实现顺时针或逆针方向的旋转。其视觉效果与rotate()函数相同，但更适用于三维变换场景，作为transform属性的变换函数之一。在三维变换中，rotateZ()需与rotateX()、rotateY()配合使用，并通常需先通过perspective属性定义观察视角，以模拟真实三维投影效果。例如，模拟硬币翻转动画时，可组合三个轴向旋转来创建逼真的翻滚效果。 该函数接受一个角度参数，支持度数（deg）、弧度（rad）、梯度（grad）和圈数（turn）等单位。正值表示顺时针旋转，负值表示逆时针旋转。尽管rotateZ()与rotate()在二维平面上表现一致，但在涉及三维变换或需要GPU硬件加速的复杂动画中，使用rotateZ()更为合适。它能促使浏览器将元素提升至独立的GPU合成层进行渲染，避免主线程重排，从而提升动画性能，尤其适用于包含大量DOM元素的页面。 在语义和规范层面，rotateZ()属于CSS Transforms Module Level 2规范，在所有现代浏览器中均获得基线支持。在构建三维效果（如等距卡片）时，使用rotateZ()而非rotate()是更符合语义的正确方式，确保了变换矩阵在三维空间中的计算准确性。
rotateY()
rotateY() 是 CSS 变换中的一个关键函数，用于使元素围绕其垂直的 Y 轴进行水平旋转，从而实现从左到右或从右到左的翻转效果。该函数是 CSS Transforms Module Level 2 规范的一部分，接受一个角度参数，支持度(deg)、弧度(rad)、圈数(turn)等单位，正值使元素右侧远离观察者，负值则相反。 要实现可见的三维旋转效果，必须在父元素上设置 `perspective` 属性以定义观察视角，较低的值使元素看起来更近，三维感更强。同时，通常需为子元素设置 `transform-style: preserve-3d`，确保其子元素也处于三维空间中而非被扁平化。 rotateY() 的典型应用包括：构建水平翻转卡片（通过结合 `backface-visibility: hidden` 和预旋转背面元素，实现悬停或点击时正反面切换）；创建3D图片轮播（将元素按圆柱体排列并控制整体旋转）；以及模拟书籍翻页效果（配合 `transform-origin: left center` 改变旋转轴心点，实现逼真的页面翻转）。在所有现代浏览器中均受支持。
rotateX()
CSS的rotateX()函数是实现三维变换的关键工具，它使元素围绕X轴（垂直轴）旋转，产生向后或向前的倾斜翻转效果。要启用自然的3D透视感，必须在其父容器上设置perspective属性，并通常结合transform-style: preserve-3d以保持子元素在三维空间中的渲染。rotateX()接受角度值参数，正值使元素顶部向后倾斜，负值则向前倾斜。该函数常用于构建交互式UI组件，例如实现点击或悬停时前后翻转的卡片效果，此时需配合backface-visibility: hidden隐藏背面。此外，它能与其他变换函数如rotateY()组合，创建复杂的多轴旋转动画，如3D加载指示器。通过调整transform-origin属性，还可以自定义旋转的轴心点（如从顶部边缘旋转），从而制作出如手风琴内容向下展开的错落效果。该特性在所有现代浏览器中均获得良好支持。
Computing and Displaying Discounted Prices in CSS
该教程介绍了一种纯CSS方案，用于计算和显示商品折扣价格，无需依赖JavaScript。核心在于利用CSS新特性与数学函数，直接从HTML元素的数据属性中读取原价和折扣率进行运算。具体实现上，通过增强的attr()函数解析data-price和data-discount属性为数值，结合calc()计算折扣后价格。为处理美元与美分的小数显示，采用round()函数取整得到美元部分，并用mod()函数提取小数部分乘以100得到美分值，最后通过CSS计数器counter()将其格式化为完整价格字符串。该方案展示了如何利用CSS数学函数（如mod()）和自定义属性完成原本需要脚本处理的计算，同时指出了attr()的数据类型解析等特性需关注浏览器支持进度，是未来可在日常开发中实践的CSS新能力应用。
What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More
本期聚焦多项CSS前沿技术及工具更新。Heerich.js引擎可生成基于SVG的可样式化3D体素场景，允许通过CSS变量进行视觉控制。Polypane浏览器推出代码片段库，提供一键提取核心HTML的功能。在交互层面，通过视图过渡动画实现焦点元素的动态效果成为新趋势，同时需考虑对动画偏好设置的适配。 CSS选择器与语法持续演进：`:nth-child(n of selector)` 已获得广泛支持，结合嵌套规则可实现更精确的元素定位。范围语法（使用 >、< 等比较运算符）为媒体查询和容器查询提供了更直观的表达方式，但需留意容器查询在不同浏览器中的支持进度。滚动驱动动画的复杂逻辑得到更清晰的解析，为即将到来的滚动触发动画功能奠定基础。 浏览器平台方面，Chrome 148引入仅名称容器查询、`revert-rule` 关键字等新特性；Safari 26.5则新增`:open`伪类及改进的`random()`函数。这些更新共同推动着网页表现力与交互能力的提升。
Cross-Document View Transitions: The Gotchas Nobody Mentions
本文针对跨文档视图转换（Cross-Document View Transitions）在实际实施中遇到的隐蔽问题，进行了深入的故障排查与解析。作者指出了一个关键的技术演进：早期文档中常见的``启用方式已被废弃，当前正确的启用方式是通过CSS的`@view-transition`规则，这提供了更细粒度的控制能力，例如可根据媒体查询条件启用。文章重点剖析了导致转换静默失败的两大核心陷阱。其一是跨文档转换存在一个严格的4秒超时限制，若新页面在导航开始后的4秒内未达到可渲染状态，转换将直接终止。此问题在本地环境难以复现，但在生产环境因网络延迟或资源加载阻塞而极易出现。作者建议通过`pagereveal`事件监听调试此类失败，并可通过``提示浏览器等待关键元素就绪，以平衡渲染时机。此外，文章提及了转换过程中可能出现的图像比例扭曲等视觉问题，并预告了下一部分将探讨在大规模元素下管理`view-transition-name`的扩展性方案。
Stack Overflow: When We Stop Asking
Stack Overflow问题数量从2014年高峰的月均20万急剧下降到2026年不足3千，AI是直接冲击，但更早源于平台管理问题：为控制规模而过度关闭无法立即回答的问题，强调内容质量却导致社区封闭，新手难以提问且易受挫。AI虽提供快速答案，但生成的代码存在缺陷：Cornell研究表明AI代码更简单重复、有维护问题，MIT研究指出AI缺乏人类工程师
The State of CSS Centering in 2026
本文深入探讨了2026年CSS居中的现状，指出尽管看似简单，但居中问题因属性和布局方式众多而常令人困惑。作者统计发现虽有近100种理论方法，但多数不推荐，真正有效且独特的方式不足15种。文章核心观点是，居中本质是CSS对齐这一复杂主题的特例，关键在于理解不同布局（如Flexbox、Grid、普通流）下对齐逻辑的根本差异，而非机械复制代码。 作者强调，应根据具体场景选择合适方法，并批判了依赖绝对定位加变换（`translate`）等过时技巧。文章重点介绍了多项现代CSS特性：`text-box`属性可精确控制文本的垂直对齐，解决传统行高带来的视觉偏差；`anchor-center`值为锚点定位提供了新的居中基准，允许元素相对于锚点自身中心进行对齐，与传统的区域中心（`center`）形成区别。结论是，通过掌握对齐原理和运用新特性，开发者能更精准、高效地实现居中，应对单元素或多元素等复杂布局需求。