-
WebSocket 客户端不应看到 close 事件就立即重连。本文结合 CloseEvent 的 code、reason、wasClean,把关闭原因分成停止重连、退避重连和先修复协议或权限三类,并给出带抖动退避的 JavaScript 分类器。
-
讲清 IntersectionObserver threshold 数组如何决定可见比例的通知粒度,结合代码解释 thresholds 排序、回调 entries、intersectionRatio、isIntersecting 以及密集阈值的边界。
-
围绕锚定面板靠近边缘后溢出的场景,讲解 CSS position-try-fallbacks、@position-try、翻转组合及候选顺序,并提供尺寸约束与普通文档流降级配置。
-
HTML dialog 的 cancel 是关闭请求,适合在 Esc 或 requestClose() 时拦截;close 是已经关闭后的通知,适合读取 returnValue、清理状态和同步外部界面。本文用事件路径和代码示例说明两者的边界。
-
URLPattern 可以把带参数的 pathname 写成可复用模式,再用 test() 判断路由是否命中、用 exec() 读取 pathname.groups 中的参数。本文拆解模式声明、参数提取、baseURL、查询字符串和兼容边界。
-
CSS field-sizing: content 可以让文本输入框按当前内容调整首选宽度,再配合 min-width、max-width 和 maxlength 控制伸缩边界。本文从固定宽度表单的症状出发,说明触发条件、最小写法、placeholder 与兼容性边界。
-
CSS @starting-style 用来为首次显示或从 display:none 变为可见的元素提供过渡起始值。本文以原生 dialog 为例,拆解默认态、进入态、display 离散过渡和兼容降级,让弹窗既能淡入也能完整淡出。
-
CSS 的 display 默认不能像 opacity 一样平滑过渡。本文用一个可关闭提示面板说明 transition-behavior: allow-discrete、display 过渡和 @starting-style 如何配合,并给出旧浏览器降级写法。
-
动态创建正则时,先用 RegExp.escape() 将搜索词、域名等外部字符串转成字面量,再拼接固定的正则语法。本文说明手写转义的误区、组合方式、兼容策略和输入边界。
-
content-visibility: auto 能跳过屏外内容,但占位尺寸估计不当会让滚动时页面跳动。本文用 contain-intrinsic-size 给卡片提供接近真实高度的布局尺寸,并说明 auto 记忆值、网格场景和降级边界。
-
CSS content-visibility: auto 可减少长列表屏外子树的布局与绘制工作。通过独立分组、占位尺寸和渐进增强示例,说明脚本测量、虚拟列表、分页及可访问性的适用边界。
-
CSS anchor-size() 可以把锚定浮层的宽高、位置或边距表达为锚点元素的尺寸。本文用菜单浮层说明默认锚点、逻辑轴、calc() 和缺少锚点时的回退边界。
-
SVG symbol 用于保存可复用图形模板,use 负责创建实例。本文用圆点和徽章示例说明 href、viewBox、x/y、width/height 与 preserveAspectRatio 的分工。
-
SVG 的 preserveAspectRatio 用 meet 保留完整 viewBox 并允许留白,用 slice 铺满 viewport 并允许裁切;再结合 xMin、xMid、xMax 与 Y 方向对齐关键字控制结果位置。
-
SVG 图形想要等比填满容器,关键是同时设置合理的 viewBox 和 preserveAspectRatio:meet 保留完整图形,slice 铺满但可能裁切,none 才会允许非等比拉伸。本文按留白、裁切、变形和对齐问题给出可直接套用的写法。