“为什么我的 3D 视图过渡不生效？！”Sunkanmi 直面这一困扰，并提供了优雅的解决方案。 《为什么我的 3D 视图过渡不生效？》最初以手写形式创作，并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。

这是撰写屏幕阅读器内容时需要牢记的一个细微之处。 在最初由 CSS-Tricks 手写并发布、充满爱意的导航标签中，无需包含“导航”一词。你也应该订阅我们的通讯。

创造令人难忘的体验有多种方式。有时，它仅仅是一个流畅完成的操作表单。但在此，我感兴趣分享的是，当我希望一个网站显得生动且令人铭记时，我所采用的技巧。 《创造令人难忘的 Web 体验：现代 CSS 工具集》最初由我手写，并满怀爱意发布于 CSS-Tricks。你也应该订阅那封通讯。

我说的是一回事，想的却是另一回事；我用的也是另一回事，却需要的是这一回事。正在为未来的自己比较滚动驱动动画、滚动触发动画、容器查询滚动状态以及视图转换。 滚动驱动、滚动触发、滚动状态和视图转换最初由我手写，并满怀爱意地发布于 CSS-Tricks。你也应该订阅那封通讯。

我们再次深入探讨 CSS 饼图！此次，作者 Antoine Villepreux 展示了无需一行 JavaScript 即可实现的语义化且灵活的图表。 《再次尝试完美的 CSS 饼图……无需 JavaScript！》最初为手写内容，并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。

CSS 中的 offset-path 属性定义了元素在动画过程中遵循的移动路径。 该属性最初名为 motion-path。根据规范，此属性及其他所有相关的 motion-* 属性均被重命名为 offset-*。我们正在更改…… offset-path 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅其通讯。

CSS 的 `@custom-media` 规则允许为媒体查询创建别名。 `@custom-media` 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。

@function 规则用于定义 CSS 自定义函数。这些自定义函数是可重用的 CSS 代码块，可以接受参数，包含复杂的逻辑，并基于该逻辑返回值。 @function 最初由手写，并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。

CSS 的 `::search-text` 伪元素用于选择浏览器“在页面中查找”功能中匹配到的文本。 `::search-text` 最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅他们的通讯。

在上一篇文章中，我讨论了为何以及如何使用 Astro 中的 Markdown 组件。 本文将在此基础上进一步展开，帮助您无论在何种框架中使用，都能实现 Markdown 的全局支持。因此…… Astro Markdown 组件工具：专为任意框架设计，由 CSS-Tricks 亲手编写并充满热爱地发布。您也真的应该订阅我们的通讯。

旧方法（在 Safari 中测试但手头没有 Safari 时）、新方法（::checkmark）、中间方案（使用 HTML 的锚点定位）等。 !important 是什么 #12：Safari 测试、::checkmark、HTML 锚点定位等内容最初由手写完成，并充满爱意地发布于 CSS-Tricks。你也应该订阅该通讯。

在出现类似 `::nth-letter` 这样的功能之前，我们仍可以利用现有的 CSS 特性（如 `letter-spacing`、`::first-word` 和 `::first-line`）实现一些非常出色的文本效果。 使用 CSS `letter-spacing` 揭示文本，最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。

这并不完全关乎人工智能。它关乎人工智能时代的技术写作。我对此有一些想法，希望正在阅读的人类朋友们觉得有帮助。 《人工智能时代的技术写作》最初由手写完成，并满怀爱意发表于 CSS-Tricks。你也应该订阅那封通讯。

页面上的每个 view-transition-name 必须是唯一的。问题在于，CSS 中的每个伪元素选择器都针对特定名称，因此你的动画样式会爆炸成难以管理的冗长选择器列表。 跨文档视图转换：跨越数百个元素进行扩展，最初由 CSS-Tricks 亲手撰写并充满爱意地发布。你也应该订阅他们的通讯。

尽管在线资源不计其数，但在尝试居中元素时很容易感到困惑。虽然有文档记录了解决方案，但你真的理解所选代码为何有效吗？让我们看看 2026 年当前的居中选项状态。 《2026 年 CSS 居中状态》最初由手写，并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。

