前端技术文章
-
弹窗锁定页面滚动时，经典滚动条消失会改变内容区宽度。本文用 scrollbar-gutter: stable 固定滚动条槽位，并说明嵌套滚动容器、both-edges 与旧环境 JavaScript 补偿的边界。223 收藏 -
Intl.ListFormat 可以按 locale、style 和 type 自动生成自然的并列文本。本文从普通 format 到 formatToParts，说明语言切换、逐项渲染和 formatter 复用应该怎样选择。412 收藏 -
用 Intl.Locale.getWeekInfo 读取地区的首日、周末日和最小周数规则，解决 Date.getDay 编号差异与旧浏览器兼容问题。342 收藏 -
Intl.DurationFormat 可将 hours、minutes、seconds 等时长字段格式化为指定语言的文本。本文给出样式选择、运行时检测与中文降级示例，并说明输入整数、零单位和本地化字符串的处理边界。401 收藏 -
JavaScript 的 getClientRects() 返回多个矩形，通常是因为元素是跨多行的行内元素，每一行都有自己的 CSS border box。本文说明 DOMRect 的视口坐标、滚动影响、空列表与零尺寸矩形的区别，并给出与 getBoundingClientRect() 的选择方法。330 收藏 -
CSS.registerProperty() 可以为自定义属性声明语法类型、继承策略和初始值，让颜色、长度等值更适合参与 CSS transition。本文用原创示例说明四个字段、动画接法、重复注册异常和兼容性降级。109 收藏 -
用 URL.canParse() 在创建 URL 前预检绝对地址和相对地址，区分 base 参数、布尔结果、构造器异常与兼容降级边界，并说明可解析不等于业务安全。246 收藏 -
文章 · 前端 | 1天前 | 前端 · javascript · JavaScript input textarea setRangeText selectionStart selectionEnd
setRangeText 替换 input 或 textarea 文本后，如何使用 preserve、select、start、end 控制选区，以及怎样区分当前选区与显式替换区间。313 收藏 -
用 append 构建同名文本和多文件字段，区分 set、getAll 与单值读取，说明 multipart 请求头、表单重复收集和接收端集合解析的处理方式。459 收藏 -
用 PerformanceObserver.supportedEntryTypes 探测浏览器支持的性能条目，按能力交集选择 entryTypes 或 type，并处理 buffered、durationThreshold 与不支持类型的降级边界。279 收藏 -
文章 · 前端 | 1天前 | 前端 · javascript · 浏览器API · JavaScript ResizeObserver ResizeObserverEntry contentBoxSize inlineSize blockSize
用 JavaScript ResizeObserver 读取 contentBoxSize 时，先从回调 entry 取数组第一项，再根据 writing-mode 读取 inlineSize 和 blockSize；同时给旧实现保留单对象与 contentRect 回退，避免尺寸读错或下标报错。427 收藏 -
Element.getHTML 默认只序列化元素内容；要把可序列化的 Shadow DOM 一起带出，需要在创建 ShadowRoot 时设置 serializable，并在调用时传入 serializableShadowRoots。本文用最小代码说明两者的边界。257 收藏 -
文章 · 前端 | 1天前 | 前端 · 流式处理 · javascript · JavaScript ReadableStream TransformStream pipeThrough Streams API
用 JavaScript TransformStream 把文本清理和前缀添加拆成两个可组合阶段，说明 readable、writable、pipeThrough、transform、flush 与 controller 的职责边界，并总结错误传播和输出处理的常见误区。402 收藏 -
checkVisibility 返回 true 只说明元素可能可见，不代表它在视口内或没有被遮挡。本文按布局盒、CSS 可见性、视口位置和命中测试四层排查这个前端问题。258 收藏 -
用 JavaScript URLPattern 声明带命名参数的路径，区分 test 与 exec 的用途，读取 pathname.groups，并处理正则约束、斜杠、主机和大小写边界。340 收藏