#前端 #demo #codepen #CSS
CSS 之神在上，这太酷了。
Animated Hover Disclosures

jhey ʕ•ᴥ•ʔ(@jh3yy): transitioning CSS grid-template-columns on :focus/:hover means the parent container won't change size 🏅

https://fixupx.com/jh3yy/status/1940066323658158198

#前端 #CSS #demo
这太酷了~

jhey ʕ•ᴥ•ʔ (@jh3yy): This CSS trick is fascinating ⭐️
By setting: [type=range] { overflow: hidden; }
You can create a view timeline on the handle:
::-webkit-slider-thumb { view-timeline: --thumb inline; }
And then you can use that to build all sorts of custom range sliders 🚀

https://fixupx.com/jh3yy/status/1816290576087515620

#优质博文 #前端 #CSS #浏览器 #新动态
New in Chrome 143

AI 摘要：Chrome 143 正式发布，本次更新带来了对锚点定位元素（anchor positioned elements）的新式容器查询（anchored fallback container queries），改进了背景图像定位语法（side-relative background-position），并新增对 font-language-override 的支持，使开发者可精确控制字体替代语言标签。在提高 CSS 表现力的同时，也强化了排版的一致性与多语言支持。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. CSS 新特性
• Anchored fallback container queries：新增 @container anchored(fallback)，可基于元素定位的备用状态（position-try-fallbacks）设置不同样式，用于调整锚点元素的连线或动画表现。
• Side-relative background positioning：现在可在 background-position-x/y 长属性中直接使用相对边位置语法（如 left 30px、bottom 20px），提高图像定位灵活性，该特性现已进入 Baseline 新可用级别。
• Font language override：新增 font-language-override 属性，允许为 OpenType 字形替换指定自定义四字语言代码，从而覆盖系统语言设置，便于实现多语言、特殊字体排版控制。

2. 版本信息与资源链接
• 详细更新内容见 Chrome 143 release notes。
• 开发者工具更新详情：What's new in Chrome DevTools (143)。
• 功能状态更新在 ChromeStatus.com。
• Chrome release calendar 提供未来版本发布时间表。

3. 社区与后续更新
• 推荐订阅 Chrome Developers YouTube channel 获取最新视频提示。
• 关注 Chrome 团队在 X 或 LinkedIn 的最新发布。
• 官方将于 Chrome 144 发布时继续更新新功能说明。

author Rachel Andrew

Chrome for Developers

New in Chrome 143  |  Blog  |  Chrome for Developers

CSS anchored fallback container queries, side-relative positioning for background position longhands, and more.

#优质博文 #CSS #前端 #新特性
Gallery of Skewed Images with Hover Effect

AI 摘要：本文展示了如何利用现代 CSS 的新特性 corner-shape 创建一个具备悬停 (hover) 交互的倾斜图片库。通过使用逻辑属性和自定义变量，只需少量代码即可实现具有方向感知 (direction-aware) 的图像倾斜效果。当用户悬停图片时，相邻形态会流畅过渡，视觉上极具动感。文末还比较了使用 clip-path 的替代实现，强调虽然兼容性更好，但缺乏方向感知的智能特性。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 组件与功能简介
• 主题为一个倾斜 (skewed) 图片库，展示如何简单实现经典布局。
• 利用现代 CSS 新属性 corner-shape 让图片边角自动响应文字方向。
• 通过 flex 布局与 transition 结合，实现平滑扩展的悬停动画。

2. 核心实现原理
• 定义变量 --s 控制倾斜程度和形状曲率。
• 使用逻辑属性如 border-start-start-radius、border-end-end-radius 确保布局在不同书写方向中正常表现。
• 通过伪类 :hover、:has() 与相邻选择器的配合，让图片在交互时动态调整边形与间距。

3. 替代方案与兼容性
• 提供使用 clip-path 的另一种实现方法。
• 虽然 clip-path 方式浏览器支持度较高，但不具备方向感知能力。
• 建议根据实际兼容需求在项目中选择适合的实现。

4. 延伸与参考
• 推荐阅读作者的其他作品：Direction-Aware Arrow Shape using corner-shape 与 Dynamic Tooltip Position with Anchor Positioning IV。
• 这些示例共同展示了现代 CSS 如何简化复杂动效组件的实现。

author Temani Afif

Css-Tip

Gallery of Skewed Images with Hover Effect

Using modern CSS and corner-shape to add a fancy galley of images with a reveal hover effect

#codepen #demo #CSS #前端 #新特性
Can You Build A Swipe UI With Only CSS?

这个 Codepen 例子使用了现代 CSS 的 Scroll Snap (滚动捕捉) 和 Container Queries (容器查询) 特性，来实现类似原生应用的滑动操作（如左滑删除、右滑收藏）

