前端技术文章
-
用一个可渐进落地的组件案例说明 CSS @scope 迁移：确定根节点与下边界、保留旧规则回退、处理层叠邻近度与继承，并按浏览器支持范围清理历史选择器。294 收藏 -
SPA 接入 View Transition API 时，动画应该是渐进增强而不是状态更新的前置条件。本文用同一更新回调处理能力检测、减少动态效果、焦点恢复和 updateCallbackDone 边界。142 收藏 -
FormDataEvent 会在表单数据条目构造完成后暴露同一个 FormData 对象。本文用一个原生 JavaScript 小项目演示如何统一补充、替换和删除字段，并处理 submitter、成功控件、fetch multipart 边界与取消提交等关键边界。288 收藏 -
对比 requestSubmit 与 form.submit 的原生校验、submit 事件、提交按钮语义和兼容边界，给出自定义按钮、异步确认与直接提交场景的选择清单。392 收藏 -
scheduler.yield 能把主线程长任务切成多个 continuation，并在 postTask 内继承优先级。本文给出时间预算切片、取消处理与兼容降级的完整写法。110 收藏 -
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 收藏