看到 Stack Overflow 上的问题数量急剧下降，依然让人如遭重击。这是否意味着我们行业的学习方式正在发生变化？ Stack Overflow: When We Stop Asking 最初由手写，并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。

这是关于跨文档视图转换的两部分系列文章的第一部分，涵盖了所有需要注意的细节，从弃用旧方式到启用新方式，再到一个鲜为人知的 4 秒超时机制。 《跨文档视图转换：无人提及的注意事项》最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅我们的通讯。

如果你对可自定义样式的 3D 体素场景、飞行焦点动画或新的 CSS 语法感兴趣，那么本期《!important 是什么》绝对适合你。 《!important 是什么》第 11 期：3D 体素场景、飞行焦点、CSS 语法及其他内容，最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅这封通讯。

巧妙利用 CSS 计算并显示折扣后的产品价格：只需提供原价和折扣金额，即可借助现代 CSS 特性（如 attr()、mod() 和 round()）实现。 《CSS 中计算与显示折扣价格》一文由作者亲手编写，并满怀热情地发布于 CSS-Tricks。强烈建议订阅其通讯。

rotateX() 函数在三维空间中绕 x 轴旋转元素。rotateX() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。

rotateY() 函数使元素围绕其垂直 y 轴进行旋转。 rotateY() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。

rotateZ() 函数使元素围绕其 z 轴进行旋转，方向可为顺时针或逆时针。 rotateZ() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。

rotate() 函数可在二维平面内使元素顺时针或逆时针旋转。 rotate() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。

拟议中的 ShadowRealm API 引入了一种专为隔离而设计的新类型 realm，仅此而已。 不久后，我们终于可以将 JavaScript 驱逐至 ShadowRealm。本文最初由作者亲手撰写，并充满爱意地发布于 CSS-Tricks。您也应当订阅该通讯。

当键盘用户按 Tab 键进入表格时，焦点会落在某个单元格上。随后他们按下方向键试图横向浏览该行，但没有任何反应。屏幕阅读器用户从未注意到这个问题，因为他们导航的是无障碍树，而非滚动容器。 为何键盘用户无法滚动您的溢出容器——最初手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅我们的通讯。

我发现了 Kitty Giraudel 的折叠角技巧。最近我对角形状颇感兴趣，因此想到也可以利用角形状来创建折叠角。 使用 CSS 角形状制作折叠角，最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。

我将解释我的母亲如何启发了这次 2026 年母亲节滚动叙事实验——同时也启发了我对开发乃至生活的态度。 2026 年母亲节献给母亲的滚动叙事礼物，最初为手写，并充满爱意发布于 CSS-Tricks。你也真的应该订阅那封通讯。

Mat Marquis 谈 Google 将网页标准层面的 U2 专辑营销方式付诸实施： 作为 Chrome 用户，您最近已收到以 4GB 传输形式提供的 Gemini Nano；无需任何授权或许可。若将其移除， Google 的 Prompt API 最初由作者亲手编写，并满怀爱意地发布于 CSS-Tricks。您真的应该订阅该通讯。

大多数网格布局整齐地排列成行，完美对齐，如同列阵的士兵。但有时你希望拥有更具节奏感的布局，例如之字形图案。以下是如何使用 CSS Grid 实现它的方法。 使用 Grid 与 Transform 技巧制作之字形 CSS 布局，最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅我们的通讯。

让多列卡片整齐对齐是我们都曾头疼的问题，而当涉及固定高度时，难度更是倍增。 固定高度卡片：看似脆弱实则复杂，最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。

开发者们一直在尝试 HTML-in-Canvas（一种基于六边形的世界地图分析功能）、面向电子墨水设备的 Web 操作系统、通过 content 属性替换图像源等更多技术。这就是 What's !important #10。 What's !important #10：HTML-in-Canvas、六边形地图、电子墨水优化及其他内容，最初由手写并在 CSS-Tricks 上充满爱意地发布。您真的应该订阅这份通讯。

CSS 即将迎来用于生成随机数的新功能！但通往这一目标的道路漫长而曲折。 《CSS 中原生随机性的重要性》一文由我亲笔撰写，并满怀爱意发表于 CSS-Tricks。您真的应该订阅他们的通讯。