虽然 CSS 处理了滑动交互，但浏览器默认的滚动位置通常是 0（最左边）。因为左边有一个按钮，所以默认会显示左边的红色按钮。这段 JS 代码在页面加载时，自动将滚动条位置设置到中间元素的位置，确保用户一开始看到的是正常内容，而不是操作按钮。（注：视频中是说在 Safari 上的位置）

视频讲解在这里

这种方式比传统的监听 touchmove 事件来计算位移要流畅得多，因为滚动是在合成线程上处理的。

Refs:
1. Practical CSS Scroll Snapping
2. CSS scroll snap
3. https://web.dev/articles/rendering-performance#3_js_css_style_composite

codepen.io

Swiper

...

#优质博文 #CSS #前端 #SVG
这把 Safari 居然打赢了（草
Non-Square Image Blur Extensions

AI 摘要：本文由 Ana Tudor 撰写，灵感来自 Vivi Tseng 的 CodePen 实验，探索如何用极简的 CSS 实现一种“非正方形图片模糊扩展”效果——图片在较短边方向通过自身的模糊副本自然填补为方形背景。文章逐步从理论四行 CSS 实现入手，延伸到浏览器兼容性问题、替代方案（CSS 变量、SVG filter）以及跨浏览器处理方式，并在最后提出动态方向渐隐和计算图像纵横比的方案。整体展示了 CSS filter、backdrop-filter、container query、mask、attr() 等高级特性的组合运用。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 简介与问题动机
• 作者想用单个 img 元素与最少的 CSS 声明，实现非方形图片的模糊填充背景。
• 对比现有需额外元素的方案，希望找到更优雅的实现。
• 展示目标效果：图片保持比例，四周模糊延伸成方形视觉。

2. 基本实现思路（四行 CSS 方案）
• 第一步：固定 width: min(100%, 23em) 以控制尺寸。
• 第二步：设定 aspect-ratio: 1 让图片框为正方形。
• 第三步：使用 object-fit: contain 保持图片纵横比并留白。
• 第四步：用 background: filter(src(attr(src)), blur() …) 将自身模糊版本作为背景。
• 说明 filter() 与 src() 的 CSS 机制、attr() 的动态属性取参功能。

3. 浏览器支持问题（Support Sadness）
• Safari 支持 filter()，Chromium 家族支持新版 attr()，但尚无浏览器支持全部特性。
• Chrome、Firefox、Safari 当前的支持状态 bug 链接一览。
• 因此四行完美方案暂无法跨浏览器落地。

4. 实用替代办法（Current Options）
• 用 CSS 变量 --img 保存图片 URL 代替不支持的 src(attr(src))。
• Safari-only 测试用 Epiphany 浏览器可验证。
• 模糊边缘透明问题原因：blur() 会在边缘像素引入透明度。
• 使用 SVG filter + edgeMode="duplicate" 替代 CSS blur() 修复边缘透明。
• 展示最终无半透明边缘的 Safari 可运行版本 Demo。

5. 跨浏览器版本设计（backdrop-filter 方案）
• 结构：在 .wrap 容器上设置背景为图片，img 叠在上面。
• backdrop-filter: blur() 模糊容器背景，实现视觉层叠。
• 修复 inline 元素底部空隙，建议 display: grid 保持对齐。
• 完整方案兼容主流浏览器，效果与原始类似。

6. 增强与 fading 效果
• 实现图片边缘平滑过渡到模糊背景：利用伪元素 ::before。
• 采用 grid 堆叠控制层级，通过 z-index 调整前后关系。
• 利用 mask: linear-gradient() 按方向渐隐；
• 若已知方向，可用 data-orientation 属性。
• 若有已知宽高比，可利用 sign() 函数自动判定横竖。
• 特殊情况：正方形图片需中间值（--bit 标志）避免对角线渐隐。

7. 当图像比例未知（Unknown Aspect Ratio）
• 提出两种策略：
• SVG filter 模糊生成 alpha mask（Safari 专用）。
• 详细分解 feGaussianBlur 和 feComponentTransfer 原理；
• 调整 alpha 映射以强化平滑透明带；
• 结果非线性渐变更自然但控制困难。
• 纯 CSS 容器比例计算方案：
• 结构上引入额外 .rect 容器与隐藏副本 img；
• 利用 container query 的 100cqw/100cqh 算出纵横比；
• 自动生成 mask 渐隐角度，适配所有主流浏览器。

8. 拓展与实验方向
• 可在 backdrop-filter 链中加入更多视觉特效（如 sepia()、hue-rotate()）。
• 展望未来 CSS 函数全面支持后的更简洁实现。

author Ana Tudor

