新特性速递：focus()行为新增focusVisible控制
浏览器原生focus()方法新增focusVisible参数，可精准控制元素获取焦点时是否显示默认的outline轮廓样式。默认情况下，通过JavaScript主动调用focus()触发焦点时，部分浏览器不会显示焦点轮廓，导致用户无法直观感知焦点位置。focusVisible参数允许开发者显式强制显示或隐藏该轮廓，例如设置`focus({focusVisible: true})`即可让链接或按钮在程序化聚焦时呈现明显的视觉提示，提升无障碍体验；反之设置为false则可抑制轮廓显示。该特性提供了比传统CSS选择器`:focus-visible`更直接的编程控制方式，尤其适用于需要统一管理焦点视觉反馈的交互场景。作者同时指出，尽管该特性对用户体验有益，但受兼容性和国内开发环境影响，实际应用前景可能有限。
Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()`
Web对比度问题长期存在，依赖JavaScript库无法规模化解决，CSS需要原生方案。CSS Color Level 5引入的`contrast-color()`函数直接在样式计算阶段解决这一问题：输入背景颜色，自动返回黑色或白色中对比度更高的文本颜色，无需运行时脚本或构建步骤。该函数当前版本（Level 5）输出黑白二元颜色，算法由浏览器定义，目前普遍采用WCAG 2.x相对亮度公式，但这种“UA定义”设计允许未来替换为更优算法（如APCA感知对比度算法），尽管APCA的标准化仍不确定。Level 6计划扩展支持候选颜色列表和目标对比度比率，但尚未实现。 浏览器支持方面，
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()`函数），但指出其尚未被浏览器支持，因此上述基于现有标准的模式是当前实现规模化过渡的实用路径。
1分钟速度了解text-align match-parent声明
text-align:match-parent 是一个用于精确继承父元素对齐方式的 CSS 属性值，它解决了在 CSS 逻辑属性（如 text-align:end）场景下无法直接通过 getComputedStyle 获取具体方向（left 或 right）的问题。当父元素设置 text-align:end 时，子元素默认计算值仍为 end，而使用 match-parent 后，浏览器会根据当前书写方向（direction）返回确切的 left 或 right，从而提供明确的对齐信息。然而，该特性实际应用极少，因为它依赖于 direction 属性的使用，且需要获取 textAlign 计算值的需求本身较为小众，因此在常规开发中几乎没有必要使用。尽管如此，其兼容性却异常广泛，所有主流浏览器均支持（Chrome 需加 -webkit- 前缀），作者戏称其可用于替代 text-align:inherit 以增加代码的“专业感”。总体而言，这是一个技术意义明确但实用场景狭窄的 CSS 特性，了解其存在和作用即可。
JSON.rawJSON方法的作用是什么？
JSON.rawJSON方法是JavaScript中用于解决JSON.stringify序列化时精度丢失问题的实用工具。它允许开发者创建一个原始JSON对象，当这个对象被stringify序列化时，会将传入的JSON文本原样输出，不进行转义或修改。这主要解决了超大整数或BigInt类型数据在序列化时因浮点数精度限制导致的错误，例如超过2^53的整数会被自动四舍五入，而rawJSON能保持原值和数字类型，避免后端接口接收异常。使用时，必须传入合法的JSON原语（如数字、字符串、布尔值或null），不能是
光标的形状也能设置了，就是CSS caret-shape属性
CSS引入了caret-shape属性，允许开发者自定义文本输入光标的形状。该属性提供四种值：bar（默认的细竖条光标）、block（方块光标，适用于覆盖式输入场景）、underscore（下划线光标，适合模拟打字机或下划线样式）以及auto（自动选择）。每个值通过GIF动图展示了实际效果，帮助直观理解差异。 与caret-shape同时发布的还有caret-animation属性，用于控制光标的闪烁行为。默认值auto保持闪烁，manual则禁用闪烁，允许开发者通过动画实现自定义效果，例如文章中演示的七色变色闪烁案例。此外，这些属性可通过caret缩写属性合并设置，但需注意caret-color兼容性较早，而缩写可能影响现有支持，因此建议谨慎使用。 该特性目前仅Chrome浏览器支持，属于渐进增强，不会影响未支持环境下的默认表现。整体而言，这些属性为网页交互设计提供了更灵活的光标定制选项。
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`的扩展性方案。
The State of CSS Centering in 2026
本文深入探讨了2026年CSS居中的现状，指出尽管看似简单，但居中问题因属性和布局方式众多而常令人困惑。作者统计发现虽有近100种理论方法，但多数不推荐，真正有效且独特的方式不足15种。文章核心观点是，居中本质是CSS对齐这一复杂主题的特例，关键在于理解不同布局（如Flexbox、Grid、普通流）下对齐逻辑的根本差异，而非机械复制代码。 作者强调，应根据具体场景选择合适方法，并批判了依赖绝对定位加变换（`translate`）等过时技巧。文章重点介绍了多项现代CSS特性：`text-box`属性可精确控制文本的垂直对齐，解决传统行高带来的视觉偏差；`anchor-center`值为锚点定位提供了新的居中基准，允许元素相对于锚点自身中心进行对齐，与传统的区域中心（`center`）形成区别。结论是，通过掌握对齐原理和运用新特性，开发者能更精准、高效地实现居中，应对单元素或多元素等复杂布局需求。
Smashing Animations Part 8: Theming Animations Using CSS Relative Colour
该教程探讨了如何利用CSS相对颜色（Relative Colour）与OKLCH色彩空间，为动画图形创建灵活且易于维护的主题系统。作者指出，传统方法中手动从基础色生成不同明度、饱和度和色相的调色板，一旦更改基础色就需要重复劳动，效率低下。通过采用相对颜色语法，可以基于一个基础色，通过计算自动派生出所有需要的衍生色。这要求理解绝对变化（如加减固定值）与比例变化（如乘法）的区别：前者在更改基础色时可能导致关系断裂，而后者能保持颜色间的比例关系。具体实践上，作者定义了三条规则：移动明度、缩放色度、旋转色相，从而构建出填充、描边、渐变等完整配色方案。更进一步，通过注册CSS自定义属性（`@property`），可以将颜色通道视为可动画的数值，从而实现基础色本身的平滑动画。所有从它派生的颜色随之自动更新，无需逐一手动调整。这大大简化了动态主题（如日夜模式、季节主题）的实现，并使得创建如光照效果等复杂交互动画变得更加高效和直观。