contrast() 滤镜函数可增加或减少元素的对比度。 contrast() 最初由手写并充满爱意地发布于 CSS-Tricks。您也强烈建议订阅其通讯。

contrast-color() 函数接收一个颜色值，并返回黑色或白色中与该值对比度最高的颜色。 contrast-color() 最初由手写完成，并满怀爱意地发布在 CSS-Tricks 上。你真的很应该订阅他们的通讯。

我的垫片或许会让掌权者找到另一个理由声称原生支持并非必要；或者，如果大量用户在实践中采用了我的`:nth-letter` 技巧，浏览器开发者们可能会意识到真正实现它的必要性。 现在就来使用尚不存在的 `::nth-letter` 选择器。本文最初由我手写，并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。

测试 CSS 较新的滚动动画功能，以重现 Apple 官网中 Apple Vision Pro 头显的复杂动画效果。 该 CSS 动画最初由手写完成，并充满诚意地发布于 CSS-Tricks。强烈建议订阅他们的通讯。

我使用 Markdown 组件主要有两个原因：(1) 减少需要编写的标记代码量；(2) 转换排版符号。以下是其工作原理。 《为 Astro 增强 Markdown 组件》一文由作者亲手撰写，并充满诚意地发布于 CSS-Tricks。你也应该订阅他们的通讯。

虽然 Astro 原生支持通过 .md 文件使用 Markdown，但我认为使用 MDX 可以进一步提升你的 Markdown 体验。 Markdown + Astro = ❤️ 这篇文章最初由手写，并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。

本期《What's !important》为您带来 clip-path 拼图、视图转换工具包、仅名称容器，以及一系列其他引人注目的 Web 平台新功能概览。 《What's !important #9：clip-path 拼图、视图转换工具包、仅名称容器及其他》最初由 CSS-Tricks 亲手撰写并充满热情地发布。您真的应该订阅这份通讯。

每项技术都应配有使用指南。虽然 JavaScript 模块让编写‘大型’程序变得更加容易，但如果缺乏使用它们的原理或体系，项目很容易变得难以维护。 《精心设计的 JavaScript 模块系统：你的首要架构决策》一文最初由作者手写，并充满热情地发布于 CSS-Tricks。你也应该订阅他们的通讯。

CSS 状态管理中最著名的示例之一是复选框技巧。但如果我们希望一个组件处于三种、四种甚至七种不同的模式之一，这时就需要用到“单选按钮状态机”了。 “单选按钮状态机”最初是手工编写，并充满热情地发布在 CSS-Tricks 网站上。你真的很应该订阅他们的通讯。

想尝试视图过渡效果吗？Sunkanmi 提供了大量现成的通用过渡方案，您可以立即将其集成到网站中！ 本文最初由 Sunkanmi 亲手撰写，并充满热情地发布于 CSS-Tricks。强烈建议您订阅其通讯。

一种巧妙的方法用于在日历中选择多个日期：利用 `:nth-child()` 选择器中"n of"语法承担主要工作……甚至包括在 JavaScript 中。

颜色是什么？Sunkanmi Fafowora 解释了 CSS 中的一项日常任务如何用于创造更好的色彩体验。

light-dark() 函数目前仅支持两种配色方案。它是否应该支持其他方案？Sunkanmi Fafowora 的回答是“是”也“否”。

在这篇文章中，作者 Chris Sabourin 将详细介绍现代 CSS 功能如何构建一个功能齐全、交互式电梯，它能知道自己当前的位置、目的地以及到达所需的时间。无需 JavaScript。

以下是一种用于为添加到购物车的产品制作动画的方法，该方法使用了改进版的“复选框技巧”来处理无限数量的商品。

长篇内容中的图片可以（也应该）做更多的事情，而不仅仅是插图。它们有助于设定节奏，影响读者的感受，并增添仅凭文字有时无法传达的特质。

在本第三章也就是最后一章中，我们将通过添加 JavaScript 来实现交互性，从一个简单的 `:hover` 效果开始，最终实现一个响应式、会随着鼠标实时移动而产生的膨胀文本效果。

在本章中，我们将探讨动画效果、添加过渡以及尝试不同变体的方法。我们将研究运动如何增强深度，以及细微的调整如何创造出全新的氛围。