前端技术文章
-
可访问模态弹窗不只是加 aria-modal。本文优先用原生 dialog 与 showModal 完成焦点限制和同文档背景 inert，再补齐初始焦点、Escape/按钮关闭、触发器恢复、动态触发器兜底，并说明何时才需要手写 Tab 焦点陷阱。309 收藏 -
用 useActionState 让 Server Action 在校验失败时同时返回字段值和错误信息，避免表单回显为空，并区分预期错误与异常。308 收藏 -
围绕 localStorage 配额异常，说明同步写入的失败边界、异常捕获、内存降级和迁移 IndexedDB 的判断方法。308 收藏 -
用 View Transitions API 把列表卡片与详情页的关键元素连接起来，掌握 view-transition-name 的唯一性、路由更新封装、能力回退和减少动效处理。305 收藏 -
用 Fetch 读取 Response.body 的 ReadableStream，按块更新页面，并处理 UTF-8 中文跨块、HTTP 异常、空 body 和取消读取。304 收藏 -
用一个可渐进落地的组件案例说明 CSS @scope 迁移：确定根节点与下边界、保留旧规则回退、处理层叠邻近度与继承，并按浏览器支持范围清理历史选择器。294 收藏 -
CSS container query 不生效时，先确认父元素设置了 container-type，再检查查询命中的容器、宽度条件和浏览器支持；文中给出卡片布局的最小写法与降级方案。291 收藏 -
讲清 Fetch keepalive 在页面隐藏、跳转或关闭前发送小请求的写法、64 KiB 限制、幂等设计，以及与 sendBeacon 的选择边界。291 收藏 -
本文用一张可复用内容卡片讲清 CSS Container Query：声明具名容器、按容器宽度切换布局，并处理容器单位、可访问性与降级边界。289 收藏 -
FormDataEvent 会在表单数据条目构造完成后暴露同一个 FormData 对象。本文用一个原生 JavaScript 小项目演示如何统一补充、替换和删除字段，并处理 submitter、成功控件、fetch multipart 边界与取消提交等关键边界。288 收藏 -
WebSocket close 事件出现 1006 时，浏览器并不是收到了服务端发送的 1006。本文用 CloseEvent 字段、readyState、Network 记录和服务端日志对照，建立一套可执行的异常断链排查方法。286 收藏 -
图片加载完成前先用 aspect-ratio 建立稳定占位，再配合 width、height、object-fit 和兼容降级，减少卡片内容被推移造成的布局跳动。282 收藏 -
动态 import 失败时，用统一的 catch 和 finally 切换到可重试的降级界面，并区分网络、路径和模块执行问题。282 收藏 -
大量元素使用 IntersectionObserver 时，应按 root、threshold 和业务动作建立少量观察组，再用 entries、dataset、unobserve 与 disconnect 验证拆分是否正确。276 收藏 -
Fetch 使用 ReadableStream 作为请求体时，duplex: half 不是装饰参数，而是流式上传的必要声明。本文解释它的语义、代码写法、兼容边界与缓冲降级方案。270 收藏