Frontend Masters

Non-Square Image Blur Extensions

I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler solution should be possible with a single img element and…

#优质博文 #CSS #前端 #布局 #新特性 #Grid
Brand New Layouts with CSS Subgrid • Josh W. Comeau

AI 摘要：文章深入浅出地介绍了 CSS Subgrid 的原理、语法以及在实际布局中的强大应用。作者从传统嵌套 Grid 布局的局限出发，展示 Subgrid 如何让子元素共享父网格结构，从而解决嵌套布局中兄弟元素协调、行列同步、可访问性与语义等长期难题。文末作者也提醒了 Subgrid 的坑点（如行空间保留、编号重置和不支持流式网格）及兼容性策略，最后展示了灵活采用 Subgrid 逐步优化布局的思路。

[以下是方便搜索索引的大纲（AI 生成），请读原文]

1. Subgrid 基础与语法逻辑
• 传统 CSS Grid 仅支持直接子元素参与布局，嵌套元素难以精确控制。
• Subgrid 允许共享父级 Grid 的行列定义，实现层级布局的连贯性。
• 示例演示如何让 <ul><li> 等语义化标签参与同一布局网格。
• 对比 Flexbox 及嵌套 Grid 的替代方案，指出 Subgrid 提升结构语义与简洁性。

2. 新布局可能性（New layout possibilities）
• 演示艺术作品集卡片布局中跨元素对齐的问题。
• Subgrid 能让兄弟卡片实现列宽一致、响应式调整，避免文字长度影响列宽。
• 动态响应内容变化，提高布局的自适应表现与一致性。

3. 使用 Subgrid 时的坑点与避坑指南（Subgrid Gotchas）
• 行空间保留(Row reservation)： 必须显式定义跨越行数，否则子网格会被压缩成单行。
• 网格线编号重置： Subgrid 继承父网格模板但重编号，索引从 1 重新开始。
• 不支持流式网格(Fluid grid)： auto-fill / auto-fit 等流体布局参数目前无法与 Subgrid 结合。
• 浏览器兼容性： 主流浏览器 2023 起支持，但覆盖率未达 90%，需提供 Fallback。

4. 向后兼容策略（Fallback for older browsers）
• 使用 @supports not (grid-template-columns: subgrid) 提供替代布局。
• 优先保证视觉与交互体验的一致性，而非强求原样重现。
• 建议在小规模组件中逐步应用 Subgrid。

5. 实战展示与结语
• 以 Stripe Developer 网站为典范，展示多层 Subgrid 嵌套布局的极限用法。
• 鼓励开发者从小范围、局部组件开始接入 Subgrid 改造。
• 强调 Subgrid 带来的语义与结构清晰性提升，呼吁更多实验与实践。

author Josh W. Comeau

Joshwcomeau

Brand New Layouts with CSS Subgrid • Josh W. Comeau

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid…

#优质博文 #CSS #前端 #新特性
How to Add and Remove Items From a Native CSS Carousel (…with CSS)

AI 摘要：本文介绍如何利用 CSS Overflow Module Level 5 的新特性（如 ::scroll-button() 与 ::scroll-marker）创建一个完全不用 JavaScript 的原生 CSS 轮播组件。通过结合 HTML 的复选框控制展示项、CSS 伪元素控制滚动行为与可视化反馈，作者实现了可动态增删轮播项、支持自动滚动、滚动锚点定位的完整组件。文章分为三步：HTML 结构设计、基础样式编写与添加按钮/标记逻辑，展示了未来 CSS 在交互与状态管理上的潜力。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. CSS 新特性简介
• 概述 CSS Overflow Module Level 5 模块，引入 ::scroll-marker 与 ::scroll-button() 两个新伪元素。
• 说明这些特性如何在滚动内容中自动生成导航控件，无需脚本交互。
• 当前仅 Chrome 142+ 提供支持，但为未来原生组件交互铺路。

2. HTML 结构与逻辑绑定
• 使用 <input type="checkbox"> 控制轮播项的显示与隐藏。
• 每个复选框对应一个 <li> 滑块，可预选或取消以动态控制内容。
• 通过 .component:has(input:not(:checked)) 实现逻辑选择，隐藏未选项。
• 结构层清晰，可改造为 <form> 以实现数据序列化提交。

3. CSS 基础样式与响应式设计
• 使用 max-width 与 aspect-ratio 实现轮播容器的响应式尺寸。
• 当存在选中项时使用 display: flex; 和 min-width: 100% 水平展示滑块。
• 未选中时显示占位样式，增强组件的状态反馈。

