前端技术文章
-
HTML inert 是一个全局布尔属性，可以让元素及其后代暂时不能获得焦点、点击或进入辅助技术的可访问性树。本文用一个可关闭弹窗说明如何切换 inert、保留弹窗内焦点、处理 Escape 和旧浏览器降级，并列出容易把 aria-hidden、pointer-events 与 inert 混用的边界。103 收藏 -
原生 HTML dialog 关闭后，焦点恢复、Esc 取消和按钮结果经常被混在一起。本文用一个可复现的确认框拆开 showModal、returnValue、cancel/close 事件和焦点恢复的边界。128 收藏 -
页面关闭、跳转或切后台时，上报请求容易被浏览器中断。本文对比 navigator.sendBeacon 与 fetch keepalive 的适用边界，给出请求体、响应处理、幂等键和重复提交验收方法，帮助把离开页面前的轻量数据上报做得更可靠。379 收藏 -
文章 · 前端 | 3天前 | 前端 · 性能 · javascript · Fetch API · 异步请求 · 竞态条件 搜索框 Fetch AbortController AbortSignal
搜索框连续输入时，较早发出的慢请求可能晚于新请求返回并覆盖结果。用 AbortController 取消上一轮 fetch，再用请求序号做最后一道验收，就能同时降低无效请求和旧数据回写风险。497 收藏 -
前端表单重复提交通常不是单纯把按钮 disabled 就能解决。本文从 submit 事件、form.submit()、requestSubmit() 和原生校验的差异出发，给出一次提交门闩、异步恢复与键盘回车场景的可验证写法。200 收藏 -
拖拽排序跳回原位，通常不是 CSS 位置算错，而是指针事件丢失、视觉顺序没有同步 DOM 顺序，或键盘回退路径没有共用同一套排序逻辑。本文用原生 Pointer Events 拆开定位、提交和验收边界。351 收藏 -
文章 · 前端 | 3天前 | 浏览器 · javascript · css · 前端交互 · 前端交互 关闭动画 @starting-style transition-behavior Popover API
Popover API 的弹层如果只给 :popover-open 写过渡，首次打开和关闭时常会出现闪现或瞬间消失。本文从最小示例出发，说明 @starting-style、transition-behavior、overlay 与 reduced motion 的配合边界。307 收藏 -
文章 · 前端 | 3天前 | 前端 · 浏览器 · javascript · css · 交互体验 · CSS过渡 dialog popover CSS @starting-style 首次显示动画
元素第一次进入页面或从 display:none 变为可见时，普通 transition 没有起始帧，popover 和 dialog 尤其容易出现硬切。CSS @starting-style 可以补上首次显示状态，但仍要处理 overlay、关闭动画、浏览器降级和 prefers-reduced-motion。171 收藏 -
用 adoptedStyleSheets 把同一份构造样式表复用到多个 ShadowRoot，重点核对 CSSStyleSheet 构造时机、跨文档限制、动态更新与不支持浏览器的 style 回退。307 收藏 -
用户连续点击提交按钮，常见结果是重复请求、重复订单或失败后无法恢复。本文从 HTML formdata 事件切入，拆开提交锁、请求取消、失败恢复和键盘回车的边界，给出可核对的前端实现。190 收藏 -
跨文档 View Transitions 不是给单页应用换皮：当前页和目标页要同源并同时用 @view-transition 选择加入，元素命名还要避免冲突。本文从多页站点导航现场出发，给出最小接入、滚动位置处理、浏览器降级和上线验收清单。412 收藏 -
View Transition API 能让页面切换从硬切变成连续过渡，但快照时机、伪元素样式和不支持浏览器的降级处理，都会造成白闪、旧页面残留或动画不生效。本文从可复现的闪烁现场出发，逐项定位并给出可回退的实现方式。394 收藏 -
Fetch API 适合现代上传请求，但标准接口目前没有通用的上传进度事件。本文用一个可回退的前端上传流程，说明何时选择 XMLHttpRequest、如何显示进度，以及取消、失败和重复提交怎么验收。290 收藏 -
文章 · 前端 | 3天前 | 前端 · javascript · Web API · 页面过渡 · 前端动画 document.startViewTransition View Transitions API startViewTransition SPA页面切换
单页应用切换列表与详情时，可以用 document.startViewTransition 包住 DOM 更新，让浏览器接管新旧视图的过渡；同时保留 prefers-reduced-motion 和 API 能力检测，确保不支持时仍能正常切换。128 收藏 -
文章 · 前端 | 3天前 | css · 前端开发 · 用户体验 · 响应式布局 · 页面导航 · 移动端适配 锚点定位 CSS scroll-margin-top 固定导航 scroll-padding-top
页面使用 position: sticky 或 fixed 固定导航后，跳转到标题的锚点常常被导航栏盖住。本文用 scroll-margin-top 与 scroll-padding-top 区分元素级和容器级修复，补上动态导航高度、移动端安全区和浏览器降级检查。336 收藏