前端技术文章
-
文章 · 前端 | 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 · 前端动画 document.startViewTransition View Transitions API startViewTransition SPA页面切换
单页应用切换列表与详情时，可以用 document.startViewTransition 包住 DOM 更新，让浏览器接管新旧视图的过渡；同时保留 prefers-reduced-motion 和 API 能力检测，确保不支持时仍能正常切换。128 收藏 -
页面使用 position: sticky 或 fixed 固定导航后，跳转到标题的锚点常常被导航栏盖住。本文用 scroll-margin-top 与 scroll-padding-top 区分元素级和容器级修复，补上动态导航高度、移动端安全区和浏览器降级检查。336 收藏 -
WebSocket 断线重连最容易踩中旧连接复活：旧 socket 的 close 回调晚到，可能覆盖新连接状态。本文从 readyState、连接代次、指数退避和手动关闭四个边界出发，给出可验证的浏览器实现。467 收藏 -
拖拽排序松手后顺序回跳，通常不是 CSS 问题，而是指针位置、占位元素和最终数组没有在同一个时序里更新。本文用 Pointer Events、占位节点和单一提交点拆解竞态，并给出可复核的实现与验收方法。296 收藏 -
用浏览器原生 Popover API 做一个键盘可用的操作菜单，覆盖 popovertarget、自动关闭、焦点回收、toggle 事件和不支持浏览器的降级方案。340 收藏 -
CSS if() 可以在单个属性值中根据 style()、media() 或 supports() 条件选择结果，适合收拢主题和响应式分支，但它仍是实验性能力。本文用自定义属性示例说明条件顺序、else 回退、@media 与 @supports 的边界，并给出上线前的兼容检查。216 收藏 -
前端允许上传 SVG 时，不能只看文件名或 input 的 accept。本文从浏览器提示、服务端类型判断、内容净化、隔离存储和回归验证五个层面，给出一套可落地的安全边界。398 收藏 -
用 View Transitions API 给列表新增、删除和筛选加上稳定的视图过渡，同时保留不支持浏览器和减少动态效果用户的可用回退。441 收藏 -
首屏图片明明已经压缩，LCP 仍然偏慢，常见原因是资源发现晚、优先级被误用或懒加载挡住了关键图。本文用 fetchpriority、loading、preload 和 DevTools 网络瀑布建立一套可验收的加载顺序。476 收藏