前端技术文章
-
CSS scroll-snap 的关键是让滚动容器声明吸附轴和严格程度，再让每张卡片声明对齐边缘。本文从最小横向列表开始，说明 scroll-snap-type、scroll-snap-align、scroll-padding 和 scroll-margin 的分工，以及 mandatory、proximity 和降级处理的选择。471 收藏 -
通过container-type和命名容器查询，让同一组件在宽主栏与窄侧栏分别响应，提供HTML和CSS示例，并说明尺寸来源、自身查询限制、默认布局与排错要点。148 收藏 -
文章 · 前端 | 3天前 | 前端 · javascript · 浏览器API · AbortController AbortSignal JavaScript异步任务 scheduler.postTask
scheduler.postTask 可以通过AbortSignal取消尚未执行的任务，但abort不会回溯终止已经进入回调的JavaScript。本文用最小示例说明signal接入、Promise错误处理、协作式停止和兼容性边界。304 收藏 -
CSSNumericValue 可以把带单位的 CSS 数值统一到可判断、可转换的对象模型中。本文从 CSSUnitValue 出发，讲清 type()、to() 的使用边界、异常处理以及旧浏览器回退策略。234 收藏 -
区分 View Transitions 快照与业务状态，用原创同页切换示例保留草稿、控制重复提交，并解释 ready、updateCallbackDone、finished 和降级处理。100 收藏 -
Transferable objects 可以把 ArrayBuffer 的所有权交给 Worker 或结构化克隆结果，避免不必要的复制。本文用最小 JavaScript 片段说明 transfer list、TypedArray 视图、detached 状态和 SharedArrayBuffer 的边界。476 收藏 -
PerformanceObserver 创建得较晚时，使用 type 与 buffered: true 可以回放指定类型的已有性能条目。本文讲清首次回调、entryTypes 冲突、支持性检查和缓冲丢失边界。356 收藏 -
用 AbortSignal.timeout 给 fetch 请求设置固定时限，并区分 TimeoutError、AbortError、HTTP 错误和网络错误；同时说明 AbortSignal.any 的组合方式与兼容边界。401 收藏 -
TransformStream 可以把 fetch 返回的流式响应接入一条可读、可写的转换管道。本文用文本响应示例说明 pipeThrough、transform、flush、背压、错误和取消的实际边界。361 收藏 -
@scope 可以把选择器限制在指定 DOM 子树中。本文从 scope root、scope limit、:scope 和 scoping proximity 讲清范围边界，并比较它与普通后代选择器、低特异性写法的取舍。245 收藏 -
CSS color-mix() 可以按比例混合两个或多个颜色，并指定 oklab、oklch、srgb 等颜色空间。本文从主题色派生出发，拆解百分比归一化、透明度边界、颜色空间选择和组件令牌组织方式。120 收藏 -
CSS position-area 用锚点周围的 3×3 区域放置绝对定位浮层。本文从 anchor-name 和 position-anchor 的绑定开始，比较物理值、逻辑值、span 值与 anchor() 的边界，并给出菜单、提示框等场景的可迁移写法。282 收藏 -
view-timeline-axis 决定视图进度时间线沿哪个滚动轴推进。本文区分 block、inline、x、y 的适用场景，说明 subject、滚动容器和溢出条件，并给出不支持时的渐进增强写法。284 收藏 -
调用 scrollTo 后没有触发 scrollend，通常不是事件失效，而是目标滚动位置没有发生变化，或监听了错误的滚动对象。本文拆开 Document、Element、smooth 滚动和程序化收尾的边界，给出可直接改造的 JavaScript 写法。480 收藏 -
用 CSS progress() 把容器宽度映射成 0 到 1 的比例，再驱动进度条宽度和颜色渐变，说明夹取、no-clamp 与单位匹配边界。214 收藏