前端技术文章
-
CSS scroll-snap 的关键是让滚动容器声明吸附轴和严格程度，再让每张卡片声明对齐边缘。本文从最小横向列表开始，说明 scroll-snap-type、scroll-snap-align、scroll-padding 和 scroll-margin 的分工，以及 mandatory、proximity 和降级处理的选择。471 收藏 -
CSS @layer 覆盖不了组件样式，通常不是 specificity 不够，而是层的首次创建顺序、未分层样式或 !important 改变了级联比较。本文用最小示例给出固定层顺序和排查清单。471 收藏 -
Range.intersectsNode() 判断的是节点与 Range 是否有交集，不等于整个节点内容都被包含。本文从 DOM 边界点解释两者差异，并给出完整包含、文本命中和跨文档节点的选择方式。470 收藏 -
cqi 按查询容器的 inline-size 计算，cqb 按 block-size 计算；两者跟随逻辑轴而不是固定的 width、height。本文说明 container-type、writing-mode 和无合格容器时的回退边界。470 收藏 -
围绕锚定面板靠近边缘后溢出的场景，讲解 CSS position-try-fallbacks、@position-try、翻转组合及候选顺序，并提供尺寸约束与普通文档流降级配置。469 收藏 -
用 navigator.locks.query() 读取 Web Locks 的 held 与 pending 快照，理解 name、mode、clientId，并处理安全上下文和异常边界。467 收藏 -
WebSocket 断线重连最容易踩中旧连接复活：旧 socket 的 close 回调晚到，可能覆盖新连接状态。本文从 readyState、连接代次、指数退避和手动关闭四个边界出发，给出可验证的浏览器实现。467 收藏 -
Fetch 被取消后，不要只看统一的失败结果。AbortSignal.timeout 会给出 TimeoutError，AbortController 默认产生 AbortError，AbortSignal.any 会保留最先触发的 reason。本文给出可复用封装，并说明网络错误、兼容性、竞态和清理边界。466 收藏 -
CSS font-size-adjust 可以按 x-height、cap-height 或 CJK 字符度量调整字体使用字号，让首选字体不可用时的后备字体保持相近字高。本文说明固定比例、from-font、继承、size-adjust 与旧浏览器降级边界。465 收藏 -
用 PerformanceNavigationTiming 计算导航级 TTFB，区分 responseStart、requestStart 与最终响应时间，并处理 PerformanceObserver 的 buffered 场景。465 收藏 -
CSS subgrid 让多张嵌套卡片共享父网格的标题、正文和操作区轨道，解决内容长度不同导致的按钮错位，并补充 gap、隐式轨道与 flex 降级写法。465 收藏 -
AbortController 取消 fetch 并不等于已经停止 Promise 链。本文用一个组件卸载场景拆解 signal、catch 和状态门禁的关系，给出可复用的前端请求收口写法。465 收藏 -
CSS color-mix() 可以从基础主题色派生 hover、浅底和边框状态，但混合空间与透明度会改变最终观感。本文用 token、对比度和 fallback 验收一套可落地的主题色方案。465 收藏 -
以嵌套对象和两个共用缓冲区的视图为例，说明 structuredClone 普通克隆与 transfer 的区别、转移列表去重及旧引用失效，并给出 DataCloneError 的排查方向。464 收藏 -
用 CSS @layer 固定组件库、基础样式和业务覆盖的优先级，说明 vendor 与 overrides 的组织方式，以及未分层规则、!important 和内联样式的迁移边界。464 收藏