前端技术文章
-
CSS Anchor Positioning 可以让悬浮提示跟随锚点定位，并在空间不足时尝试备用位置。本文用一个按钮与提示框的静态关系，拆清 anchor-name、position-anchor、position-try 的职责和兼容回退。389 收藏 -
文章 · 前端 | 20小时前 | 浏览器 · 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 收藏 -
用原生 Popover API 做一个可点击外部关闭的帮助菜单，说明 popover=auto、beforetoggle 与 toggle 的职责差异，并用键盘焦点和 Esc 关闭行为完成验收。256 收藏 -
用 CSSStyleSheet 构造共享样式，通过 adoptedStyleSheets 挂载到多个 ShadowRoot，并验证 replaceSync 更新、文档归属与兼容边界。365 收藏 -
文章 · 前端 | 1天前 | 前端 · javascript · web components · 组件化 · 自定义元素 Web Components Custom Elements customElements.define connectedCallback
自定义元素已经出现在 HTML 中时，脚本晚到仍可通过 customElements.define 完成升级；真正容易出问题的是重复注册、connectedCallback 多次触发和元素尚未连接时的初始化。本文用 price-badge 示例拆开升级时机、生命周期和可回退的注册写法。104 收藏 -
长段落最后只剩几个字时，CSS text-wrap-style: pretty 可以让浏览器优先减少孤行，但它比普通换行更耗计算。本文从标题、正文和 contenteditable 三种场景拆开 pretty 与 balance 的边界，并给出兼容写法与检查方法。309 收藏