4. 滚动控制与标记实现
• 使用 scroll-snap-type: x 与 scroll-behavior: smooth 实现平滑滑动与对齐。
• 通过 anchor-name 将轮播容器转变为锚点，利用 position-anchor 精准定位滚动按钮与标记组。
• scroll-marker-group 属性控制标记插入位置，可调节排列与间距。
• 各标记通过伪类 :target-current / :target-before / :target-after 呈现不同状态风格。
• 实际布局通过固定定位 (position: fixed) 与锚点对齐 (justify-self: anchor-center) 来分布按钮与标记。

5. 滚动按钮的添加与行为控制
• 使用 ::scroll-button(left/right) 生成左右切换箭头。
• 通过 :enabled 控制显示状态，避免无效方向交互。
• 再次利用锚点定位调整按钮相对位置，内容用 Unicode 符号构建箭头。
• 补充 scroll-snap-align: center，保证切换时对齐完整幻灯片。

6. 扩展与应用
• 相同机制可拓展至分页、标签页等滚动式界面组件。
• 展示了未来 CSS 在状态驱动组件中的可行性与可维护性。
• 示例：产品展示轮播，可根据颜色选项动态切换视图。

author Daniel Schwarz

Frontend Masters

How to Add and Remove Items From a Native CSS Carousel (…with CSS)

The CSS Overflow Module Level 5 defines specs for scrolling controls that enable users to navigate overflow content without manually scrolling (like click-and-dragging the scrollbar, the trackpad, a scrollwheel, or the like). This includes scroll buttons…

#优质博文 #CSS #前端
light-dark() isn't always the same as prefers-color-scheme

AI 摘要：这篇文章探讨了 CSS 新特性 light-dark() 与经典媒体查询 prefers-color-scheme 之间的区别。作者原以为前者可以“一键取代”后者，但在实际项目中发现，light-dark() 依赖于 color-scheme 属性的正确设定，而 prefers-color-scheme 完全基于操作系统的偏好。两者虽然目标相似（响应亮/暗模式），却响应机制不同，导致主题切换时的表现并不一致。开发者在实现自定义主题时，应理解它们的区别，以正确控制组件的配色逻辑。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 新特性背景与初衷
• 作者在 “Today I learned” 系列中分享 CSS 的最新学习经验
• 以为 light-dark() 能替换 prefers-color-scheme，从而精简代码
• MDN 对 light-dark() 的定义：能为属性设置两种颜色，而无需媒体查询

2. light-dark() 的工作条件
• 必须在 :root 或容器上设置 color-scheme: light dark; 才能生效
• 若未设定 color-scheme，light-dark() 无法根据系统主题切换
• prefers-color-scheme 无论 color-scheme 是否存在，都能响应操作系统主题

3. 实际项目中的表现差异
• 以 Web Weekly 网站重构为例，作者使用 Tailwind CSS 配置了自定义颜色变量
• light-dark() 自动翻转颜色逻辑，但 prefers-color-scheme 与 color-scheme 之间无联动
• 当通过 color-scheme 切换主题时，light-dark() 能正确响应；而 prefers-color-scheme 仍只看系统设置
• 这种行为差异源于 prefers-color-scheme 的历史兼容性设计

4. 结论与经验
• light-dark() 并非 prefers-color-scheme 的替代品，而是基于 color-scheme 工作的全新机制
• prefers-color-scheme 更偏向全局系统偏好，light-dark() 更适合组件级主题控制
• 实现主题切换前，应明确两者触发机制，避免预期不符

author Stefan Judis

Stefanjudis

light-dark isn't the same as prefers-color-scheme

`light-dark()` and `prefers-color-scheme` treat the defined `color-scheme` values differently.

#优质博文 #css #前端 #浏览器 #新特性
Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

AI 摘要：文章介绍了 Chrome 144 对 CSS 属性 overscroll-behavior 的改进：该属性现在在“不可滚动的滚动容器”上也有效，这意味着开发者可以用简单的 CSS 代码阻止页面在对话框（<dialog>）打开时滚动。作者解释了这一特性的技术背景、过去的限制及其在不同浏览器支持上的现状，并展示了一个实现示例。

author Bramus!

Bram.us

Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal)…

#优质博文 #CSS #前端 #布局 #grid
Brand New Layouts with CSS Subgrid • Josh W. Comeau

AI 摘要：本文通过多个实例（如艺术作品集和定价卡等）讲解了 CSS Subgrid 的基础概念、进阶用法与常见陷阱。Subgrid 允许嵌套元素继承父级网格结构，实现跨层级的布局一致性与响应性，从而简化复杂 UI 的构建。作者展示了它如何解决兄弟元素互不联动、语义化结构打破布局等老问题，并警示了行数预留、索引重置和兼容性等细节，同时提供了实用的 Fallback 策略。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. Subgrid 基础与语义化改进
• 传统 CSS Grid 仅支持直接子元素参与布局，嵌套结构会破坏网格定位。
• Subgrid 通过继承父网格行列定义，让子元素（如 <ul><li>）复用父结构，从而保持语义化 HTML 与视觉布局同步。
• 基本用法：display: grid + grid-template-rows: subgrid + grid-template-columns: subgrid。
• 对比方案包括使用 Flexbox 嵌套 Grid，但 Subgrid 更能保持整体一致布局。

