前端技术文章
-
用 :focus-visible 区分键盘导航与鼠标点击下的焦点提示，保留键盘可达性，并通过 @supports 为旧浏览器提供有限回退。433 收藏 -
CSS hyphens:auto 不是只看 CSS 属性值，浏览器还要根据 HTML 的 lang 选择语言规则与词典。本文说明正确标注语言、处理混合文本、使用 manual 断点，以及排查断词不生效的方法。433 收藏 -
Cache API 的匹配不是简单的路径字符串比较。本文围绕 Cache.match() 说明 URL、请求方法、Vary 请求头和匹配选项怎样共同决定缓存条目，并给出带命中率记录的完整 Request 示例。432 收藏 -
用 keyof 把对象键收束为字面量联合，再用 K extends keyof T 与 T[K] 绑定动态属性读取的输入和返回值；同时说明可选属性、运行时字符串和索引签名的边界。432 收藏 -
Intl.Segmenter 可以根据 locale 和 granularity 按 grapheme、word 或 sentence 切分文本。本文用统一函数处理中文、日文和带空格语言，并说明 isWordLike、UTF-16 index、能力探测与保守回退。432 收藏 -
文章 · 前端 | 4星期前 | websocket · javascript · 异步编程 · JavaScript websocket AbortSignal 异步迭代器 Promise.withResolvers EventTarget
Promise.withResolvers 适合由外部事件决定完成时机的异步桥接：一次性 DOM 事件、带取消和超时的等待，以及将持续事件源改造成异步迭代器。本文给出监听器清理、解析器权限、消息队列、错误通道与兼容回退的生产写法。431 收藏 -
用Lit组件示例区分attribute命名、类型转换和property反射，说明camelCase默认映射、布尔attribute语义及对象属性入口，帮助组件作者为HTML和JavaScript调用方设计清晰接口。429 收藏 -
用 position-try-fallbacks 为 CSS 锚点浮层安排有优先级的回退候选，理解逗号与空格的区别，并处理双轴翻转和兼容降级。427 收藏 -
文章 · 前端 | 3天前 | 前端 · javascript · 浏览器API · JavaScript ResizeObserver ResizeObserverEntry contentBoxSize inlineSize blockSize
用 JavaScript ResizeObserver 读取 contentBoxSize 时，先从回调 entry 取数组第一项，再根据 writing-mode 读取 inlineSize 和 blockSize；同时给旧实现保留单对象与 contentRect 回退，避免尺寸读错或下标报错。427 收藏 -
IntersectionObserver 开启 trackVisibility 后，浏览器不只判断元素是否进入 root，还要判断遮挡、透明度、滤镜和变换等可见性条件。本文解释 delay 为什么必需、100 毫秒下限如何处理，以及它与普通防抖的区别。426 收藏 -
Lit 的 updateComplete 适合等待当前组件完成一次响应式更新，但默认不等待子组件。本文从事件派发、DOM 测量和测试三个场景说明使用方式，并比较 getUpdateComplete、requestAnimationFrame 与 ResizeObserver 的边界。425 收藏 -
区分 CSS Grid 轨道最小值与卡片内容溢出，比较固定列和自动换列的 minmax 写法，并用简明代码说明 min-width、长文本换行与代码块滚动的处理层级。422 收藏 -
Vite Environment API 用命名环境承载浏览器、Node 和 Edge 的差异。本文用配置示例说明顶层继承、optimizeDeps 边界和渐进迁移方法。418 收藏 -
AbortController 的 AbortSignal 是一次性信号，调用 abort 后不能恢复。本文用请求切换场景解释为什么复用旧控制器会让新请求立即取消，并给出每次请求新建控制器、取消旧请求和防止旧响应覆盖新结果的生产写法。418 收藏 -
滚动条从不出现变成出现时，经典滚动条会占用布局宽度。本文用 scrollbar-gutter 的 stable 与 stable both-edges 预留空间，并说明覆盖式滚动条、滚动容器边界和 @supports 降级策略。417 收藏