#优质博文 #前端 #移动端 #性能优化
Mobile performance: How to make your website mobile friendly：本文探讨了网站在移动端性能低下的深层原因，并提供了针对图片、JavaScript、CSS 及第三方脚本的实战优化方案。

AI 摘要：文章指出移动设备由于硬件性能（Processing Power）、内存限制及不稳定的网络环境，面临比桌面端严峻得多的性能挑战。即使通过了桌面端的性能审计，移动端仍可能因为 JavaScript 阻塞、大型图片资源及布局偏移等问题导致用户流失。作者建议通过实验室数据（Lab Data）与现场数据（Field Data）结合的方式进行监控，并详细介绍了使用响应式图片（Responsive Images）、延迟 JavaScript 执行、提取关键 CSS（Critical CSS）以及对第三方脚本进行节流（Throttling）等具体优化手段，以提升用户的感知速度（Perceived Speed）。

author Jakub Andrzejewski

Debugbear

Mobile performance: How to make your website mobile friendly | DebugBear

Learn why websites often feel slow on mobile devices—even when they perform well on desktop. This article explains the difference between actual and perceived performance, highlights the most common mobile performance bottlenecks, and outlines practical,…

#优质博文 #前端 #JavaScript #国际化
A Percise Parser：本文介绍了一个因硬编码地区数值格式（Locale Formatting）并使用拙劣的字符串操作，导致国际化失效的 JavaScript 解析器（Parser）案例。

AI 摘要：文章讲述了一家德国公司在国际化扩张过程中遭遇的技术故障，其根源是一个名为 handleInput 的 JavaScript 数值解析函数。该函数不仅硬编码了德国本地的数字格式（如用点号作为千分位、逗号作为小数点），还通过一系列极其混乱的字符串分割（Split）、拼接和隐式类型转换来处理精度。这种缺乏通用性且逻辑脆弱的代码最终被具有区域感知（Locale-aware）的标准解析器所取代。

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

1. 背景与问题发现
• 一家德国公司在业务向国际市场扩张时，系统在其他地区（Locale）频繁崩溃。
• 工程师 Thomas 追踪到问题核心是一个处理数值输入的“精确”解析器。
2. 拙劣的代码逻辑分析
• 格式清理：函数首先手动剥离正号（+），并将点号（.）作为千分位符直接删除，这在非德语区会导致错误。
• 混乱的精度处理：代码通过 indexOf(',') 寻找小数点，然后进行复杂的字符串分割与整数解析（parseInt）。
• 隐式类型转换陷阱：利用 JavaScript 的特性，将字符串类型的整数与数值类型的整数相加，导致了非预期的字符串拼接（Concatenation），最后再除以 100 来恢复数值。
• 输出不一致：根据输入条件的不同，函数有时返回数值类型，有时却保留为字符串，缺乏一致性。
3. 解决方案与反思
• 修复工作本身并不复杂：Thomas 删除了冗余逻辑，改用支持区域感知的标准数值解析器。
• 真正的挑战在于理解原始开发者编写这段奇葩代码的初衷和逻辑。

author Remy Porter

The Daily WTF

A Percise Parser

