前端技术文章
-
CSS anchor-size() 可以把锚定浮层的宽高、位置或边距表达为锚点元素的尺寸。本文用菜单浮层说明默认锚点、逻辑轴、calc() 和缺少锚点时的回退边界。281 收藏 -
CSS content-visibility: auto 可减少长列表屏外子树的布局与绘制工作。通过独立分组、占位尺寸和渐进增强示例，说明脚本测量、虚拟列表、分页及可访问性的适用边界。281 收藏 -
从用户选择得到 FileSystemFileHandle 后，使用 createWritable 创建可写流，写入文本或 Blob 并正确 close，同时处理安全上下文、权限、取消和兼容性降级。260 收藏 -
用 Temporal 区分同一时刻换区、当地日历加日和实际时长，结合预约示例处理夏令时歧义，并说明接口存储与兼容层选择。228 收藏 -
用 FileSystemDirectoryHandle.values() 配合 for await...of 遍历文件与子目录，按 kind 分流，并处理权限和条目消失异常。219 收藏 -
模态框打开后，背景内容不应只是被遮罩，还应从焦点、点击、文本查找和辅助技术访问路径中退出。本文用 HTML inert 属性与 HTMLElement.inert 完成背景冻结，并说明 dialog.showModal、继承状态、disabled、aria-hidden 与视觉提示的边界。199 收藏 -
CSS 的 display 默认不能像 opacity 一样平滑过渡。本文用一个可关闭提示面板说明 transition-behavior: allow-discrete、display 过渡和 @starting-style 如何配合，并给出旧浏览器降级写法。181 收藏 -
文章 · 前端 | 20小时前 | javascript · 前端开发 · 浏览器API · JavaScript sort 浅拷贝 toSorted Array.prototype.toSorted 不可变排序
JavaScript Array.toSorted 怎样避免原数组被改写？本文对比 sort() 与 toSorted() 的修改边界，说明数字和对象排序的比较函数写法、浅拷贝限制，以及旧运行时使用 [...items].sort() 的安全降级。177 收藏 -
讲清 IntersectionObserver threshold 数组如何决定可见比例的通知粒度，结合代码解释 thresholds 排序、回调 entries、intersectionRatio、isIntersecting 以及密集阈值的边界。167 收藏 -
在 Service Worker 的 fetch 入口按 GET 与静态资源白名单过滤 Cache 读写，保留匹配条件，区分网络失败与存储失败，并解释 ignoreMethod 的适用边界。166 收藏 -
HTML dialog 的 cancel 是关闭请求，适合在 Esc 或 requestClose() 时拦截；close 是已经关闭后的通知，适合读取 returnValue、清理状态和同步外部界面。本文用事件路径和代码示例说明两者的边界。159 收藏 -
用 CSS shape() 和 clip-path 为卡片定义可伸缩裁剪路径，说明 from、line、curve、百分比、rem 与 calc() 的配合方式，并比较 shape() 和 path() 的适用边界。151 收藏 -
动态创建正则时，先用 RegExp.escape() 将搜索词、域名等外部字符串转成字面量，再拼接固定的正则语法。本文说明手写转义的误区、组合方式、兼容策略和输入边界。134 收藏 -
文章 · 前端 | 1天前 | javascript · 异步编程 · 前端开发 · JavaScript Promise Promise.withResolvers resolve reject 异步事件
Promise.withResolvers() 返回 promise、resolve 和 reject 三个控制点。本文从一次性外部事件与连续数据批次两个场景说明如何拆开 Promise 控制器、何时重新创建，以及生命周期和兼容性边界。126 收藏 -
CSS ruby-align 用来控制 ruby 注音在基准文本上的分布方式。本文从手工调间距的旧写法迁移到 start、center、space-between 和 space-around，说明不同注音长度的选择、结构边界与不支持属性时的降级处理。124 收藏