前端技术文章
-
拖拽排序跳回原位，通常不是 CSS 位置算错，而是指针事件丢失、视觉顺序没有同步 DOM 顺序，或键盘回退路径没有共用同一套排序逻辑。本文用原生 Pointer Events 拆开定位、提交和验收边界。351 收藏 -
讲清 Fetch 配合 AbortController 传递 abort reason 的写法，区分用户取消、超时与网络异常，并说明组合信号、兼容处理和 signal 一次性边界。351 收藏 -
content-visibility: auto 能跳过屏外内容，但占位尺寸估计不当会让滚动时页面跳动。本文用 contain-intrinsic-size 给卡片提供接近真实高度的布局尺寸，并说明 auto 记忆值、网格场景和降级边界。351 收藏 -
用 CSS Anchor Positioning 给提示气泡和筛选浮层建立稳定锚点，结合 position-try 回退与 position-visibility 处理视口边缘、滚动和旧浏览器兼容。349 收藏 -
异步函数（如 async 声明的 API 调用）必然返回 Promise，不能直接获取解析后的值；需通过 await（在 async 上下文中）或 .then()（在同步上下文中）获取最终结果。 异步函数（如 `async` 声明的 API 调用）必然返回 Promise，不能直接获取解析后的值；需349 收藏 -
CSS container query 让卡片根据父容器宽度切换单列与双列布局，本文从 container-type、@container、命名容器、cqi 和降级方案讲清可复用组件的响应式边界。349 收藏 -
通过稳定的 id、aria-describedby 和 aria-invalid 关联表单帮助文本与错误提示，说明动态校验、可见状态和复杂内容边界。349 收藏 -
通过三槽位卡片示例，说明 CSS subgrid 如何共享父网格行轨道，并处理响应式排列、缺失字段、长文本和不支持环境的降级。349 收藏 -
CSS Flex 子元素撑破容器，最常见原因不是父容器宽度失效，而是 flex 子项默认的自动最小尺寸被长文本、不可断 URL 或显式宽度撑住。本文从 min-width: 0 入手，配合换行和滚动边界，整理一套可复用的排查方法。348 收藏 -
Web Locks API 能让同源标签页和 Worker 围绕同一锁名协调任务，但默认排队只避免并发，不会自动消除顺序重复。本文讲清 ifAvailable、锁内完成标记、长期持锁和服务端幂等的组合方式。348 收藏 -
用 CSS Anchor Positioning 的 anchor-name、position-anchor 和 anchor-size() 让弹出层宽度跟随触发按钮，并通过回退值、@supports 和检查清单处理锚点缺失、定位方式与浏览器兼容边界。348 收藏 -
通过 Ja vaScript 全局禁用右键菜单、文本选中、复制粘贴等操作，但为 和 等可编辑元素显式启用事件，实现防内容盗取与良好表单体验的平衡。 通过 Ja vaScript 全局禁用右键菜单、文本选中、复制粘贴等操作，但为 `` 和 `` 等可编辑元素显式启用事件，实现防内容盗取与良好表单体验的347 收藏 -
Promise.all 失败只代表聚合结果不可用，不会自动取消其他请求。本文用 AbortController、共享 AbortSignal 和请求代次，处理并发请求失败、切页、重试与迟到响应。347 收藏 -
SVG 图形想要等比填满容器，关键是同时设置合理的 viewBox 和 preserveAspectRatio：meet 保留完整图形，slice 铺满但可能裁切，none 才会允许非等比拉伸。本文按留白、裁切、变形和对齐问题给出可直接套用的写法。347 收藏 -
文章 · 前端 | 2个月前 | 前端 · javascript · 登录态 · 浏览器API · Cookie Store API cookieStore 登录态变化 CookieChangeEvent 前端降级
页面登录态变化后，多个组件经常要各自轮询 Cookie 或等待下一次刷新。Cookie Store API 提供异步读取和 change 事件，可以把登录失效、退出登录与界面刷新串成一条可复查的链路；本文同时说明 HTTPS、替换同名 Cookie 和旧浏览器降级边界。346 收藏