Thomas worked for a company based in Germany which was looking to expand internationally. Once they started servicing other locales, things started to break. It didn't take long to track the problem down to a very "percise" numeric parser.
handleInput( value…

#优质博文 #前端 #Vite #Rolldown #工程化 #新动态
What’s New in ViteLand: January 2026 Recap
VoidZero 2026 年 1 月回顾

1. 品牌与设计统一（Unified Design）
• 实现了 VoidZero 旗下所有项目（Vite, Vitest, Rolldown, Oxc）的视觉身份统一，发布了全新的官网和 Logo。
• 更新了 Vite 的启动模板（Starter Templates），将新品牌标识内置其中。
• 强调了工具链的深度集成：Vite 8 在底层直接使用 Rolldown 和 Oxc，实现了一致的开发者体验。

2. 核心项目进展（Project Updates）
• Vite：自 2020 年发布以来，累计下载量超过 30 亿次；React 服务端组件（React Server Components, RSC）插件进行了优化，以支持 TanStack Start 等框架。
• Vitest：启动 4.1 测试版（Beta），引入测试标签（Test Tags）功能，并支持通过禁用 viteModuleRunner 选项在脱离 Vite 的情况下运行。
• Rolldown：正式达成候选发布版（Release Candidate, RC）里程碑，API 进入稳定阶段；推出“Lazy Barrel Optimization”，在 AntDesign 等场景下可减少 92% 的模块编译，提速 2 倍。
• Oxc：Oxlint 支持 oxlint.config.ts 动态配置；Oxfmt 实现了与 Prettier 100% 的一致性（Conformance），并新增了 Tailwind CSS 类名排序功能。

3. 社区动态与生态（Community & Events）
• 榜单表现：在 2025 JavaScript Rising Stars 榜单中，Vite、Oxc、Rolldown 和 tsdown 均名列前茅。
• 生态迁移：Hugging Face、Turborepo 和 Lichess 等知名项目宣布从 ESLint/Prettier 迁移至 Oxlint/Oxfmt。
• 周边工具：社区推出了基于 Oxc 的代码体积优化工具 jsshaker 以及 Oxlint 的终端用户界面工具 oxlint-tui。

void(0)

What’s New in ViteLand: January 2026 Recap

Our January 2026 recap features the unified redesign across VoidZero, Vite, Vitest, Rolldown, and Oxc websites, plus updates across all projects and community highlights.

#优质博文 #WebGL #GLSL #前端 #设计 #趣站
重なるレイヤーに色が溶け出すようなエフェクトを組み合わせた Matthew Pothier さんのポートフォリオサイト：介绍了一位电影摄影师极简且具有独特 WebGL 色彩流动效果的个人作品集网站。

站点地址：Matthew Pothier-Cinematographer

#优质博文 #tools
互联网档案馆发布插件，解决 40% 的互联网死链问题 - 小众软件：互联网档案馆（Internet Archive）推出了 WordPress 插件 Link Fixer，旨在解决互联网日益严重的“链接腐化”（Link Rot）问题。该插件通过自动检测失效的 URL（如 404 错误），并引导用户访问 Wayback Machine 中存储的历史网页快照，据称能修复约 40% 的死链。

居然是 WordPress 插件（

小众软件

互联网档案馆发布插件，解决40%的互联网死链问题 - 小众软件

互联网档案馆（Internet Archive）与 WordPress 母公司 Automattic 推出 WordPress 插件 Link Fixer，用来对抗“链接腐烂”：文章外链随时间失效、变成 404。皮尤研究中心统计，2013 年的链接到 2024 年近 40% 已不可用。

#优质博文 #前端 #CSS #锚点定位 #course
Drawing Connections with CSS Anchor Positioning - Roland Franke
锚点定位真好玩儿吧：在无需 JavaScript 的情况下实现 UI 元素（如评论与其回复）之间的视觉连线。

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

• 核心挑战： 在 CSS 中视觉化连接相关元素（如评论线、Tooltip 工具提示）通常很棘手，传统方案往往依赖 JavaScript 计算、额外的标签或不稳固的布局假设。
• 锚点定位机制：
• 使用 anchor-name (锚点名称) 为一个元素命名作为参考点。
• 使用 anchor-scope (锚点作用域) 限制锚点名称的影响范围，确保组件的独立性。
• 在另一个元素中使用 anchor() (锚点函数) 获取参考元素的边界位置（如 start, end, center）。
• 代码实现：
• 通过为 .comment 和 .reply 定义锚点名，在回复的 ::after 伪元素中利用 inset 属性引用这些锚点，从而精确绘制连接线。
• 结合 Logical Properties (逻辑属性) 如 inset-block-start，使布局能够自适应不同的语言和书写方向。
• 技术优势：
• 无需 JavaScript： 减少了脚本负担，提升了性能。
• 布局感知： 当内容增长或容器变动时，连接线会自动更新位置。
• 代码简洁： 减少了冗余的 Wrapper (包装) 元素。
• 浏览器兼容性： 目前处于 Baseline: Newly available (基线：新近可用) 阶段，主要在最新版本的 Chromium 系浏览器中得到支持，建议作为 Progressive Enhancement (渐进增强) 使用。

author Roland Franke

Roland Franke - Frontend Developer

Drawing Connections with CSS Anchor Positioning - Roland Franke

A practical exploration of CSS Anchor Positioning and the anchor() function to visually connect related elements without extra markup.

#优质博文 #前端 #CSS #JavaScript #新特性 #Chrome
New to the web platform in January
汇总了 2026 年 1 月 Web 平台的重大进展，重点介绍了 Chrome 144 和 Firefox 147 稳定版的发布。其中，CSS 锚点定位 (CSS Anchor Positioning) 和 Navigation API 随着 Firefox 的支持正式达到 Baseline Newly Available 状态。此外，Chrome 144 引入了期待已久的 Temporal API、声明式的 <geolocation> 元素以及用于自定义页内搜索样式的 ::search-text 伪元素

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

1. 稳定版浏览器发布（Stable browser releases）
• Baseline 状态更新：随着 Firefox 147 的发布，CSS 锚点定位 (CSS Anchor Positioning) 和 Navigation API 现已在所有主要引擎中可用，正式进入 Baseline 阶段。
• CSS 锚点定位 (CSS Anchor Positioning)：允许元素相对于“锚点”元素进行定位，适用于工具提示 (Tooltips)、菜单和弹出层。
• Navigation API：提供了一种现代化的方式来启动、拦截和管理应用程序中的导航，是单页应用 (SPA) 的核心增强。
• Temporal API：Chrome 144 引入了这一重磅 JavaScript API，作为 Date 对象的现代替代方案，提供更强大的日期和时间处理功能。
• 声明式 <geolocation> 元素：Chrome 144 新增了由用户激活的地理位置控制控件，简化了权限流程并减少了对复杂 JavaScript API 的依赖。

2. CSS 与样式增强（CSS Enhancements）
• ::search-text 伪元素：Chrome 144 支持自定义浏览器“页内查找”结果的样式，类似于 ::selection。
• caret-shape 属性：开发者现在可以指定文本插入光标的形状，如条状 (bar)、块状 (block) 或下划线 (underscore)。
• 视图过渡 (View Transition) 增强：Firefox 147 开始支持单页应用 (SPA) 的视图过渡类型识别，并支持通过 Document.activeViewTransition 获取当前活动的过渡对象。

3. Beta 版预览与未来动态（Beta browser releases）
• Chrome 145 Beta：引入了 text-justify 属性、多列布局改进（column-wrap 和 column-height）以及可自定义的 <select> 列表框。
• Firefox 148 Beta：支持 Location.ancestorOrigins，用于检测文档是否被嵌入到 <iframe> 中以及被哪些站点嵌入。

author Rachel Andrew

web.dev

New to the web platform in January  |  Blog  |  web.dev

Discover some of the interesting features that have landed in stable and beta web browsers during January 2026.

#优质博文 #前端 #CSS #锚点定位 #layout #course
Solving Shrinkwrap: New Experimental Technique
好文，利用 CSS Anchor Positioning（锚点定位）和 Scroll-Driven Animations（滚动驱动动画）解决网页排版中“自动换行导致的容器宽度无法自动收缩（Shrinkwrap）”这一经典难题。

AI 摘要：本文提出了一种创新的 CSS 实验性方案，旨在解决困扰开发者多年的“Shrinkwrap”难题：当块级元素内的文本自动换行时，容器宽度依然占据最大可用空间而非紧贴文本内容的现象。
作者 Roman Komarov 通过巧妙结合 Anchor Positioning（锚点定位）进行尺寸测量，并利用 Scroll-Driven Animations（滚动驱动动画）将测量值跨层级传递给父元素，从而动态调整容器尺寸。尽管该技术在 HTML 结构上有一定要求且目前仍处于实验阶段，但它为实现真正的紧凑包裹效果（如聊天气泡、自适应提示框等）提供了全新的纯 CSS 路径。

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

1. 核心挑战与背景 (The Problem)
• 解释“Shrinkwrap”问题：当元素内的内容（如文本）自动换行时，CSS 的 shrink-to-fit 算法通常会让容器扩展到最大可用宽度，导致视觉上出现多余的空白。
• 回顾该问题在 CSS 规范（CSSWG）中长达十年的讨论，以及 text-wrap: balance 等新属性如何凸显了这一缺陷。

2. 技术实现原理 (The Base Technique)
• 结构设计： 采用四层嵌套 HTML 结构，包括容器、内容包装器、源元素和探测元素 (probe)。
• 远程测量 (Remote Dimension Measuring)： 利用 Anchor Positioning（锚点定位）来确定内部行内元素的边界。
• 数值传递： 结合 Scroll-Driven Animations（滚动驱动动画）和自定义属性（CSS Variables），将测量到的像素值转换成可以在父元素中使用的数值，从而动态设置 inline-size（行向尺寸）。

3. 代码实现与 API (Code & Limitations)
• 展示核心 CSS 代码，利用 @property 定义变量，通过 animation-range 和 view-timeline 实现尺寸捕捉。
• 使用限制： 元素必须仅包含 Phrasing Content（短语内容，即行内元素）；目前主要在 Chrome 和 Safari 中运行，且 Safari 存在某些实验性 Bug。
• API 定义： 提供 --sw-limit（限制宽度）和 --sw-padding（间距调整）等自定义属性。

4. 进阶复杂场景 (Complex Content)
• 多锚点策略 (Multiple Explicit Anchors)： 演示如何处理具有多个 Flex（弹性布局）或 Grid（网格布局）项的容器包裹。
• 链式锚点 (Chained Anchors)： 针对不确定数量的项目，提出一种基于容器查询（Container Queries）和锚点链的自动化测量方案（目前仅 Chrome 支持较好）。
• 内容重复法： 探讨解决导航菜单等具有复杂相互依赖关系的布局方案。

5. 实际应用案例 (Use Cases)
• 聊天气泡 (Chat Bubbles)： 让气泡背景完美贴合换行后的文本，保持美观的视觉边距。
• 表单分组标题 (Fieldsets and Legends)： 解决 legend 标签在换行时导致的边框对齐问题。
• 覆盖图注 (Overlay Image Captions)： 实现图片上的半透明遮罩背景随文本长度动态收缩。
• 提示框 (Tooltips)： 优化设计系统中的气泡提示，使其在不同文本长度下都能保持紧凑。

6. 总结与未来趋势 (What's Next)
• 作者呼吁浏览器厂商提供原生的 CSS 属性或函数来简化这一过程。
• 强调简单场景的解决方案已趋于成熟，而跨依赖的复杂布局仍是未来探索的方向。

author Roman Komarov

kizu.dev

Solving Shrinkwrap: New Experimental Technique

In this article, I present my new technique for solving a CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content. By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions…

#优质博文 #前端 #性能优化 #JavaScript
The Browser Hates Surprises

AI 摘要：文章指出，浏览器的渲染引擎实际上是一个高效的约束求解器。当开发者中途“惊吓”浏览器（如延迟加载图片、动态插入滚动条等）时，会强制触发回流（Reflow），导致累积布局偏移（CLS）和用户体验的卡顿（Jank）。作者通过对比实验，提出了四种具体的优化方案：利用 scroll-margin-top 处理粘性布局遮挡、使用 scrollbar-gutter 预留滚动条空间、配置 aspect-ratio 预留图片位置，以及通过 Promise.all 编排数据加载。核心观点是：优化不仅是为了更快的加载，更是为了实现更平稳（Calm）的渲染。

author Durgesh Rajubhai Pawar

Frontend Masters

The Browser Hates Surprises

We often treat the browser like a canvas — a blank slate waiting for us to paint pixels. But this mental model is flawed. The browser isn’t really a painter; it’s a constraint solver.

#优质博文 #前端 #CSS
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions

AI 摘要：本文探讨了在复杂前端界面开发中，传统 CSS 命名规范（如 BEM）以及现代抽象工具（如 Tailwind 或 CSS-in-JS）的局限性。作者重点介绍了现已达成 Baseline 兼容的 CSS @scope 特性。@scope 允许开发者在不牺牲 CSS 级联（Cascade）和继承特性的前提下，实现精确的样式隔离。通过支持“甜甜圈作用域（Donut Scoping）”和引入邻近性（Proximity）原则，@scope 有效解决了样式泄露和特异性（Specificity）战争问题，为构建现代、可维护的 UI 提供了一种更符合原生 Web 标准的替代方案。

author Blake Lundquist

Smashing Magazine

CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions — Smashing Magazine

Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new `@scope` rule finally give developers the confidence to write CSS that can keep up with modern front ends?

#优质博文 #前端 #CSS #grid #新特性
CSS Bar Charts Using Modern Functions | CSS-Tricks：本文介绍了如何利用 CSS 现代函数 sibling-index() 和升级后的 attr() 函数（可以接受 data- 属性），以更简洁、高效的方式构建纯 CSS 柱状图。

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

1. 核心技术原理 (Core Technical Principles)
• 使用 display: grid 创建图表容器，并通过 grid-template-rows: repeat(100, 1fr) 建立百分比基准。
• 引入 sibling-index() 函数：自动为列表项分配连续的 grid-column 索引，无需手动编写选择器或 CSS 变量。
• 引入增强版 attr() 函数：直接从 HTML 的 data-value 属性中读取数值，并将其转换为 CSS 可用的 <number> 类型，用于控制 grid-row 的跨度 (span)。

2. 自动布局实现 (Automatic Layout Implementation)
• 详细拆解 sibling-index() 的工作方式：如何智能生成网格顺序，减少对 nth-child 等样式的依赖。
• 解释 attr(data-value number) 的类型转换功能：如何将字符串属性无缝转换为网格行数。
• 探讨浏览器兼容性：目前在 Chrome 和 Safari 中已有支持，但 Firefox 和部分移动端浏览器仍待完善。

3. 多样化图表应用 (Diverse Chart Applications)
• 纵向柱状图：通过调整 grid-row 的起始和结束位置改变增长方向。
• 标记图表 (Marker Charts)：跳过完整的柱条，仅在特定网格点显示标记元素。
• 横向柱状图：交换行与列的逻辑，实现水平方向的数据展示。

4. 历史回顾与演进 (Historical Evolution)
• 对比 2015 年至 2022 年间的传统图表实现方法（如利用伪元素、手动 Grid 布局及 CSS 自定义属性）。
• 强调新技术如何通过减少“黑科技” (Hacks) 和冗余代码来优化开发流程。

author Preethi

CSS-Tricks

CSS Bar Charts Using Modern Functions | CSS-Tricks

CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?

#优质博文 #CSS #动画 #前端 #新特性
Elastic/Bouncy Text Effect：仅使用纯 CSS 实现一种有趣的悬停弹跳文字动画。目前该效果属于实验性特性，仅支持 Chrome 浏览器。

AI 摘要：这篇文章介绍了如何仅使用纯 CSS 实现一种有趣的弹性文字（Elastic/Bouncy Text）效果。作者 Temani Afif 通过组合使用最新的 CSS 特性，如 shape() 函数、 sibling-index() / sibling-count() 索引函数以及 linear() 缓动函数，实现了文字在悬停时的动态曲线跳动。虽然该技术目前仅支持 Chrome 浏览器且对 HTML 结构有特定要求（如每个字母需独立包装并使用等宽字体），但它展示了现代 CSS 在路径动画和动态计算方面的强大能力。

author Temani Afif

Css-Tip

Elastic/Bouncy Hover Effect

A few lines of modern CSS to create a fancy elastic effect on hover

#优质博文 #HTML #性能优化 #前端
Performance-Optimized Video Embeds with Zero JavaScript

AI 摘要：本文介绍了一种利用原生 HTML 标签 <details> 和 <summary> 来优化视频嵌入（Video Embeds）性能的创新方法。通过这种方案，开发者可以在完全不使用 JavaScript 的情况下实现视频的按需加载（Lazy Loading），有效降低页面初始加载时的资源消耗，显著提升首次内容绘制（First Contentful Paint, FCP）和最大内容绘制（Largest Contentful Paint, LCP）等性能指标。该方法不仅能防止累积布局偏移（Cumulative Layout Shift, CLS），还具备原生辅助功能支持，是替代传统重型第三方视频插件的高效方案。

author Stefan Bauer

#优质博文 #CSS #前端 #新特性 #html
Nice Select · February 3, 2026
本文展示了如何利用最新的 CSS 特性（如 appearance: base-select ）在保持原生无障碍性的同时，打造高度可定制且视觉华丽的 <select> 下拉组件。
真的很酷，Codepen 示例

AI 摘要：这篇文章深入探讨了使用现代 CSS 增强原生 <select> 元素的技术。通过 appearance: base-select 这一新特性，开发者可以在保留浏览器内置无障碍支持和键盘导航的基础上，完全自定义下拉框的样式。文章详细列举了锚点定位 (Anchor Positioning)、滚动驱动动画 (Scroll-driven animations)、滚动状态查询 (Scroll-state queries) 以及 ::picker() 等伪元素的应用。虽然目前主要在 Chrome 中提供最佳体验，但其渐进增强 (Progressive enhancement) 的设计思路确保了在其他浏览器中的基本可用性。

author Adam Argyle

nerdy.dev

Nice Select

Building a modern custom select with base-select.

#优质博文 #前端 #React #性能优化
Cache components in Next.js: Faster pages with partial pre-rendering

AI 摘要：文章深入探讨了 Next.js 的新特性——缓存组件（Cache Components）。传统 Next.js 路由通常被视为整体的静态或动态，而缓存组件打破了这一限制，允许开发者在组件粒度决定哪些部分可以被缓存复用。通过结合局部预渲染（Partial Pre-rendering, PPR）和 Suspense，缓存组件能够让页面立即渲染静态外壳（Static Shell），并渐进式地流式传输动态内容，从而将首屏白屏时间从数秒降低至毫秒级，极大地提升了用户体验和服务器效率。

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

1. 局部预渲染 (Partial Pre-rendering, PPR) 的演进
• 现代网页通常由可预测的布局数据、偶尔变化的各种内容以及必须实时计算的个性化数据组成。
• PPR 允许页面分阶段渲染：首先发送静态外壳（Static Shell）以建立结构，而动态部分则包裹在 Suspense 边界（Suspense boundaries）中独立处理。
• 虽然 PPR 改善了交付方式，但它默认在每次请求时重新运行动态部分，无法直接复用渲染结果。

2. 缓存组件 (Cache Components) 核心概念
• 缓存组件将缓存决策从路由级别移至组件级别（Component level），解决了 PPR 的复用局限。
• 开发者可以使用 'use cache' 指令标记特定的 UI 部分，使其在多次请求之间复用渲染输出。
• 在多次请求中，被标记为缓存（C）的组件直接读取存储结果，而动态（D）组件则继续按需在服务器上运行。

3. 配置与代码实践
• 在 next.config.ts 中开启实验性功能标志 useCache: true 以启用组件级缓存。
• 通过自定义缓存配置文件（Cache Profiles）来管理数据的保鲜度（Stale）、重新验证（Revalidate）和过期（Expire）时间。
• 使用 cacheLife() 函数在组件内定义具体的缓存策略，并通过 Suspense 配合加载占位图（Loading Skeleton）来隔离慢速数据源。

4. 性能对比与最佳实践
• 性能对比显示：使用缓存组件后，首屏内容呈现时间（Time to First Content）从约 7 秒骤降至 100 毫秒以内。
• 渲染模型从“全或无”（All-or-nothing）转变为“渐进式渲染”（Progressive rendering）。
• 最佳实践建议：不要在缓存组件中混用运行时 API（Runtime APIs）、保持清晰的 Suspense 层次结构、仅缓存确定性的 UI 部分（如导航、产品列表）。

author Temitope Oyedele

LogRocket Blog

Cache components in Next.js: Faster pages with partial pre-rendering - LogRocket Blog

Speed up Next.js apps by caching predictable components and streaming dynamic data with partial pre-rendering and Suspense.

#优质博文 #React #CSS #设计 #前端 #demo
好喜欢！

React Tilt Button - 3D Tactile React Button Component：一个具备 3D 触感、支持倾斜和深度效果的 React 交互按钮组件。它利用 CSS 的 3D 变换（3D Transforms）技术，为传统的按钮元素注入了物理深度（Depth）和动态倾斜（Tilt）效果。组件不仅内置了从复古游戏（Arcade）到现代金属（Steel）等多种预设主题，还开放了高度细粒度的自定义参数，让开发者可以轻松调整按钮的海拔高度（Elevation）、圆角（Radius）及光泽感（Glare），从而打造出极具表现力的用户界面。

GitHub 地址 https://github.com/archisvaze/react-tilt-button

#优质博文 #CSS #Chrome #无障碍 #新特性
Try text scaling support in Chrome Canary：介绍 Chrome Canary 中新增的 <meta name="text-scale"> 标签，该功能允许网页响应移动端操作系统的全局字体大小设置。
[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 特性概览与背景
• Chrome Canary 现已支持通过 <meta name="text-scale" content="scale" /> 标签来响应系统级的文本缩放。
• 解决了 iOS 和 Android 用户在系统设置中调大字体后，网页内容依然保持原样的问题。
• 该提案已正式进入 CSS Fonts 5 规范，旨在提升移动端网页的无障碍 (Accessibility) 体验。

2. 为什么需要手动开启 (Opt-in)
• 自动强制缩放会导致大量现有网站布局崩溃（例如 LinkedIn 在强制缩放下的导航栏重叠问题）。
• 遵循 WCAG 2.2 标准中关于“调整文本大小 (Resize Text)”和“屏幕回流 (Reflow)”的指南。
• 类似于早期的移动端视口 (Viewport) 标签，需要开发者确认网页能够处理非标准的文字比例。

3. 开发者适配指南
• 技巧 1：不要在 CSS 中覆盖初始字号 (Initial font size)。避免在 :root 级硬编码 px 数值，否则缩放将失效。
• 技巧 2：仅对内容（文字、图标、图像）使用字体相对单位 (Font-relative units)，如 em 或 rem。
• 技巧 3：布局间距（如 padding、margin 或 gap）建议使用固定单位（如 px），以为放大后的文字腾出更多回流空间。
• 技巧 4：在 320px 宽度且 200% 缩放的极端条件下进行测试，确保网站在窄屏手机上依然可用。

4. 未来挑战与展望
• 探讨大标题 (Heading) 与正文 (Body) 缩放比例的差异化处理，避免标题过大导致排版异常。
• 期待其他主流浏览器在未来跟进支持该标准。

author Josh Tumath

#优质博文 #AI #前端
Vercel 的最新研究表明，在针对 Next.js 16 开发的最新评估中，他们发现将 8KB 的压缩后的文档索引塞进 AGENTS.md 文件比使用 skills 效果更好，因为 skills 无法可靠地触发。

原文如下，还挺符合直觉的。

我们原本以为技能测试能够解决编码代理学习框架特定知识的问题。但在构建了专注于 Next.js 16 API 的评估系统后，我们发现了一些意想不到的情况。

直接嵌入 AGENTS.md 中的 8KB 压缩文档索引实现了 100% 的通过率，而即使有明确的指令告知代理使用技能，技能的最高通过率也仅为 79%。如果没有这些指令，技能的表现甚至不如完全没有文档。

AI 编码代理依赖于会过时的训练数据。Next.js 16 引入了诸如 'use cache' 、 connection() 和 forbidden() 等 API，而这些 API 并不包含在当前的模型训练数据中。当代理不了解这些 API 时，它们会生成错误的代码或回退到旧的模式。
反过来也可能出现这种情况，即您运行的是较旧的 Next.js 版本，而模型却建议使用项目中尚不存在的较新 API。我们希望通过让代理访问版本匹配的文档来解决这个问题。

author Jude Gao Software Engineer, Next.js

Vercel

AGENTS.md outperforms skills in our agent evals - Vercel

A compressed 8KB docs index in AGENTS.md achieved 100% on Next.js 16 API evals. Skills maxed at 79%. Here's what we learned and how to set it up.

#优质博文 #CSS #前端 #层叠上下文 #course
Unstacking CSS Stacking Contexts — Smashing Magazine
非常好的好文章！条理清晰，深入剖析 CSS 层叠上下文 (Stacking Contexts) 的工作原理，解释为什么 z-index 会失效，并提供实用的调试技巧与解决方案。

被安利了 Better CSS Stacking Contexts 这个 vscode 插件

AI 摘要：这篇文章详细介绍了 CSS 中层叠上下文 (Stacking Contexts) 的核心逻辑，解决了开发者经常遇到的 “为什么设置了 z-index: 9999 元素还是被遮挡” 的困惑。作者将层叠上下文比作“文件夹”，解释了一旦元素被困在父级文件夹中，其 z-index 就只能在内部生效。文章分析了 opacity、transform 等属性如何意外触发层叠上下文，并提供了针对模态框 (Modal)、下拉菜单 (Dropdown) 和工具提示 (Tooltip) 等常见场景的调试清单与修复方案（如 HTML 重构、Portal 传送门、以及 isolation: isolate 属性的应用）。

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

1. 层叠上下文的基础概念 (Understanding Stacking Contexts)
• 文件夹比喻：网页像桌面，HTML 元素像纸张。层叠上下文就像“文件夹”，文件夹内的纸张（子元素）无论 z-index 多高，都无法超越文件夹本身的层级。
• 黄金法则：子元素的 z-index 仅在当前文件夹内部有效。浏览器首先对文件夹（父级上下文）进行排序，然后再排序其内部的纸张。
• 触发因素：除了定位属性外，opacity (透明度)、transform (变换)、filter (滤镜) 和 contain (包含) 等属性也会因为浏览器性能优化（GPU 加速）而自动创建新的层叠上下文。

2. 常见问题场景分析 (The “Unstacking” Problem)
• 被困的模态框 (The Trapped Modal)：当模态框的父容器（如 Header）层叠顺序低于主体内容时，模态框即便设置极高 z-index 也会被遮挡。
• 没顶的下拉菜单 (The Submerged Dropdown)：导航栏与主体内容的父子层级关系导致菜单显示在下方内容之后。
• 被裁剪的工具提示 (The Clipped Tooltip)：overflow: hidden 会无视 z-index 直接裁剪超出边界的内容，这是另一种特殊的层叠陷阱。

3. 调试与排查工具 (Identifying The Trapped Layer)
• 调试清单：从问题元素开始，逐级向上检查 DOM 树，寻找可能触发层叠上下文的 CSS 属性。
• 高级工具：利用浏览器（如 Edge/Firefox）的 3D 视图查看层级；使用 “CSS Stacking Context Inspector” 插件或 VS Code 插件进行可视化排查。

4. 解决方案与最佳实践 (Unstacking And Regaining Control)
• 重构 HTML 结构：将模态框等组件移出嵌套容器，直接放在 <body> 下，这是最彻底的修复方式。
• 调整父级上下文：修改父容器的 z-index 或移除不必要的上下文触发属性。
• 传送门 (Portals)：在 React/Vue 框架中使用 Portal 技术将组件逻辑上保留在原位，但在 DOM 上渲染到顶层。
• 无副作用的隔离 (isolation: isolate)：利用 isolation 属性显式创建层叠上下文，有效解决负 z-index 导致的背景遮挡问题，且不会像其他属性那样产生布局副作用。

author Gabriel

Smashing Magazine

Unstacking CSS Stacking Contexts — Smashing Magazine

In CSS, we can create “stacking contexts” where elements are visually placed one on top of the next in a three-dimensional sense that creates the perception of depth. Stacking contexts are incredibly useful, but they’re also widely misunderstood and often…

#优质博文 #前端 #AI #Coding #编程技巧 #ClaudeCode
如何在保持“负责任”的前提下，将 AI 编码工具深度集成到日常开发工作流中。
Practical Use Of AI Coding Tools For The Responsible Developer

是个比较贴合大部分正常工程师结合 AI 开发的文章。

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

1. 负责任的 AI 开发原则
• 定义责任范围： 负责任的开发者必须确保代码质量，不给同事增加评审负担，并遵守公司的安全与隐私政策。
• 安全与验证： 严禁向 AI 泄露密钥 (Secrets) 或敏感客户数据 (PII)；始终将 AI 生成的代码视为“陌生人的代码”，必须经过严格测试。
• 工具准入： 使用前需确保工具已获得公司批准，妥善处理专有代码的合规性。

2. 八大实战场景
• 理解陌生的代码库： 通过 AI 代理快速获取架构概览（入口点、路由、鉴权等），并让 AI 推荐阅读文件的优先级。
• 处理依赖升级的破坏性变更： 在升级 npm 包（如从 plotly.js v2 升至 v3）遇到问题时，利用 AI 快速定位 API 变更并寻找替代方案。
• 跨文件安全复用重构： 在一个文件完成重构后，利用 AI 将相同的重构逻辑安全地推广到其他具有相同模式的文件中。
• 在陌生技术领域实现功能： 借力 AI 在短时间内完成不熟悉领域的任务，例如使用 GLSL 编写复杂的着色器动画。
• 自动化编写测试： 将枯燥的单元测试和集成测试编写工作“外包”给 AI，并要求其涵盖正常路径与边界情况。
• 开发内部分析工具： 利用 AI 快速编写脚本，处理诸如代码重复率分析、数据导出至 Excel 等临时性的辅助任务。
• 现代化改造陈旧代码： 辅助进行重大的架构迁移，例如将十年前的构建流程（如 requireJS）迁移至现代的 Vite 栈。
• 总结与起草： 自动生成 Git 提交信息摘要或起草代码变更说明。

3. 优化建议与最佳实践
• 精细化提示词工程： 提示词越具体，输出质量越高。推荐在 Prompt 结尾增加“开始前你有什么问题要问我吗？”，让 AI 补充缺失的上下文。
• 结合版本控制： 采用小步快跑的提交方式，以便在 AI 生成错误代码或过度修改时能快速回滚。
• 坚持彻底的代码评审： AI 可能会产生幻觉 (Hallucination) 或生成“代码垃圾 (Slop)”。开发者必须逐行审查 AI 输出，保持最后一道质量关卡。

4. 行业反思与挑战
• 警惕技能萎缩： 担心新人开发者过度依赖 AI 而跳过了“解决问题的磨砺过程”，导致基础能力不足。
• AI 非万能钥匙： 卓越的开发能力和解决问题的核心素质永远不会过时，AI 应定位为辅助开发者进行高层级思考的盟友。

author Stefan Kaltenegger

Smashing Magazine

Practical Use Of AI Coding Tools For The Responsible Developer — Smashing Magazine

AI coding tools like agents can be valuable allies in everyday development work. They help handle time-consuming grunt work, guide you through large legacy codebases, and offer low-risk ways to implement features in previously unfamiliar programming languages.…