2. 新的布局可能性与动态响应
• 示例中展示了艺术作品卡片在不同屏幕下的两列布局问题，Subgrid 可让列宽动态适配内容。
• 通过共享父网格的列定义，兄弟 <article> 间可以互相影响，实现内容驱动的响应式调整。
• Subgrid 的计算方式可让布局在标题长度等内容变化时自动调整。
• 这种“跨组件感知”的能力是传统 CSS 无法实现的。

3. 实践陷阱（Gotchas）解析
• 行空间预留问题：Subgrid 默认只占一行，需明确声明 grid-row: span n 避免元素重叠。
• 索引重置：Subgrid 内行/列线号会重新编号，非父级的延续 ID。
• 流式网格不兼容：auto-fill, auto-fit 等自动列数写法与 Subgrid 不完全兼容，需要显式定义列。
• 旧版浏览器支持：截至 2025 年仍未达 90%，推荐通过 @supports 编写单列垂直 fallback 布局。

4. 实战与兼容性策略
• 用 Subgrid 搭建灵活的定价卡（Pricing Card）示例，实现不同卡片内容的行高完全对齐。
• 介绍 Feature Query (@supports) 实现优雅降级。
• 讨论如何平衡“视觉一致性”与“用户体验优化”；Fallback 不追求完美复刻，而是保持最佳体验。

5. 背景与应用前景
• Stripe Developer Site 是 Subgrid 的大型示范：多层 Subgrid 构建超大布局。
• 但作者更看重 Subgrid 在小范围 UI 调整、组件层布局优化的价值。
• Subgrid 可逐步引入项目，提高代码语义与一致性，而非一次性重构全站。

author Josh W. Comeau

Joshwcomeau

Brand New Layouts with CSS Subgrid • Josh W. Comeau

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid…

#优质博文 #CSS #HTML #前端 #新特性
巧用CSS ::details-content伪元素实现任意展开动画

AI 摘要：回顾了 <details> 与 <summary> 元素自 2018 年以来的演进，重点介绍了新引入的 ::details-content 伪元素，使得内容展开收起可实现平滑动画；同时讲解了内容锚点（hash）自动展开机制，以及 scroll-margin-block-start 的可用技巧。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. HTML <details> 元素的演进
• 从 2018 年起 <details> 结构不断完善，三角箭头改为 ::marker，与列表元素标记统一。
• 新增 name 属性，支持手风琴式（accordion）互斥展开。
• 支持内容区域 hash 匹配自动展开，实现无 JS 的动态交互。
• 引入 ::details-content 伪元素，为内容区域提供 Shadow DOM 层级的样式控制。

2. ::details-content 实现动画展开效果
• 通过 transition 联合 content-visibility、height 等属性实现收展动画。
• 详细解释 allow-discrete 特性，使离散属性如 display 支持过渡动画。
• interpolate-size: allow-keywords 让 auto 尺寸参与动画计算。
• 属于渐进增强（progressive enhancement）方案，浏览器不支持也不会出错。

3. 锚点匹配与自动展开机制
• 当 details 内容的元素被 URL hash 定位时，details 自动展开。
• 该行为与 hidden="until-found" 类似，由 content-visibility 支持。
• 通过样式调整滚动定位：scroll-margin-block-start 设置元素滚动停留位置，提升体验。

4. 浏览器支持与语法参考
• 现代浏览器几乎在同一时间点全面支持 ::details-content。
• 使用语法为 selector::details-content，适用所有常规 CSS 属性。
• 由于支持良好，可放心在生产环境渐进式增强。

author 张鑫旭

Zhangxinxu

巧用CSS ::details-content伪元素实现任意展开动画 « 张鑫旭-鑫空间-鑫生活

details元素又新支持了一个CSS选择::details-content伪元素，可以匹配内容阴影DOM，我们可以利用这个伪元素进行区域背景设置，或者实现实用的展开收起的动画效果。

#React #CSS #前端 #组件库 #新动态
Ant Design 6.0 来了！

