前端技术文章
-
用 CSS prefers-reduced-motion 响应用户的减少动效偏好，在 reduce 状态关闭非必要 animation、transition 与平滑滚动，同时保留必要的状态反馈，并说明规则不生效时的排查边界。211 收藏 -
用 CSS :has() 根据子元素的 invalid、checked 或兄弟关系选择父元素，掌握直接子代、兼容降级、特异性与性能边界。446 收藏 -
用 aspect-ratio 固定媒体卡片的宽高关系，再配合 object-fit 处理不同来源图片，让网格列宽变化、图片加载和长标题都不会破坏卡片比例。498 收藏 -
通过跨三行的卡片与行 subgrid，共享父级标题、说明和操作轨道；给出完整 HTML/CSS 配方、普通网格降级规则，以及换行、间距与新增字段的处理边界。253 收藏 -
animation-composition 用 replace、add、accumulate 决定关键帧效果怎样和元素原有值合成。本文用 transform 和多动画声明说明三种语义、顺序映射、简写重置与降级边界。221 收藏 -
Vite 的 import.meta.glob 可以根据文件模式批量生成模块映射。本文从默认懒加载开始，说明 eager、命名导入、多模式排除、query 资源加载和字面量参数边界。157 收藏 -
解释localStorage只保存字符串的原因，通过JSON编码、版本字段和受控字段恢复对象，区分键缺失、损坏、访问与写入失败，并提供单键重置方案。283 收藏 -
用 CSS line-clamp 把卡片摘要限制在固定行数：解释 overflow 裁剪、标准写法、旧版 -webkit-line-clamp 兼容组合，以及响应式宽度下的常见边界。352 收藏 -
用 IntersectionObserver 为长列表图片实现进入视口再加载：从 data-src 占位、rootMargin 预加载，到回调清理、停止观察和兼容边界，给出可直接改造的 JavaScript 写法。139 收藏 -
通过postMessage转移列表减少Web Worker中ArrayBuffer的往返复制，给出双文件示例，解释发送端分离、共享视图、子数组与失败重试时的数据所有权。218 收藏 -
使用 Fetch 的 Response.body 逐块读取文本时，应先判断状态和 body，再通过 getReader 获取字节块，用带 stream 选项的 TextDecoder 保留跨块字符，并处理取消、异常与 reader 锁释放。492 收藏 -
display 从 none 切换到可见值时通常会瞬间出现，transition-behavior: allow-discrete 可以让 display 参与离散过渡，再配合 opacity、@starting-style 和渐进增强规则完成可控的显示与隐藏效果。366 收藏 -
用 AbortSignal.timeout 给 fetch 设置自动取消时间，再用 AbortSignal.any 合并用户取消；本文还区分 TimeoutError、AbortError、网络错误与 HTTP 错误，并说明活动时间、界面状态和兼容性边界。273 收藏 -
CSS text-spacing-trim 专门处理中日韩标点的内部空隙与行首行尾间距。本文用四个值对比常见场景，说明字体 OpenType 条件、渐进增强写法和兼容性边界。406 收藏 -
CSS scroll-snap 的关键是让滚动容器声明吸附轴和严格程度，再让每张卡片声明对齐边缘。本文从最小横向列表开始，说明 scroll-snap-type、scroll-snap-align、scroll-padding 和 scroll-margin 的分工，以及 mandatory、proximity 和降级处理的选择。471 收藏