前端
已收录文章：147篇
-
文章 · 前端 | 1个月前 | 前端 · javascript · 前端动画 document.startViewTransition View Transitions API startViewTransition SPA页面切换单页应用切换列表与详情时，可以用 document.startViewTransition 包住 DOM 更新，让浏览器接管新旧视图的过渡；同时保留 prefers-reduced-motion 和 API 能力检测，确保不支持时仍能正常切换。128 收藏
-
拖拽排序松手后顺序回跳，通常不是 CSS 问题，而是指针位置、占位元素和最终数组没有在同一个时序里更新。本文用 Pointer Events、占位节点和单一提交点拆解竞态，并给出可复核的实现与验收方法。296 收藏
-
CSS if() 可以在单个属性值中根据 style()、media() 或 supports() 条件选择结果，适合收拢主题和响应式分支，但它仍是实验性能力。本文用自定义属性示例说明条件顺序、else 回退、@media 与 @supports 的边界，并给出上线前的兼容检查。216 收藏
-
前端允许上传 SVG 时，不能只看文件名或 input 的 accept。本文从浏览器提示、服务端类型判断、内容净化、隔离存储和回归验证五个层面，给出一套可落地的安全边界。398 收藏
-
横向卡片滑动不应只停在 scroll-snap-type：用 scroll-snap-align、scroll-padding 和 scroll-snap-stop 组合出可控的触摸体验，再用键盘焦点、窄屏和快速甩动验收边界。404 收藏
-
网页里同时存在 dialog、抽屉和自定义浮层时，可用 CloseWatcher 统一接收 ESC 或系统返回关闭请求，再把焦点恢复、脏数据确认和旧浏览器回退放进同一条关闭链路。126 收藏
-
当 hover 位移、入场缩放和循环旋转同时写进一个元素时，animation-composition 可以明确 transform 的叠加方式。本文用 add、accumulate 和 replace 拆开关键帧冲突，并给出兼容降级与验收方法。210 收藏
-
搜索框快速输入时，慢请求可能晚于新请求返回，旧结果就会覆盖当前关键词。本文用请求序号、AbortController 和有限并发预算拆解竞态边界，并给出取消、回收和键盘操作下的验收办法。260 收藏
-
CSS :has() 让父元素可以根据子元素状态切换样式，适合表单错误提示、选中卡片和条件高亮。文章用 :user-invalid、:checked 与 @supports 说明最小写法、边界和旧浏览器降级。340 收藏
-
用 CSS field-sizing: content 让文本输入框按内容收缩和增长，同时用 min-width、max-width 与 fallback 控制窄屏布局和旧浏览器兼容。442 收藏
-
中文输入法候选词还没确认时，AI 聊天框把回车当成发送，会截断用户正在输入的句子。本文用 compositionstart、compositionend 和 InputEvent.isComposing 组合出稳定的回车发送规则，并补上移动端、粘贴和可访问性检查。217 收藏
-
Chrome 在 2026 年展示了 WebMCP 这一面向浏览器智能体的实验性能力。真正接入时，先把网页动作收敛成可授权、可校验、可回退的工具接口，再决定是否进入试验，而不是把现有 API 全部暴露出去。326 收藏