前端技术文章
-
URLPattern 可以把带参数的 pathname 写成可复用模式，再用 test() 判断路由是否命中、用 exec() 读取 pathname.groups 中的参数。本文拆解模式声明、参数提取、baseURL、查询字符串和兼容边界。443 收藏 -
SVG marker 端点图形沿路径方向旋转，关键是 orient=auto；双向连线使用 auto-start-reverse，再用 refX/refY 和 markerUnits 校准锚点与缩放。443 收藏 -
TypeScript NoInfer 用于拆分泛型推断与参数约束，本文通过数组、默认值和配置对象示例说明如何保持调用方的显式类型选择，并列出版本与回归边界。443 收藏 -
Web Worker 不能直接操作页面 DOM，正确做法是让 Worker 计算数据，再用 postMessage 回传，由主线程统一更新页面。443 收藏 -
普通 CSS 自定义属性更像字符串，直接参与渐变时常常只能跳变。本文用 @property 注册颜色属性，说明 syntax、inherits、initial-value 的配合方式，并通过渐变、无障碍和旧浏览器降级检查完成验收。443 收藏 -
JSON.rawJSON 可以把经过校验的原始 JSON 原子值交给 JSON.stringify，适合保留超大整数的数字文本；本文同时说明合法性、字符串语义和兼容性边界。442 收藏 -
Service Worker 更新后仍返回旧页面，通常与旧 worker、旧 Cache API 条目和页面 controller 未切换有关。本文用版本化缓存名、activate 清理、skipWaiting 与 clients.claim 拆解排查和修复策略。442 收藏 -
用 CSS field-sizing: content 让文本输入框按内容收缩和增长，同时用 min-width、max-width 与 fallback 控制窄屏布局和旧浏览器兼容。442 收藏 -
CSS scroll-state() 可以把可滚动、最近滚动方向、滚动吸附和 sticky 卡住状态交给容器查询判断。本文说明从 JavaScript 滚动监听迁移到 container-type: scroll-state 与 @container 的最小写法、四类描述符、结构前提和渐进增强边界。441 收藏 -
用 View Transitions API 给列表新增、删除和筛选加上稳定的视图过渡，同时保留不支持浏览器和减少动态效果用户的可用回退。441 收藏 -
批量导入 CSV 时，解析、校验和结果展示最好拆成可观测的前端流水线：主线程只负责触发与通知，Web Worker 分片处理数据，队列状态和失败原因由明确的质量门禁收口。441 收藏 -
CSS @starting-style 用来为首次显示或从 display:none 变为可见的元素提供过渡起始值。本文以原生 dialog 为例，拆解默认态、进入态、display 离散过渡和兼容降级，让弹窗既能淡入也能完整淡出。440 收藏 -
WebTransport 的双向流和 Datagram 都能承载实时数据，但可靠性、顺序性和消息边界完全不同。本文用一个实时面板的取舍场景说明两者适合什么数据，并给出可靠流的 framing 写法与兼容检查清单。440 收藏 -
从首屏内容、渐进增强、脚本时序和兼容降级四个约束出发，比较 Declarative Shadow DOM 与客户端 attachShadow 的职责边界，并给出可复用的 Web Component 初始化写法。440 收藏 -
CSS Style Container Query 可以读取父级自定义属性，让组件后代按密度、主题或布局状态切换样式。本文说明 style() 的无值与带值查询、@property 类型化比较，以及继承和浏览器支持造成的不生效问题。440 收藏