前端技术文章
-
TypeScript NoInfer 从 TypeScript 5.4 开始用于阻止次要参数参与泛型推导，本文用默认值、选项数组和配置工厂说明如何让主输入决定类型。255 收藏 -
TypeScript satisfies 不需要独立配置项。本文从版本与构建解析器开始，说明如何约束配置对象并保留具体推断，再用最小 tsc 检查定位常见报错。254 收藏 -
用 link rel=modulepreload 提前准备首屏真正需要的 ES 模块，结合依赖图、URL、crossorigin 与缓存匹配，减少依赖发现等待并避免重复请求。254 收藏 -
前端通过 File System Access API 保存 Blob 时，要在 HTTPS 和用户点击中调用 showSaveFilePicker，再用 createWritable 写入并关闭流；本文说明取消、降级、权限与并发写入边界。254 收藏 -
用两层 mask 和 mask-composite: exclude 做出渐变镂空边框，拆清遮罩层、组合关系、尺寸位置与圆角对齐，解决边框变实心或内容被裁掉的问题。253 收藏 -
通过跨三行的卡片与行 subgrid，共享父级标题、说明和操作轨道；给出完整 HTML/CSS 配方、普通网格降级规则，以及换行、间距与新增字段的处理边界。253 收藏 -
IndexedDB 的 openCursor(query, direction) 中，direction 决定按键升序还是降序遍历；key range 限定候选范围；nextunique 和 prevunique 只在索引重复键场景做按键去重。本文用一个实际读取函数把三者的关系讲清楚。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 收藏