前端技术文章
-
CSS @function 可以把带参数的样式逻辑收进原生 CSS。本文用 result 覆盖规则、参数与局部变量作用域、类型约束和 @supports 降级，判断它是否适合进入前端项目。296 收藏 -
文章 · 前端 | 6小时前 | 前端 · javascript · 滚动容器 · 用户体验 · 浏览器 API · JavaScript scrollIntoView container: nearest 嵌套滚动容器 前端滚动
嵌套面板里定位表单错误、消息或搜索结果时，默认 scrollIntoView 可能把整页一起滚走。本文拆解 container: nearest 的作用范围、兼容回退和验收写法，帮助前端保留用户当前的页面上下文。447 收藏 -
Navigation API 已在 2026 年进入 Baseline。本文用最小路由示例讲清 navigate 统一拦截、同源边界、加载失败与 History API 渐进回退。183 收藏 -
TypeScript 7 的原生编译器会并行执行解析、类型检查和输出，但提高 checkers、builders 也会增加 CPU 与内存压力。本文说明三个并行开关的关系，并给出适合本地开发和 CI 的渐进测量方法。386 收藏 -
CSS Anchor Positioning 可以让悬浮提示跟随锚点定位，并在空间不足时尝试备用位置。本文用一个按钮与提示框的静态关系，拆清 anchor-name、position-anchor、position-try 的职责和兼容回退。389 收藏 -
文章 · 前端 | 1天前 | 浏览器 · javascript · 前端性能 · Web API · 响应式设计 · JavaScript 响应式布局 ResizeObserver contentRect disconnect
ResizeObserver 能监听元素尺寸变化，但在回调里直接改写被观察元素，很容易形成反复触发。本文用 contentRect、宽度阈值和 disconnect 拆开这类死循环的边界，给出可审查的组件写法与发布前检查清单。257 收藏 -
用一个可重复运行的列表切换示例，验证 View Transitions 并发导航、skipTransition、finished 和失败回滚的边界。327 收藏 -
用同一个可运行的卡片示例演示 CSS container-type 与 @container，解决组件嵌入不同父容器后布局失控的问题。266 收藏 -
用一个可运行的 HTML dialog 示例验证 closedby 的 none、closerequest、any 三种关闭边界，并记录 close 事件、returnValue 与旧浏览器降级策略。479 收藏 -
用一个可运行的 CSS 示例解释 backdrop-filter 的透明背景、滤镜叠加和 backdrop root 边界，并给出兼容回退检查。496 收藏 -
文章 · 前端 | 1天前 | 布局 · css · 前端开发 · 浏览器特性 · anchor-name position-try-fallbacks CSS anchor positioning position-anchor 前端浮层
用一个可移动的菜单按钮和提示浮层，验证 CSS anchor positioning 如何通过 anchor-name 建立锚点、position-anchor 连接目标，并用 position-try-fallbacks 在空间不足时切换位置。454 收藏 -
原生 Drag and Drop API 只解决了鼠标拖动，键盘用户仍需要一条明确的选择、移动、确认路径。用按钮化抓手、aria-live 状态和统一提交函数，可以让拖拽排序、方向键移动、焦点恢复与服务端校验共用一套状态模型。383 收藏 -
用 ResizeObserver 监听响应式卡片宽度时，先读取 borderBoxSize，再用 requestAnimationFrame 合并同一帧更新，避免回调里反复改布局造成循环告警。487 收藏 -
Promise.withResolvers() 把 promise、resolve、reject 放到同一作用域，适合事件回调和外部控制场景。本文从旧构造器写法迁移，说明异常收口、一次性结算与兼容回退。412 收藏 -
实现模态层时，inert 负责让背景区域真正停止交互，dialog 与 aria-modal 负责表达语义，关闭时再把焦点还给触发按钮，避免键盘用户迷路。430 收藏