前端技术文章
-
CSS subgrid 能让嵌套卡片在指定方向沿用父网格轨道，解决标题、正文和操作区逐卡片漂移的问题。本文说明列与行的选择、gap 继承、命名线和隐式轨道边界。238 收藏 -
文章 · 前端 | 3星期前 | javascript · 前端工程 · AbortSignal 事件订阅 JavaScript Observable 响应式清理 addEventListener signal
不依赖尚未普遍可用的 Observable API，使用 AbortController 和 AbortSignal 统一管理事件监听、异步请求与订阅清理，讲清生命周期、重复取消和兼容回退。236 收藏 -
用原生 Popover API 做一个可访问的无 JavaScript 弹出层，覆盖 popover、popovertarget、light dismiss、焦点行为与不支持浏览器的降级方案。235 收藏 -
从输入组件重构案例说明为什么不应默认把 DOM Event 传到业务层，并给出语义回调、原生事件保留边界、TypeScript 示例和测试判断清单。234 收藏 -
文章 · 前端 | 1星期前 | javascript · Web Components Custom Elements attributeChangedCallback observedAttributes
attributeChangedCallback 不触发时，先检查 observedAttributes 是否监听了正确的 attribute，再确认代码改的是 DOM attribute 而不是只改 JavaScript property。本文用最小示例说明属性反射、初始值和回调重渲染的边界。233 收藏 -
前端用 fetch 下载文件时，读取 Content-Disposition 中的 filename* 或 filename，再结合 Blob URL 和 a.download 保留后端文件名；跨域场景还要暴露响应头。231 收藏 -
用一个原生 HTML dialog 表单说明 showModal、close、returnValue 与 cancel 事件的关系，给出提交、取消和重复打开时的可靠状态处理方式。229 收藏 -
文章 · 前端 | 3星期前 | 前端 · css · display @starting-style popover CSS transition-behavior overlay top-layer
Popover 打开时能淡入，关闭时却瞬间消失，通常不是 opacity 写错，而是 display 和 overlay 提前切换。本文用最小示例说明 @starting-style、transition-behavior: allow-discrete、display 与 overlay 如何共同保住离场动画，并给出兼容降级边界。225 收藏 -
用 AbortSignal.timeout 为 fetch 设置可解释的超时边界，区分 TimeoutError、AbortError 与网络错误，并处理响应体读取阶段的取消和兼容降级。223 收藏 -
Service Worker 更新失败通常不是简单清空浏览器缓存，而是脚本版本、install 预缓存、waiting 状态和 fetch 策略没有对齐。本文用一个稳定的 sw.js 与版本化缓存示例，说明如何配置更新、控制接管时机，并用 DevTools 定位旧页面来源。222 收藏 -
用同文档 View Transition API 为 SPA 页面切换建立稳定的元素对应关系，覆盖 startViewTransition、view-transition-name、伪元素动画、异步更新与回退边界。222 收藏 -
移动端长列表使用虚拟滚动后，scrollIntoView 可能滚不到顶部。本文从用户症状、滚动时间线和可复现实验入手，解释布局测量与渲染窗口冲突的根因，并给出可验证的修复与回归检查。221 收藏 -
IndexedDB 事务不能稳定跨过 await，因为事务只在创建任务和请求事件回调中保持 active。先完成异步准备，再创建最小范围事务，并用 complete 与 abort 判断最终结果。221 收藏 -
Popover API 的 auto 状态会在点击外部时自动关闭。本文用独立 draft 状态保存表单输入，在 toggle 打开时恢复，并把清理动作限定在提交成功或明确取消。220 收藏 -
浏览器 Cache API 不会自动清理旧资源。本文用版本化缓存名、activate 白名单和命中范围检查，说明如何安全删除旧版本并排查更新不生效。220 收藏