前端技术文章
-
CSS field-sizing content 可配合 min-height 为文本域保留最小编辑空间，再用固定栏宽、最大高度和滚动规则控制增长。本文提供完整样式和不支持环境的降级方案。282 收藏 -
CSS anchor-size() 可以把锚定浮层的宽高、位置或边距表达为锚点元素的尺寸。本文用菜单浮层说明默认锚点、逻辑轴、calc() 和缺少锚点时的回退边界。281 收藏 -
CSS content-visibility: auto 可减少长列表屏外子树的布局与绘制工作。通过独立分组、占位尺寸和渐进增强示例，说明脚本测量、虚拟列表、分页及可访问性的适用边界。281 收藏 -
用 CSS aspect-ratio 为响应式卡片的媒体区域预留稳定宽高比例，结合 object-fit 和 img 的 auto 行为，减少图片加载前后的高度跳动，并定位比例不生效、图片变形和内容撑高等常见问题。281 收藏 -
Selection 的 anchor 是用户开始选择的位置，focus 是选择扩展到的位置；两者不一定符合文档顺序。本文用 Selection.direction 和 Range.compareBoundaryPoints() 识别反向选择，并处理空选区、跨文本节点与 selectionchange 监听。280 收藏 -
用 PerformanceObserver.supportedEntryTypes 探测浏览器支持的性能条目，按能力交集选择 entryTypes 或 type，并处理 buffered、durationThreshold 与不支持类型的降级边界。279 收藏 -
从 WebSocket close、readyState 和 CloseEvent 边界出发，给出带指数退避、随机抖动、重试上限和主动关闭保护的前端重连方案。278 收藏 -
用 CSS @container style 查询读取父容器的 --theme 自定义属性，让后代组件切换深浅主题；文章同时说明关键词匹配、数值范围语法、组合条件与兼容回退写法。278 收藏 -
SVG feGaussianBlur可用stdDeviation的两个数分别控制x轴和y轴模糊。本文说明单值与双值、零值、用户坐标单位和动态更新方法，并给出方向不符时的排查顺序。277 收藏 -
CSS ::scroll-button() 可以直接为横向滚动容器生成前后箭头。本文从生成条件、方向参数、可访问名称、焦点样式和自动 disabled 状态入手，给出兼容降级写法。277 收藏 -
ReadableStream.tee() 可以把一次 fetch 响应体分成两个独立分支，分别用于实时预览和缓存写入。本文说明分支读取、独立解码、双分支取消，以及慢消费者带来的内部队列和内存风险。274 收藏 -
用 AbortSignal.timeout 给 fetch 设置自动取消时间，再用 AbortSignal.any 合并用户取消；本文还区分 TimeoutError、AbortError、网络错误与 HTTP 错误，并说明活动时间、界面状态和兼容性边界。273 收藏 -
用文本偏移保存折叠光标，在保持文字顺序的 DOM 重建后映射到新文本节点，并说明 Range、Selection、异步渲染与复杂富文本的适用边界。273 收藏 -
在 Angular 服务类的方法里调用 takeUntilDestroyed 时，不能依赖当前注入上下文自动推断宿主。本文用最小 TypeScript 配方说明如何由组件注入 DestroyRef，再显式传给服务方法，并梳理服务作用域与重复订阅边界。272 收藏 -
CSS style query 可以读取祖先容器的自定义属性，让组件根据 --theme 等主题变量切换样式。本文从继承关系、style() 条件、动态切换、匹配语义和兼容性回退几个方面给出可直接改造的写法。270 收藏