前端技术文章
-
用 Iterator.prototype.drop 惰性跳过迭代器开头的 N 个元素，说明首次 next 才消费数据、参数边界、链式组合和旧运行时降级方式。456 收藏 -
说明 JavaScript Iterator.from 如何统一数组、集合与自定义同步游标，区分类数组适配，结合任务编号示例解释单次消费、关闭职责与运行时兼容处理。396 收藏 -
同文档状态切换时，把 DOM 更新交给 document.startViewTransition()，再用唯一的 view-transition-name 拆分元素动画；本文给出最小写法、过渡伪元素、兼容降级和减少动效处理。494 收藏 -
文章 · 前端 | 2天前 | 兼容性 · CSS animation-timeline timeline-scope Scroll-driven Animations scroll-timeline-name
CSS timeline-scope 可以扩大命名滚动时间线的作用域，让不在同一滚动容器后代树中的动画元素引用同一个时间线。本文用一个小型结构说明默认边界、共同祖先配置、@supports 降级和匿名时间线的区别。112 收藏 -
用 CSS animation-timeline 和 scroll() 把滚动容器进度映射到阅读进度条，说明 scroller、滚动轴、关键帧、降级方案和不生效排查顺序。346 收藏 -
用 CSS Anchor Positioning 的 anchor-name、position-anchor 和 anchor-size() 让弹出层宽度跟随触发按钮，并通过回退值、@supports 和检查清单处理锚点缺失、定位方式与浏览器兼容边界。348 收藏 -
用原生 HTML details 的 name 属性实现互斥手风琴，说明同组规则、多个 open 的源码顺序、details[open] 样式和 toggle 事件的使用边界。129 收藏 -
field-sizing: content 能让表单控件按内容收缩和增长，但旧浏览器不一定支持。本文用 @supports 做渐进增强，再比较固定尺寸、伪元素镜像和 JavaScript 测量三种降级方案，给出输入框不缩小、不溢出且便于维护的选择方法。293 收藏 -
CSS ruby-align 用来控制 ruby 注音在基准文本上的分布方式。本文从手工调间距的旧写法迁移到 start、center、space-between 和 space-around，说明不同注音长度的选择、结构边界与不支持属性时的降级处理。124 收藏 -
自定义元素默认不会自动进入原生表单校验和提交流程。本文用 ElementInternals、setFormValue 和 setValidity 实现一个可提交、可校验的自定义表单控件，并说明 name、required 与空值处理边界。109 收藏 -
在 Service Worker 的 fetch 入口按 GET 与静态资源白名单过滤 Cache 读写，保留匹配条件，区分网络失败与存储失败，并解释 ignoreMethod 的适用边界。166 收藏 -
文章 · 前端 | 3天前 | javascript · css · range CSS Custom Highlight API Highlight CSS.highlights ::highlight()
CSS Custom Highlight API 可以用 Range 描述搜索命中位置，用 Highlight 聚合多个范围，再通过 CSS.highlights 和 ::highlight() 绘制高亮，不必向正文插入 span。本文说明节点索引、连续输入清理、能力检测和无障碍边界。118 收藏 -
CSS scroll-state() 可以把可滚动、最近滚动方向、滚动吸附和 sticky 卡住状态交给容器查询判断。本文说明从 JavaScript 滚动监听迁移到 container-type: scroll-state 与 @container 的最小写法、四类描述符、结构前提和渐进增强边界。441 收藏 -
Promise.allSettled 会按输入顺序返回每个任务的 settled 结果。本文用任务描述数组和同索引合并方式保留 key、label、status、value 或 reason，并说明它与 Promise.all 的边界。410 收藏 -
CSS grid lanes 怎样实现不等高卡片的紧凑布局？本文用 display:grid-lanes 和 grid-template-columns 说明原生紧凑排列的工作边界，再用 @supports 保留普通 Grid 回退，补充 DOM 顺序、跨度和实验能力的取舍。486 收藏