前端技术文章
-
scroll-timeline 可以把滚动容器从起点到终点的位置映射为关键帧进度。本文用阅读进度条给出最小配方，解释命名时间轴、scroll() 变体、常见失效原因与渐进增强写法。251 收藏 -
IntersectionObserver 的 scrollMargin 会扩展 root 内嵌套滚动容器的裁剪边界，适合处理轮播、虚拟列表和懒加载的提前观察。本文说明它与 rootMargin、threshold 的分工，以及重建观察器和兼容性回退方法。380 收藏 -
closedby 用于控制 dialog 是只能由显式机制关闭，还是允许 Esc、平台关闭请求，以及点击外部的 light dismiss。本文对比 none、closerequest、any，并说明 showModal() 与 show() 的默认边界。269 收藏 -
HTML popover 能把轻量浮层放进浏览器顶层，并原生处理外部点击和 Escape 关闭。本文用账户操作面板说明声明式写法、三种状态选择和脚本控制边界。249 收藏 -
Navigation API 通过 navigate 与 intercept 统一接管单页应用导航，本文说明拦截边界、异步渲染、历史状态、错误处理和 History API 降级方案。167 收藏 -
用 View Transition API 包裹 DOM 状态更新，为单页应用加入平滑过渡，并处理浏览器降级、局部元素命名、异步更新和减少动效偏好。149 收藏 -
通过字符串键、对象身份键、读取方式和序列化需求，对比 Object.groupBy 与 Map.groupBy 的选择方法，并解释空原型对象、键转换和元素引用等容易忽略的边界。138 收藏 -
Promise.withResolvers 适合回调触发位置与 Promise 创建位置分离的场景，例如事件监听器、消息队列、流和 SDK 外部回调。本文用一个带缓冲和清理能力的异步队列说明正确封装方式，并列出不适合使用 deferred 的边界。418 收藏 -
CSS 容器样式查询可以用 @container style() 读取父容器上的自定义属性。本文用 card-mode 示例说明无值和值匹配、继承、计算值、@property、命名容器、尺寸组合和兼容降级。414 收藏 -
CSS Anchor Positioning 可以让 tooltip、菜单等浮层直接关联触发元素，并通过 position-try 配置靠近视口边缘时的回退位置。316 收藏 -
前端显示业务时间时，应保留后端时间点并显式传入用户IANA时区。本文给出Intl.DateTimeFormat复用写法、resolvedOptions检查和无偏移字符串处理边界。363 收藏 -
多列卡片的标题和正文长度不同会让按钮上下错位。本文用 CSS subgrid 继承父网格行轨道，对齐嵌套卡片的标题、内容和操作区域，并给出 gap、响应式和兼容降级方案。426 收藏 -
Service Worker 更新时不要直接覆盖旧缓存。本文用版本化缓存、activate 清理和接管策略，拆解新资源先落地、旧资源再删除的可靠流程。490 收藏 -
WebSocket 客户端不能只在 close 事件里 new 一个连接。本文从连接代次、指数退避、messageId/seq 去重和待发送队列出发，给出一套能控制重复副作用的浏览器端设计，并说明客户端去重与服务端幂等的边界。171 收藏 -
用 View Transitions API 把列表卡片与详情页的关键元素连接起来，掌握 view-transition-name 的唯一性、路由更新封装、能力回退和减少动效处理。305 收藏