CSS-Tricks 中文 关注 CSS Tricks是一个流行的网站，旨在为web开发者提供有用的技巧、技术和资源，特别关注CSS和相关技术。 CSS-Tricks 中文 RSS thenote.app RSS css-tricks.com CSS-Tricks css-tricks.com
书写模式 “writing-mode” CSS 属性设置文本行的布局方式是水平还是垂直的，以及块和行的进展方向。 .element { writing-mode: vertical-rl; }这在诸如中文、日文等语言中最为有用。“writing-mode” 最初的手写和发表于 CSS-Tricks，带着爱。您也应该订阅我们的新闻通讯。 writing-mode css-tricks.com
指针事件 pointer-events 属性控制元素是否可以成为指针事件（如点击、悬停状态及其他基于指针的事件）的目标。换句话说，它允许您决定浏览器是否应将元素视为可交互的，当……pointer-events 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 pointer-events css-tricks.com
什么是!important #15：感知边界的 CSS、基于时间的 CSS、满版 CSS 等 与上次一样，What's !important #15 内容相当丰富——深入探讨边界感知 CSS、使网格轨道可访问、创建基于时间的网页设计、修复通栏 CSS、改进可自定义的下拉选择器、新的 Web 平台功能等更多内容。What's !important #15：边界感知 CSS、基于时间的 CSS、通栏 CSS 及其他内容最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅该通讯。 What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More css-tricks.com
准备好迎接强大的 CSS border-shape 属性！ 我们最近获得了 shape() 函数和 corner-shape 属性。在 CSS 中绘制形状方面，我们还需要什么呢？让我告诉你：border-shape 属性！Get Ready For the Powerful CSS border-shape Property! 最初由手写，并充满爱意地发布于 CSS-Tricks。你也应该订阅该通讯。 Get Ready For the Powerful CSS border-shape Property! css-tricks.com
What’s !important #14：间隙装饰、random()、字段大小及其他功能” 我知道你很忙，所以对于 What's !important #14，我将快速浏览过去几周内容虽多但浏览器更新寥寥的议题。从 CSS Quake 到 CSS Gap Decorations，这期内容不容错过！What's !important #14：涵盖 Gap Decorations、random()、字段尺寸等，最初由我手写并充满爱意地发布于 CSS-Tricks。你也应该订阅这份通讯。 What’s !important #14: Gap Decorations, random(), field sizing, and More css-tricks.com
CSS 状态与 JavaScript 事件之间的动态边界 CSS 一直拥有伪类，用于根据用户交互来样式化元素。然而，近期功能正在模糊 CSS“监听”的内容与 JavaScript 通常监听的内容之间的界限。《CSS 状态与 JavaScript 事件之间界限的转移》一文由 CSS-Tricks 亲手撰写并充满热情地发布。你真的很应该订阅他们的通讯。 The Shifting Line Between CSS States and JavaScript Events css-tricks.com
translateZ() translateZ() 函数可将元素移近或移远用户。 translateZ() 最初由手写并充满爱意地发布于 CSS-Tricks。您也真的应该订阅他们的通讯。 translateZ() css-tricks.com
translateY() translateY() 函数将元素沿垂直方向移动指定的距离。translateY() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 translateY() css-tricks.com
translateX() translateX() 函数将元素沿水平方向移动指定的距离。translateX() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 translateX() css-tricks.com
translate() CSS 的 translate() 函数将元素在二维平面上从其默认位置进行位移。translate() 最初由手写并充满爱意地发布于 CSS-Tricks。您真的应该订阅他们的通讯。 translate() 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
