-
content-visibility: auto 能跳过屏外内容，但占位尺寸估计不当会让滚动时页面跳动。本文用 contain-intrinsic-size 给卡片提供接近真实高度的布局尺寸，并说明 auto 记忆值、网格场景和降级边界。
-
用 CSS Anchor Positioning 的 anchor-name、position-anchor 和 anchor-size() 让弹出层宽度跟随触发按钮，并通过回退值、@supports 和检查清单处理锚点缺失、定位方式与浏览器兼容边界。
-
SVG 图形想要等比填满容器，关键是同时设置合理的 viewBox 和 preserveAspectRatio：meet 保留完整图形，slice 铺满但可能裁切，none 才会允许非等比拉伸。本文按留白、裁切、变形和对齐问题给出可直接套用的写法。
-
用 CSS animation-timeline 和 scroll() 把滚动容器进度映射到阅读进度条，说明 scroller、滚动轴、关键帧、降级方案和不生效排查顺序。
-
用 CSS anchor positioning 将提示框绑定到按钮，说明 anchor-name、position-anchor、position-area 的组合方式，以及浏览器回退、边界翻转和重复组件的处理方法。
-
JavaScript Range.comparePoint 返回 -1、0、1，用来判断节点加 offset 组成的坐标点位于选区之前、范围内部还是之后。本文同时比较 isPointInRange 与 compareBoundaryPoints 的适用边界。
-
用一个 SVG clipPath 组合圆形、矩形和路径等多个裁剪形状，再通过 clip-path 让目标分组共享显示范围；同时解释 userSpaceOnUse、objectBoundingBox、固有几何边界和 pointer-events 的关系。
-
SVG pattern 默认用 objectBoundingBox 解释平铺单元的 x、y、width、height，图形尺寸变化时图案也会跟着缩放。本文用 userSpaceOnUse 固定重复图案大小，并区分 patternContentUnits、viewBox 与 patternTransform 的作用。
-
SVG 的 preserveAspectRatio 用 meet 保留完整 viewBox 并允许留白，用 slice 铺满 viewport 并允许裁切；再结合 xMin、xMid、xMax 与 Y 方向对齐关键字控制结果位置。
-
TextMetrics.width 表示文本的行内推进宽度，而 actualBoundingBoxLeft 与 actualBoundingBoxRight 描述相对于 Canvas 对齐点的可见字形边界。本文用公式和原创 Canvas 示例说明两者的区别及选用场景。
-
用 border-radius 先建立圆角区域，再通过 CSS corner-shape 绘制 notch、bevel、scoop 等卡片边角，并用 @supports 保留旧浏览器的圆角降级。
-
WebTransport datagrams 适合传递可丢失、可乱序但追求时延的实时状态。本文从连接、发送、接收、序号过滤和背压边界出发，给出浏览器端的最小实现与通道选型清单。
-
Canvas 文字布局不能只看 TextMetrics.width。本文从 measureText() 返回值出发，说明 actualBoundingBoxLeft、Right、Ascent 和 Descent 如何换算真实可见矩形，并给出居中、裁剪和斜体外伸时的处理边界。
-
field-sizing: content 能让表单控件按内容收缩和增长，但旧浏览器不一定支持。本文用 @supports 做渐进增强，再比较固定尺寸、伪元素镜像和 JavaScript 测量三种降级方案，给出输入框不缩小、不溢出且便于维护的选择方法。
-
CSS anchor-size() 可以把锚定浮层的宽高、位置或边距表达为锚点元素的尺寸。本文用菜单浮层说明默认锚点、逻辑轴、calc() 和缺少锚点时的回退边界。
