前端技术文章
-
用一个可运行的 CSS 示例解释 backdrop-filter 的透明背景、滤镜叠加和 backdrop root 边界，并给出兼容回退检查。496 收藏 -
用 ResizeObserver 监听响应式卡片宽度时，先读取 borderBoxSize，再用 requestAnimationFrame 合并同一帧更新，避免回调里反复改布局造成循环告警。487 收藏 -
Vite 8 用 Rolldown 统一开发依赖优化与生产打包链，同时把 JavaScript 转换、压缩和 CSS 压缩边界交给 Oxc 与 Lightning CSS。本文按配置和插件边界说明升级时如何核对。486 收藏 -
用 requestIdleCallback 安排不影响首屏交互的后台任务，结合 IdleDeadline.didTimeout 与 timeRemaining() 分片处理，并给出不支持该 API 时的安全降级方案。480 收藏 -
用一个可运行的 HTML dialog 示例验证 closedby 的 none、closerequest、any 三种关闭边界，并记录 close 事件、returnValue 与旧浏览器降级策略。479 收藏 -
当卡片标题、正文和按钮高度不一致时，CSS subgrid 可以让嵌套卡片共享父级网格轨道。本文用一组商品卡片拆开 grid-template-rows: subgrid 的生效条件、代码改法、@supports 回退与常见边界。474 收藏 -
AbortController 取消 fetch 并不等于已经停止 Promise 链。本文用一个组件卸载场景拆解 signal、catch 和状态门禁的关系，给出可复用的前端请求收口写法。465 收藏 -
用 Fetch Response.body 和 ReadableStream 将搜索结果按块解析并增量渲染，说明 reader.read、TextDecoderStream、controller.desiredSize 与背压边界。460 收藏 -
ResizeObserver 回调里直接改尺寸，可能让布局反馈进入下一帧并反复触发 loop completed with undelivered notifications。本文用真实的 ResizeObserver、requestAnimationFrame 和 entry.target.style.width 示例拆解原因，并给出可验收的收敛写法。456 收藏 -
文章 · 前端 | 4天前 | 布局 · css · 前端开发 · 浏览器特性 · anchor-name position-try-fallbacks CSS anchor positioning position-anchor 前端浮层
用一个可移动的菜单按钮和提示浮层，验证 CSS anchor positioning 如何通过 anchor-name 建立锚点、position-anchor 连接目标，并用 position-try-fallbacks 在空间不足时切换位置。454 收藏 -
文章 · 前端 | 6天前 | javascript · 前端开发 · 浏览器 API · ArrayBuffer postMessage Transferable Web Workers structured clone
用一个可复现的 Web Worker 场景解释 ArrayBuffer 的 Transferable 传递：怎样避免大块数据复制，为什么发送后原引用会失效，以及如何用 byteLength 和 messageerror 定位问题。453 收藏 -
文章 · 前端 | 2天前 | 前端 · javascript · 滚动容器 · 用户体验 · 浏览器 API · JavaScript scrollIntoView container: nearest 嵌套滚动容器 前端滚动
嵌套面板里定位表单错误、消息或搜索结果时，默认 scrollIntoView 可能把整页一起滚走。本文拆解 container: nearest 的作用范围、兼容回退和验收写法，帮助前端保留用户当前的页面上下文。447 收藏 -
文章 · 前端 | 4天前 | 前端 · 路由 · javascript · 兼容性 · 浏览器 API · 嵌套路由 JavaScript URLPattern URLPattern groups URLPattern test 浏览器 API
用 JavaScript URLPattern 匹配 /:space/:project/:page 这样的嵌套路由，先用 test 判断是否命中，再从 pathname.groups 取参数，并通过特性检测为旧浏览器保留回退路径。445 收藏 -
ResizeObserver 回调里直接改尺寸，容易触发布局反馈和连续通知。本文用 pending 标记、requestAnimationFrame 与 applyLayout 拆开读写阶段，说明如何定位循环回调并保留可验收的布局更新链路。439 收藏 -
实现模态层时，inert 负责让背景区域真正停止交互，dialog 与 aria-modal 负责表达语义，关闭时再把焦点还给触发按钮，避免键盘用户迷路。430 收藏