前端技术文章
-
用两层 mask 和 mask-composite: exclude 做出渐变镂空边框，拆清遮罩层、组合关系、尺寸位置与圆角对齐，解决边框变实心或内容被裁掉的问题。253 收藏 -
通过跨三行的卡片与行 subgrid，共享父级标题、说明和操作轨道；给出完整 HTML/CSS 配方、普通网格降级规则，以及换行、间距与新增字段的处理边界。253 收藏 -
CSS :has() 可以根据子元素或后续兄弟的状态设置父级样式，但要同时处理浏览器回退、特异性和 DOM 检查范围。本文用表单卡片场景给出可直接采用的写法。252 收藏 -
CSS overflow: clip 可以裁剪溢出内容且不创建滚动容器，适合阴影、徽标等非交互装饰；按钮、链接和输入框要谨慎，本文对比 clip 与 hidden 的滚动、聚焦和 overflow-clip-margin 边界。252 收藏 -
SVG markerUnits 决定 markerWidth、markerHeight 和标记内容使用哪套坐标系。本文比较 strokeWidth 与 userSpaceOnUse，说明它们如何影响箭头随 stroke-width 缩放，并给出 viewBox、refX、refY 的组合排查方法。252 收藏 -
用浏览器目录句柄完成选择与读写权限复查，配合安全上下文、用户手势和传统上传降级完成前端文件工作流。251 收藏 -
CSS 容器查询从尺寸条件扩展到 style() 条件后，迁移重点不只是替换语法，还要检查容器类型、继承来源、浏览器支持和响应式回归。251 收藏 -
Service Worker 更新后仍读到旧文件，通常不是浏览器拒绝更新，而是新 worker 还在 waiting、页面仍由旧 controller 控制，或 fetch 代码继续命中旧的 Cache Storage。本文用版本化缓存、activate 清理和可控接管方式排查这个边界。251 收藏 -
scroll-timeline 可以把滚动容器从起点到终点的位置映射为关键帧进度。本文用阅读进度条给出最小配方，解释命名时间轴、scroll() 变体、常见失效原因与渐进增强写法。251 收藏 -
说明IntersectionObserver按列表卡片可见面积比例加载内容的实现，区分threshold与rootMargin，并处理去重、降级和卸载后的异步清理。251 收藏 -
用 Uint8Array.fromBase64 把 Base64 文本直接解码为字节数组，覆盖 base64url、尾块处理、异常分支和旧浏览器降级。251 收藏 -
通过 Web Worker 的 postMessage 和 Transferable 转移 ArrayBuffer，掌握所有权交接、detached 状态、TypedArray 视图与常见排查边界。249 收藏 -
HTML popover 能把轻量浮层放进浏览器顶层，并原生处理外部点击和 Escape 关闭。本文用账户操作面板说明声明式写法、三种状态选择和脚本控制边界。249 收藏 -
AbortController 取消 fetch 后，Response 可能已经拿到但响应体还没读完，继续调用 text 或 json 就会抛出 AbortError。本文给出取消判断、单次消费响应体、区分网络失败与请求竞态的实用写法。248 收藏 -
读取 ArrayBuffer 的多字节字段时，DataView 的 offset、字段宽度和 littleEndian 参数必须与协议约定一致。本文用一个字节序读错的故障现场，说明如何定位、修复并封装 Uint16/Uint32 的读取规则。248 收藏