前端技术文章
-
用同一个可运行的卡片示例演示 CSS container-type 与 @container，解决组件嵌入不同父容器后布局失控的问题。266 收藏 -
CSS zoom 会参与布局计算，适合让局部内容按比例放大或缩小；transform: scale() 只改变绘制结果。本文用卡片面板说明两者差异、响应式边界与降级验收。263 收藏 -
禁用提交按钮的时机不当会干扰浏览器原生表单提交流程，尤其在 Chromium 内核浏览器及移动端 Firefox 中易引发挂起；正确做法是在 submit 事件中禁用按钮，而非 click 事件。 禁用提交按钮的时机不当会干扰浏览器原生表单提交流程，尤其在 Chromium 内核浏览器及移动端 Fi261 收藏 -
从长列表全量 DOM 的主线程等待链讲起，说明虚拟列表如何通过可见窗口、节点复用和占位高度降低 Layout/Paint 压力，并给出最小实现与上线检查。260 收藏 -
搜索框快速输入时，慢请求可能晚于新请求返回，旧结果就会覆盖当前关键词。本文用请求序号、AbortController 和有限并发预算拆解竞态边界，并给出取消、回收和键盘操作下的验收办法。260 收藏 -
本文介绍通过构建职位优先级映射表并结合 VLOOKUP 实现 Google Sheets 中按职位（如“President”“Manager”等）自定义顺序排序的方法，支持公式驱动、无需脚本即可动态响应职位变更。 本文介绍通过构建职位优先级映射表并结合 VLOOKUP 实现 Google Sheet257 收藏 -
本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，重点解决事件绑定、ID 冲突、重复渲染及双向同步（如勾选/取消勾选与 UI 显示联动）等常见问题。 本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，重点解决事件绑定、I257 收藏 -
文章 · 前端 | 3天前 | 浏览器 · javascript · 前端性能 · Web API · 响应式设计 · JavaScript 响应式布局 ResizeObserver contentRect disconnect
ResizeObserver 能监听元素尺寸变化，但在回调里直接改写被观察元素，很容易形成反复触发。本文用 contentRect、宽度阈值和 disconnect 拆开这类死循环的边界，给出可审查的组件写法与发布前检查清单。257 收藏 -
用原生 Popover API 做一个可点击外部关闭的帮助菜单，说明 popover=auto、beforetoggle 与 toggle 的职责差异，并用键盘焦点和 Esc 关闭行为完成验收。256 收藏 -
本文用完整工作流梳理前端表单重复提交治理：先做表单校验，再锁定按钮和请求状态，配合唯一 key 让后端识别重复请求，最后恢复状态并给出可复用清单。253 收藏 -
用浏览器目录句柄完成选择与读写权限复查，配合安全上下文、用户手势和传统上传降级完成前端文件工作流。251 收藏 -
CSS 容器查询从尺寸条件扩展到 style() 条件后，迁移重点不只是替换语法，还要检查容器类型、继承来源、浏览器支持和响应式回归。251 收藏 -
从 Vite 7 升级到 Vite 8 时，先核对浏览器目标和旧配置，再分别检查 Rolldown、Oxc 与 CommonJS 导入边界，最后用构建产物和关键页面完成回归。248 收藏 -
Vite 同一主版本的不同分支不一定获得相同维护。本文依据官方当前支持矩阵，说明 8.2、8.1、7.3、8.0 与 6.4 分支分别能获得哪些补丁，以及如何从 lockfile 确认实际版本并选择升级路径。247 收藏 -
文章 · 前端 | 1星期前 | 前端 · javascript · Fetch API · 异步请求 · Fetch AbortController 请求取消 abort(reason) AbortSignal.reason
fetch 请求被取消时，AbortController.abort(reason) 可以把用户主动切换、超时和页面离开区分开。本文用一个可运行的请求封装说明 reason 的传递、catch 判断和兼容边界。246 收藏