RSS CSS-Tricks 关注 CSS Tricks是一个流行的网站，旨在为web开发者提供有用的技巧、技术和资源，特别关注CSS和相关技术。 RSS css-tricks.com CSS-Tricks css-tricks.com
使用滚动驱动动画实现相反滚动方向 有时设计师会有些看似荒谬的想法，但最终你会觉得它们妙极了。我在处理这个概念时便经历了这样的过程：需要构建两列物品，当用户滚动页面时，它们朝相反方向移动。 CodePen 嵌入回退 注：此…… 《使用滚动驱动动画实现相反滚动方向》最初由我手写完成，并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。 Using Scroll-Driven Animations for Opposing Scroll Directions css-tricks.com
滚动触发动画初探 让我们探讨一下滚动驱动动画与滚动触发动画之间的差异。 《滚动触发动画初探》最初由手写，并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。 A First Look at Scroll-Triggered Animations css-tricks.com
ariaNotify() 的塞壬之歌 有一个全新的 ariaNotify() 方法——由 WAI-ARIA 1.3 规范定义——提供了一种通过代码在屏幕阅读器中触发叙述的手段。 ariaNotify() 的“塞壬之歌”最初由手写并充满爱意地发表于 CSS-Tricks。你也应该订阅他们的通讯。 The Siren Song of ariaNotify() css-tricks.com
为此致敬 Props for That 可基于浏览器中 CSS 通常无法获取的信息生成实时属性，例如鼠标位置、进度值、特定表单状态、当前时间以及滚动速度等。 Prop For That 最初由手写完成，并满怀爱意地发布于 CSS-Tricks。你也应该订阅其通讯。 Prop For That css-tricks.com
什么是!important #13：@function、alpha()、CSS Wordle 等 CSS 函数、alpha() 函数、网格轨道、一些你可能不知道的对话框细节、CSS Wordle 等——这就是当前的 !important 内容。 What's !important #13：@function、alpha()、CSS Wordle 及其他内容，最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅该通讯。 What’s !important #13: @function, alpha(), CSS Wordle, and More css-tricks.com
为什么我的 3D 视图切换无法正常工作？ “为什么我的 3D 视图过渡不生效？！”Sunkanmi 直面这一困扰，并提供了优雅的解决方案。 《为什么我的 3D 视图过渡不生效？》最初以手写形式创作，并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。 Why Isn’t My 3D View Transition Working? css-tricks.com
无需在导航标签中包含“导航”一词。 这是撰写屏幕阅读器内容时需要牢记的一个细微之处。 在最初由 CSS-Tricks 手写并发布、充满爱意的导航标签中，无需包含“导航”一词。你也应该订阅我们的通讯。 There’s no need to include ‘navigation’ in your navigation labels css-tricks.com
打造令人难忘的网页体验：现代 CSS 工具集 创造令人难忘的体验有多种方式。有时，它仅仅是一个流畅完成的操作表单。但在此，我感兴趣分享的是，当我希望一个网站显得生动且令人铭记时，我所采用的技巧。 《创造令人难忘的 Web 体验：现代 CSS 工具集》最初由我手写，并满怀爱意发布于 CSS-Tricks。你也应该订阅那封通讯。 Creating Memorable Web Experiences: A Modern CSS Toolkit css-tricks.com
滚动驱动、滚动触发、滚动状态与视图转换 我说的是一回事，想的却是另一回事；我用的也是另一回事，却需要的是这一回事。正在为未来的自己比较滚动驱动动画、滚动触发动画、容器查询滚动状态以及视图转换。 滚动驱动、滚动触发、滚动状态和视图转换最初由我手写，并满怀爱意地发布于 CSS-Tricks。你也应该订阅那封通讯。 Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions css-tricks.com
再次尝试绘制完美的 CSS 饼图……无需 JavaScript！ 我们再次深入探讨 CSS 饼图！此次，作者 Antoine Villepreux 展示了无需一行 JavaScript 即可实现的语义化且灵活的图表。 《再次尝试完美的 CSS 饼图……无需 JavaScript！》最初为手写内容，并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 Another Stab at the Perfect CSS Pie Chart… Sans JavaScript! css-tricks.com
偏移路径 CSS 中的 offset-path 属性定义了元素在动画过程中遵循的移动路径。 该属性最初名为 motion-path。根据规范，此属性及其他所有相关的 motion-* 属性均被重命名为 offset-*。我们正在更改…… offset-path 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅其通讯。 offset-path css-tricks.com
@custom-media CSS 的 `@custom-media` 规则允许为媒体查询创建别名。 `@custom-media` 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 @custom-media css-tricks.com
@function @function 规则用于定义 CSS 自定义函数。这些自定义函数是可重用的 CSS 代码块，可以接受参数，包含复杂的逻辑，并基于该逻辑返回值。 @function 最初由手写，并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。 @function css-tricks.com
搜索文本 CSS 的 `::search-text` 伪元素用于选择浏览器“在页面中查找”功能中匹配到的文本。 `::search-text` 最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅他们的通讯。 ::search-text css-tricks.com
适用于任何框架的 Astro Markdown 组件实用程序 在上一篇文章中，我讨论了为何以及如何使用 Astro 中的 Markdown 组件。 本文将在此基础上进一步展开，帮助您无论在何种框架中使用，都能实现 Markdown 的全局支持。因此…… Astro Markdown 组件工具：专为任意框架设计，由 CSS-Tricks 亲手编写并充满热爱地发布。您也真的应该订阅我们的通讯。 Astro Markdown Component Utility for Any Framework css-tricks.com
重要事项 #12：Safari 测试、::checkmark、HTML 锚点定位等 旧方法（在 Safari 中测试但手头没有 Safari 时）、新方法（::checkmark）、中间方案（使用 HTML 的锚点定位）等。 !important 是什么 #12：Safari 测试、::checkmark、HTML 锚点定位等内容最初由手写完成，并充满爱意地发布于 CSS-Tricks。你也应该订阅该通讯。 What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More css-tricks.com
使用 CSS 字母间距显示文本 在出现类似 `::nth-letter` 这样的功能之前，我们仍可以利用现有的 CSS 特性（如 `letter-spacing`、`::first-word` 和 `::first-line`）实现一些非常出色的文本效果。 使用 CSS `letter-spacing` 揭示文本，最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。 Revealing Text With CSS letter-spacing css-tricks.com
人工智能时代的技术写作 这并不完全关乎人工智能。它关乎人工智能时代的技术写作。我对此有一些想法，希望正在阅读的人类朋友们觉得有帮助。 《人工智能时代的技术写作》最初由手写完成，并满怀爱意发表于 CSS-Tricks。你也应该订阅那封通讯。 Technical Writing in the AI Age css-tricks.com
跨文档视图过渡：跨越数百个元素进行扩展 页面上的每个 view-transition-name 必须是唯一的。问题在于，CSS 中的每个伪元素选择器都针对特定名称，因此你的动画样式会爆炸成难以管理的冗长选择器列表。 跨文档视图转换：跨越数百个元素进行扩展，最初由 CSS-Tricks 亲手撰写并充满爱意地发布。你也应该订阅他们的通讯。 Cross-Document View Transitions: Scaling Across Hundreds of Elements css-tricks.com
2026 年 CSS 居中状态 尽管在线资源不计其数，但在尝试居中元素时很容易感到困惑。虽然有文档记录了解决方案，但你真的理解所选代码为何有效吗？让我们看看 2026 年当前的居中选项状态。 《2026 年 CSS 居中状态》最初由手写，并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。 The State of CSS Centering in 2026 css-tricks.com
Stack Overflow：当我们不再提问时 看到 Stack Overflow 上的问题数量急剧下降，依然让人如遭重击。这是否意味着我们行业的学习方式正在发生变化？ Stack Overflow: When We Stop Asking 最初由手写，并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。 Stack Overflow: When We Stop Asking css-tricks.com
跨文档视图过渡：那些无人提及的陷阱 这是关于跨文档视图转换的两部分系列文章的第一部分，涵盖了所有需要注意的细节，从弃用旧方式到启用新方式，再到一个鲜为人知的 4 秒超时机制。 《跨文档视图转换：无人提及的注意事项》最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅我们的通讯。 Cross-Document View Transitions: The Gotchas Nobody Mentions css-tricks.com
什么是!important #11：3D 体素场景、飞行焦点、CSS 语法及其他 如果你对可自定义样式的 3D 体素场景、飞行焦点动画或新的 CSS 语法感兴趣，那么本期《!important 是什么》绝对适合你。 《!important 是什么》第 11 期：3D 体素场景、飞行焦点、CSS 语法及其他内容，最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅这封通讯。 What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More css-tricks.com
用 CSS 计算和显示折扣价格 巧妙利用 CSS 计算并显示折扣后的产品价格：只需提供原价和折扣金额，即可借助现代 CSS 特性（如 attr()、mod() 和 round()）实现。 《CSS 中计算与显示折扣价格》一文由作者亲手编写，并满怀热情地发布于 CSS-Tricks。强烈建议订阅其通讯。 Computing and Displaying Discounted Prices in CSS css-tricks.com
rotateX() rotateX() 函数在三维空间中绕 x 轴旋转元素。rotateX() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 rotateX() css-tricks.com
rotateY() rotateY() 函数使元素围绕其垂直 y 轴进行旋转。 rotateY() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 rotateY() css-tricks.com
rotateZ() rotateZ() 函数使元素围绕其 z 轴进行旋转，方向可为顺时针或逆时针。 rotateZ() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 rotateZ() css-tricks.com
rotate() rotate() 函数可在二维平面内使元素顺时针或逆时针旋转。 rotate() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 rotate() css-tricks.com
“不久后，我们终于可以将 JavaScript 驱逐至 ShadowRealm" 拟议中的 ShadowRealm API 引入了一种专为隔离而设计的新类型 realm，仅此而已。 不久后，我们终于可以将 JavaScript 驱逐至 ShadowRealm。本文最初由作者亲手撰写，并充满爱意地发布于 CSS-Tricks。您也应当订阅该通讯。 Soon We Can Finally Banish JavaScript to the ShadowRealm css-tricks.com
为什么键盘用户不能滚动你的溢出容器 当键盘用户按 Tab 键进入表格时，焦点会落在某个单元格上。随后他们按下方向键试图横向浏览该行，但没有任何反应。屏幕阅读器用户从未注意到这个问题，因为他们导航的是无障碍树，而非滚动容器。 为何键盘用户无法滚动您的溢出容器——最初手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅我们的通讯。 Why Keyboard Users Can’t Scroll Your Overflow Containers css-tricks.com
使用 CSS 的 corner-shape 实现折叠角效果 我发现了 Kitty Giraudel 的折叠角技巧。最近我对角形状颇感兴趣，因此想到也可以利用角形状来创建折叠角。 使用 CSS 角形状制作折叠角，最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。 Using CSS corner-shape For Folded Corners css-tricks.com
2026 年母亲节送给妈妈的滚动叙事礼物 我将解释我的母亲如何启发了这次 2026 年母亲节滚动叙事实验——同时也启发了我对开发乃至生活的态度。 2026 年母亲节献给母亲的滚动叙事礼物，最初为手写，并充满爱意发布于 CSS-Tricks。你也真的应该订阅那封通讯。 A Scrollytelling Gift for Mum on Mother’s Day 2026 css-tricks.com
Google 提示词 API Mat Marquis 谈 Google 将网页标准层面的 U2 专辑营销方式付诸实施： 作为 Chrome 用户，您最近已收到以 4GB 传输形式提供的 Gemini Nano；无需任何授权或许可。若将其移除， Google 的 Prompt API 最初由作者亲手编写，并满怀爱意地发布于 CSS-Tricks。您真的应该订阅该通讯。 Google’s Prompt API css-tricks.com
使用网格与变换技巧制作锯齿形 CSS 布局 大多数网格布局整齐地排列成行，完美对齐，如同列阵的士兵。但有时你希望拥有更具节奏感的布局，例如之字形图案。以下是如何使用 CSS Grid 实现它的方法。 使用 Grid 与 Transform 技巧制作之字形 CSS 布局，最初由手写并在 CSS-Tricks 上充满爱意地发布。你也应该订阅我们的通讯。 Making Zigzag CSS Layouts With a Grid + Transform Trick css-tricks.com
固定高度卡：比看起来更脆弱 让多列卡片整齐对齐是我们都曾头疼的问题，而当涉及固定高度时，难度更是倍增。 固定高度卡片：看似脆弱实则复杂，最初由手写并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。 Fixed-Height Cards: More Fragile Than They Look css-tricks.com
什么是!important #10：Canvas 中的 HTML、六边形地图、电子墨水优化等 开发者们一直在尝试 HTML-in-Canvas（一种基于六边形的世界地图分析功能）、面向电子墨水设备的 Web 操作系统、通过 content 属性替换图像源等更多技术。这就是 What's !important #10。 What's !important #10：HTML-in-Canvas、六边形地图、电子墨水优化及其他内容，最初由手写并在 CSS-Tricks 上充满爱意地发布。您真的应该订阅这份通讯。 What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More css-tricks.com
CSS 中本地随机性的重要性 CSS 即将迎来用于生成随机数的新功能！但通往这一目标的道路漫长而曲折。 《CSS 中原生随机性的重要性》一文由我亲笔撰写，并满怀爱意发表于 CSS-Tricks。您真的应该订阅他们的通讯。 The Importance of Native Randomness in CSS css-tricks.com
对比() contrast() 滤镜函数可增加或减少元素的对比度。 contrast() 最初由手写并充满爱意地发布于 CSS-Tricks。您也强烈建议订阅其通讯。 contrast() css-tricks.com
对比色 contrast-color() 函数接收一个颜色值，并返回黑色或白色中与该值对比度最高的颜色。 contrast-color() 最初由手写完成，并满怀爱意地发布在 CSS-Tricks 上。你真的很应该订阅他们的通讯。 contrast-color() css-tricks.com
现在让我们使用不存在的 ：：nth 字母选择器 我的垫片或许会让掌权者找到另一个理由声称原生支持并非必要；或者，如果大量用户在实践中采用了我的`:nth-letter` 技巧，浏览器开发者们可能会意识到真正实现它的必要性。 现在就来使用尚不存在的 `::nth-letter` 选择器。本文最初由我手写，并满怀爱意发表于 CSS-Tricks。你也应该订阅他们的通讯。 Let’s Use the Nonexistent ::nth-letter Selector Now css-tricks.com
使用 CSS 重现 Apple Vision Pro 的动画效果 测试 CSS 较新的滚动动画功能，以重现 Apple 官网中 Apple Vision Pro 头显的复杂动画效果。 该 CSS 动画最初由手写完成，并充满诚意地发布于 CSS-Tricks。强烈建议订阅他们的通讯。 Recreating Apple’s Vision Pro Animation in CSS css-tricks.com
使用 Markdown 组件增强 Astro 我使用 Markdown 组件主要有两个原因：(1) 减少需要编写的标记代码量；(2) 转换排版符号。以下是其工作原理。 《为 Astro 增强 Markdown 组件》一文由作者亲手撰写，并充满诚意地发布于 CSS-Tricks。你也应该订阅他们的通讯。 Enhancing Astro With a Markdown Component css-tricks.com
Markdown + Astro = ❤️ 虽然 Astro 原生支持通过 .md 文件使用 Markdown，但我认为使用 MDX 可以进一步提升你的 Markdown 体验。 Markdown + Astro = ❤️ 这篇文章最初由手写，并充满爱意地发布于 CSS-Tricks。你也应该订阅他们的通讯。 Markdown + Astro = ❤️ css-tricks.com
CSS !important 规则第 9 讲：clip-path 拼图、视图转换工具包、仅名称容器等 本期《What's !important》为您带来 clip-path 拼图、视图转换工具包、仅名称容器，以及一系列其他引人注目的 Web 平台新功能概览。 《What's !important #9：clip-path 拼图、视图转换工具包、仅名称容器及其他》最初由 CSS-Tricks 亲手撰写并充满热情地发布。您真的应该订阅这份通讯。 What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More css-tricks.com
精心设计的 JavaScript 模块系统是你首要的架构决策。 每项技术都应配有使用指南。虽然 JavaScript 模块让编写‘大型’程序变得更加容易，但如果缺乏使用它们的原理或体系，项目很容易变得难以维护。 《精心设计的 JavaScript 模块系统：你的首要架构决策》一文最初由作者手写，并充满热情地发布于 CSS-Tricks。你也应该订阅他们的通讯。 A Well-Designed JavaScript Module System is Your First Architecture Decision css-tricks.com
无线电状态机 CSS 状态管理中最著名的示例之一是复选框技巧。但如果我们希望一个组件处于三种、四种甚至七种不同的模式之一，这时就需要用到“单选按钮状态机”了。 “单选按钮状态机”最初是手工编写，并充满热情地发布在 CSS-Tricks 网站上。你真的很应该订阅他们的通讯。 The Radio State Machine css-tricks.com
7 个值得尝试的视图转换示例 想尝试视图过渡效果吗？Sunkanmi 提供了大量现成的通用过渡方案，您可以立即将其集成到网站中！ 本文最初由 Sunkanmi 亲手撰写，并充满热情地发布于 CSS-Tricks。强烈建议您订阅其通讯。 7 View Transitions Recipes to Try css-tricks.com
在CSS中选择日期范围 一种巧妙的方法用于在日历中选择多个日期：利用 `:nth-child()` 选择器中"n of"语法承担主要工作……甚至包括在 JavaScript 中。 Selecting a Date Range in CSS css-tricks.com
关于 CSS 颜色插值你需要知道的一切 颜色是什么？Sunkanmi Fafowora 解释了 CSS 中的一项日常任务如何用于创造更好的色彩体验。 What You Need to Know About CSS Color Interpolation css-tricks.com
CSS light-dark() 函数是否应该支持比亮色和暗色更多的值？ light-dark() 函数目前仅支持两种配色方案。它是否应该支持其他方案？Sunkanmi Fafowora 的回答是“是”也“否”。 Should the CSS light-dark() Function Support More Than Light and Dark Values? css-tricks.com
