前端技术文章
-
用 CSS animation-timeline 和 scroll() 把滚动容器进度映射到阅读进度条，说明 scroller、滚动轴、关键帧、降级方案和不生效排查顺序。346 收藏 -
用 CSS anchor positioning 将提示框绑定到按钮，说明 anchor-name、position-anchor、position-area 的组合方式，以及浏览器回退、边界翻转和重复组件的处理方法。344 收藏 -
Vue defineModel 的 default 只作用于子组件的 model prop，父组件仍可能保持 undefined。本文说明如何通过父组件初始化避免不同步，如何为对象数组使用工厂函数，以及具名模型的默认值写法。343 收藏 -
ResizeObserver 循环通知通常来自回调修改了被观察尺寸。本文按读取、去重、帧合并和生命周期清理的顺序，给出切断布局反馈环的实用修复方式。342 收藏 -
用 Intl.Locale.getWeekInfo 读取地区的首日、周末日和最小周数规则，解决 Date.getDay 编号差异与旧浏览器兼容问题。342 收藏 -
JavaScript Range.comparePoint 返回 -1、0、1，用来判断节点加 offset 组成的坐标点位于选区之前、范围内部还是之后。本文同时比较 isPointInRange 与 compareBoundaryPoints 的适用边界。341 收藏 -
用 JavaScript URLPattern 声明带命名参数的路径，区分 test 与 exec 的用途，读取 pathname.groups，并处理正则约束、斜杠、主机和大小写边界。340 收藏 -
用一个 SVG clipPath 组合圆形、矩形和路径等多个裁剪形状，再通过 clip-path 让目标分组共享显示范围；同时解释 userSpaceOnUse、objectBoundingBox、固有几何边界和 pointer-events 的关系。337 收藏 -
用 localStorage 和 storage 事件同步同源标签页状态，解释发送页不触发事件、sessionStorage 范围、消息格式、清理和排查回滚边界。337 收藏 -
SVG pattern 默认用 objectBoundingBox 解释平铺单元的 x、y、width、height，图形尺寸变化时图案也会跟着缩放。本文用 userSpaceOnUse 固定重复图案大小，并区分 patternContentUnits、viewBox 与 patternTransform 的作用。336 收藏 -
SVG 的 preserveAspectRatio 用 meet 保留完整 viewBox 并允许留白，用 slice 铺满 viewport 并允许裁切；再结合 xMin、xMid、xMax 与 Y 方向对齐关键字控制结果位置。336 收藏 -
TextMetrics.width 表示文本的行内推进宽度，而 actualBoundingBoxLeft 与 actualBoundingBoxRight 描述相对于 Canvas 对齐点的可见字形边界。本文用公式和原创 Canvas 示例说明两者的区别及选用场景。335 收藏 -
文章 · 前端 | 8小时前 | javascript · 前端开发 · 浏览器API · @import Shadow DOM CSSStyleSheet replaceSync Constructable Stylesheets
CSSStyleSheet.replaceSync() 会移除传入文本中的外部 @import 规则并打印警告，因为构造样式表需要同步、可控的规则集合。本文解释这个边界，给出正确的 replaceSync 用法，并比较预先合并 CSS、独立样式资源和 replace() 的选择。333 收藏 -
WebSocket 断线重连需要单一调度入口、有上限的指数退避和随机抖动。本文以教学故障场景拆解重复重连成因，给出浏览器连接管理骨架，并说明稳定性重置、主动停止及消息恢复的边界。332 收藏 -
Astro 的 client:media 会把媒体查询作为组件水合条件：服务端先输出 HTML，浏览器只有在查询满足后才加载并执行组件 JavaScript。本文从移动端按钮无响应的现象出发，说明正确写法、直接导入约束和断点对齐方法。332 收藏