前端技术文章
-
CSS view-transition-name 用来把指定元素接入 View Transition 的独立快照。本文从状态更新、命名边界、伪元素动画和重复名称处理四个角度，给出一个可渐进增强的页面切换写法。263 收藏 -
JSON.rawJSON 可以把经过校验的原始 JSON 原子值交给 JSON.stringify，适合保留超大整数的数字文本；本文同时说明合法性、字符串语义和兼容性边界。442 收藏 -
CSS nesting 可以把组件的基础样式、子元素样式和状态样式放在同一规则中。本文用最小 CSS 示例说明默认后代关系、& 显式父选择器、组合器、媒体查询、特异性和扁平回滚写法。227 收藏 -
讲清 fetchpriority 的 high、low、auto 如何提示浏览器处理图片、脚本和 link 资源，并区分它与 preload、loading、defer 的职责边界。208 收藏 -
用 CSS color-mix() 从一个主题色生成按钮悬停、禁用和浅背景色，解释混合空间、比例、透明度与 @supports 回退，并给出可读性检查边界。366 收藏 -
文章 · 前端 | 1星期前 | 前端 · JSON · javascript · JavaScript vite json模块 ES module import attributes with type=json
原生浏览器和 Node ESM 加载 JSON 模块时，应使用 with { type: "json" } 并确认 MIME 类型；Vite 则由构建器处理 JSON 导入。本文按运行环境拆开语法、动态导入、缓存与常见故障边界。406 收藏 -
文章 · 前端 | 1星期前 | 前端 · 性能优化 · javascript · 浏览器API · IntersectionObserver rootMargin threshold Intersection Observer API unobserve 前端懒加载
IntersectionObserver 可以按目标与视口的交集比例触发加载；本文用 threshold、rootMargin 和共享 observer 解释可见性加载，并说明 unobserve 与 disconnect 的生命周期边界。182 收藏 -
文章 · 前端 | 1星期前 | 前端 · css · 浏览器兼容 · anchor-name position-area CSS anchor positioning position-anchor position-try 下拉菜单定位
CSS Anchor Positioning 可以把下拉菜单绑定到触发按钮，并用 position-try 声明上方或侧边回退位置；本文给出 anchor-name、position-anchor、position-area、anchor-scope 的组合写法与组件化检查清单。161 收藏 -
CSS overflow: clip 可以裁剪溢出内容且不创建滚动容器，适合阴影、徽标等非交互装饰；按钮、链接和输入框要谨慎，本文对比 clip 与 hidden 的滚动、聚焦和 overflow-clip-margin 边界。252 收藏 -
CSS @scope 可以用 scope root 限定组件样式的上边界，用 scope limit 截断嵌套区域，并通过 :scope 表达根节点关系。本文结合静态结构示意和原创 CSS 片段，说明选择器匹配、继承与兼容性边界。208 收藏 -
Web Locks 的 query() 不会抢锁或释放锁，只返回当前 origin 的状态快照。本文用 held、pending、name、mode 和 clientId 拆解查询结果，并给出安全上下文、异常处理和排障记录方法。284 收藏 -
Intl.Segmenter 可以根据 locale 和 granularity 按 grapheme、word 或 sentence 切分文本。本文用统一函数处理中文、日文和带空格语言，并说明 isWordLike、UTF-16 index、能力探测与保守回退。432 收藏 -
用 keyof 把对象键收束为字面量联合，再用 K extends keyof T 与 T[K] 绑定动态属性读取的输入和返回值；同时说明可选属性、运行时字符串和索引签名的边界。432 收藏 -
以嵌套对象和两个共用缓冲区的视图为例，说明 structuredClone 普通克隆与 transfer 的区别、转移列表去重及旧引用失效，并给出 DataCloneError 的排查方向。464 收藏 -
用 CSS light-dark() 配合 color-scheme 为页面建立浅色和深色主题，包含变量写法、兼容降级、手动切换和表单控件边界。379 收藏