AI 摘要：Ant Design v6 正式发布，以技术升级和未来兼容性为核心，全面支持 React 18+，引入纯 CSS Variables 模式、全量组件语义化结构，并新增 Masonry、可拖拽 Drawer、模糊蒙版等实用功能。此次升级保持对 v5 的完全兼容，带来更轻盈的打包体积与更灵活的定制体验。Ant Design X 也同步发布 2.0，聚焦 AI 场景的 UI 体验，预示着生态的又一次跃进。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 版本背景与发布说明
• Ant Design 自开源以来积累超 96K Star、2K+ 贡献者，社区生态庞大。
• v6 聚焦技术优化与未来 React 版本兼容，标志进入新阶段。
• 与 v5 之间为平滑迁移，v5 进入一年维护周期。

2. 技术升级与核心变化
• React 版本提升：最低要求 React 18，推荐使用 React 19，移除旧版兼容逻辑。
• 启用 React Compiler：在构建产物中优化性能，开发者可自行选择是否开启。
• 纯 CSS Variables 样式架构：全面弃用 IE 兼容逻辑，样式实现零运行时（zeroRuntime）模式，支持实时多主题切换。
• 组件语义化结构：所有组件 DOM 结构优化，支持函数式类名配置 (classNames) 与内联样式 (styles)，提升定制能力与可维护性。
• 移除废弃 API：彻底移除 v4 遗留逻辑，统一 API 命名，同时兼容 v5 的使用方式。

3. 新组件与功能增强
• Masonry 瀑布流组件：优化图片展示与卡片排布体验。
• Tooltip 支持平移切换：多内容提示实现滑动过渡。
• InputNumber spinner 模式：交互式加减按钮布局更直观。
• Drawer 支持拖拽：用户可调整抽屉大小。
• 模糊蒙版背景：所有弹层默认使用模糊特效，可按需关闭。

4. 升级指南
• v6 可直接从 v5 升级，无需 codemod 或兼容包。
• 项目需运行在 React 18+ 环境。
• 不再支持 IE，建议替换废弃 API。

5. 未来计划
• 聚焦移动端交互体验与可访问性（Accessibility）增强。
• 跟进 React 新特性，持续优化性能。
• 持续推出新组件，拓展生态边界。

6. One More Thing —— Ant Design X 2.0
• 面向 AI 场景的组件库同步升级，提供更智能的交互能力。
• 新版本强化渲染性能与灵活性，是探索 AI 驱动界面的关键工具。
• 更多详情可参考 🎉 Ant Design X 2.0 正式发布了 🎉。

7. 致谢
• 官方感谢 2000+ 贡献者的支持与共创。
• 十年开源历程，秉持「因为你们的参与，开源才美好」的初心。

GitHub

🎉 Ant Design 6.0 来了！ 🎉 · Issue #55805 · ant-design/ant-design

English | 中文 引言 自开源以来，Ant Design 已收获 96.6K Star、累计 31.9K issue、20.7K PR、发布了 904 个 npm 版本，并有 2314 位贡献者 共同参与其中。这些数字不仅代表着社区的活跃度与支持，也见证了项目的不断进化与成熟。 正因为你们，Ant Design 才能不断成长，向下一站前行：《Plan about Ant Design...

#优质博文 #前端 #CSS #动画 #工程化 #规范 #course
Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine

AI 摘要：本文介绍了通过将动画关键帧 (@keyframes) 设计为可重用的 Keyframes Tokens，来实现动画系统的标准化与可维护化。作者说明了动画重复定义与全局作用域冲突带来的问题，提出以集中式样式表、命名空间、可定制的 CSS 自定义属性（custom properties）和设计 tokens 的方式来统一所有动画。文中展示了 fade-in、slide-in、zoom、spin、pulse 等动画的动态实现，并讨论了动画叠加、组合 (animation-composition)、可访问性 (prefers-reduced-motion) 与实际项目实施策略。核心思想是：让动画像颜色、字号、间距一样成为可管理的系统资源。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 动画混乱的根源
• 各组件独立创建重复的 @keyframes，导致代码冗余。
• CSS keyframes 属于全局作用域，容易被后加载样式覆盖。
• 修改或统一动画需全局搜查，影响维护效率。

2. 统一的解决方案：Keyframes Tokens
• 将动画关键帧集中存放在共享样式表中，形成唯一数据源。
• 利用命名空间（如 kf- 前缀）避免命名冲突。
• 借助 CSS 自定义属性实现动态参数化，支持多场景适配。
• 使动画定义与其他 design tokens（颜色、间距等）协同管理。

3. 构建基础动画库
• Fade In：定义基础淡入动画并统一调用。
• Slide In：通过自定义属性 --kf-slide-from 控制入场方向。
• Zoom：用 --kf-zoom-from/to 实现双向缩放。
• Spin/Pulse：封装连续动画，可控制旋转幅度、脉冲强度。
• Bounce/Elastic：展示复杂缓动（easing）动画封装方法。

4. 动画组合与冲突处理
• 可将多种动画组合，如 fade+slide 或 zoom+pulse。
• 对同一属性冲突时使用 animation-composition: add; 合并动画效果。
• 适当使用动画时间错位（stagger）提升视觉节奏。
• 说明 transform 与单独变换 (translate/scale) 的执行顺序差异。

5. 无障碍与减弱动效（Reduced Motion）
• 利用 prefers-reduced-motion 提供无动画或柔和过渡版本。
• 对需要仍然变换属性的动画定义瞬时完成（instant-in）版本。
• 保留必要动效但平滑化运动，提升可访问性。

6. 实施策略与最佳实践
• 渐进引入：从常见动画（fade、slide）着手。
• 命名规范：统一前缀标识 token 动画。
• 文档化：在 token 文件添加注释说明用途与参数。
• 灵活性与简洁性：仅暴露必要自定义属性。
• 融入设计体系：将 keyframes tokens 视为 design language 的一部分。

author Amit

Smashing Magazine

Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine

Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing keyframes, you take something that is usually messy and hard to…

#优质博文 #前端 #调试技巧 #JavaScript #CSS #Chrome
断点是真的很重要。严肃学习！
Six Things I Bet You Didn't Know You Could Do With Chrome's Devtools, Part 1

AI 摘要：本文由 Rachel 撰写，灵感来自 TechBash 会议中 Mike Rapa 的讲座，介绍了 6 个鲜为人知的 Chrome DevTools 技巧。本篇是 Part 1，涵盖前三个内容：用 console.time() 和 console.timeEnd() 精准计时函数执行、利用 DOM Breakpoints 实时捕捉元素变化，并自动暂停脚本运行、以及用 monitor() 在控制台监听任意函数调用。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 文章背景与启发来源
• 作者参加 TechBash 会议，受到 Mike Rapa 的 DevTools 演讲启发。
• 本文专注于 Chrome DevTools 的 3 个隐藏功能，Firefox 部分功能支持略有不同。
• 计划分上下两篇，本篇为 Part 1，介绍前三个功能。

2. 计时函数性能监控
• 介绍 console.time() 与 console.timeEnd() 的使用，可精确测量代码块执行耗时。
• 提及 console.timeLog() 用于中间打印时间进度。
• 举例说明结合 React Hook 使用场景，展示暂停与超时逻辑的时间追踪方案。
• 来源：Mike Rapa 的演讲及 Github 仓库。
• 支持情况：原生 JS 特性，各浏览器均可使用。

3. 通过 DOM Breakpoints 检测元素变化
• 介绍如何在 Chrome Elements 面板中为任何 DOM 元素设置 "Break on" 断点。
• 当该元素属性、子树或节点被修改时，自动暂停脚本执行。
• 可快速定位导致页面 UI 异常的脚本。
• 提供 Stack Overflow 示例，展示实际操作方法。
• 支持情况：主流浏览器支持，Firefox 行为略有差异。

4. 使用 monitor() 监听任意函数调用
• 在控制台中可用 monitor(functionName) 监控任意函数调用及其参数。
• 帮助调试第三方脚本或不易插入 console.log() 的代码。
• 示例：sum(1,2) 会在控制台输出调用信息。
• 来源：Google DevTools Utilities 文档。
• 支持情况：仅支持 Chrome。

5. 预告与后续主题
• 作者计划在 Part 2 中讨论剩余三项：可视化编辑网页（WYSIWYG）、记录与重放用户操作、按需限速网络请求。
• 鼓励读者关注后续更新、尝试在实际项目中运用这些技巧。

author Rachel Kaufman

Rachel Kaufman, developer

Six Things I Bet You Didn't Know You Could Do With Chrome's...

Hidden and not-so-hidden tools that will make your life easier.

#优质博文 #CSS #3d #前端 #JavaScript
How to Create 3D Images in CSS with the Layered Pattern

AI 摘要：本文介绍了如何通过 CSS 3D transform 与 “layered pattern（分层模式）” 创建栩栩如生的 3D 图片效果。作者从 HTML 结构设计、CSS 3D 场景设置、层间位移计算、亮度与饱和度调节到交互控制面板（含 JavaScript）完整展示了创建流程。文章强调了分层视觉的本质是在二维平面中利用透视与光影制造立体幻觉，并通过 perspective、translateZ()、filter 等技巧实现动态的 3D 效果。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 3D CSS 概念与分层模式简介
• 概述 CSS 3D 的发展历史，从 2009 年起被 W3C 规范化
• “layered pattern（分层模式）”通过多个图层叠加制造立体幻觉
• 提示需理解 CSS perspective 与坐标系 (x, y, z) 概念

2. HTML 结构设计
• 使用 <div class="scene"> 包裹整个 3D 场景
• 建立多层重复图像 (.layer) 并以自定义属性 --i 标识层级
• 通过 aria-hidden="true" 处理无障碍可访问性问题
• 提及未来可通过 sibling-index() 和 sibling-count() 优化层索引

3. CSS 构建 3D 场景
• 设置 .scene { perspective: 1000px } 以控制深度
• 启用 transform-style: preserve-3d 让所有层在三维空间可见
• 通过 --layers-count 和 --layer-offset 控制层数与间距
• 利用 translateZ(calc(var(--i) * var(--layer-offset))) 实现纵深位移
• 计算标准化变量 --n 以动态调节亮度与饱和度实现光影变化
• 使用 filter: brightness() 与 filter: saturate() 增强立体层次
• 布局上将 .layer 与 .layers 设为 position: absolute; inset: 0 覆盖叠加

4. 动画与交互控制
• 通过 @keyframes rotate3d 添加旋转动画模拟立体旋转
• 创建交互控件（input range 滑块与按钮）控制 perspective、层间距与旋转角度
• 使用 JavaScript 监听输入事件动态更新 CSS 自定义属性与图像内容
• 示例函数 updateRotation() 绑定 X/Y 旋转值，支持图片更换

5. 附加功能与扩展
• 控制面板提供图像切换与参数调节体验
• JS 实现与视觉绑定，删除原有动画以改为实时控制
• 结尾展示延伸案例 “3D CSS steak”，说明同一技术可应用于更复杂视觉模型

6. 小结与启示
• 3D CSS 的核心在于“二维模拟三维”的视觉幻象
• 有效结合 transform、perspective 与 filter 可获得高性能的 3D 效果
• 分层模式可扩展用于文字、图片、UI 元素等多种设计

author Sunkanmi Fafowora

#codepen #前端 #CSS
Creepy Button

"这个按钮在监视你"。从 Jon Kantner 这款俏皮的按钮下面探出头来，你会发现一双卡通眼睛正在跟踪你的一举一动👀。

#优质博文 #css #前端 #纹理 #设计
网站： https://paulsmith.github.io/classic-mac-patterns/
介绍： Classic 8×8-pixel B&W Mac patterns

AI 摘要：介绍了由 Paul Smith 制作的 Classic Mac OS System 1 背景图案，这些极小尺寸的复古像素图案可通过 CSS background-repeat 实现无限平铺效果。尽管源自经典的 Mac OS 设计风格，但它们在现代网页中依然有独特的美感和实用价值。

#优质博文 #CSS #前端 #Chrome #新特性
Anchor Positioning is transform-aware in Chrome 144+

AI 摘要：文章介绍了 Chrome 144 对 CSS 锚点定位（Anchor Positioning）机制的改进：从这一版本起，锚点定位将基于元素的“变换后”边界框（transformed bounding box），而不是此前的“未变换”状态，这让拥有 CSS transform 的元素上浮层、提示框等组件能够准确定位。该更新遵循 CSS 工作组（CSSWG）的最新规范决议，修复了长期存在的视觉错位问题。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 功能更新背景
• Chrome 144 将 Anchor Positioning 改为对 transform 变换敏感（transform-aware）
• 之前版本锚点计算基于未变换的边界框，导致定位错误

2. 技术细节与实现变化
• 新行为参考 CSSWG 规范修订（见相关 issue 链接）
• 更新后 tooltip、浮层等会根据元素的变换后位置进行定位

3. 实例与视觉演示
• 作者通过两个锚点的对比演示了旧版与新版定位差异
• Chrome 144 截图中两个 tooltip 均能正确跟随 transform 后的锚点

author Bramus!

Bram.us

Anchor Positioning is transform-aware in Chrome 144+

Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed ancho

#CSS #前端 #新特性 #tip

虽然发过那么多次 CSS 新特性的博文推荐，但是在项目中实际用上的没那么多，决定开个新 tag 记录一下平常真在项目里用上了的小 tip！

CSS scroll-state 用来渐进式的增强滚动容器底部的羽化遮罩时还是很好用的～

refs:
1. Adaptive Alerts (a CSS scroll-state Use Case)
2. CSS @container scroll-state 容器滚动查询
3. Chrome 133 Goodies

 /* https://github.com/parcel-bundler/lightningcss/issues/887 */
  .scroll-feather-mask {
    container-type: scroll-state;
  }
  @container scroll-state(scrollable: bottom) {
    .scroll-feather-mask::before {
      content: '';
      background: linear-gradient(to bottom, transparent 0%, var(--gradient-bg-start) 70%, var(--gradient-bg-start) 100%);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      display: block;
      height: 5rem;
    }
  }