前端技术文章
-
用 adoptedStyleSheets 把同一份构造样式表复用到多个 ShadowRoot，重点核对 CSSStyleSheet 构造时机、跨文档限制、动态更新与不支持浏览器的 style 回退。307 收藏 -
Popover API 的弹层如果只给 :popover-open 写过渡，首次打开和关闭时常会出现闪现或瞬间消失。本文从最小示例出发，说明 @starting-style、transition-behavior、overlay 与 reduced motion 的配合边界。307 收藏 -
前端使用 ReadableStream 逐块读取 fetch 响应时，停止按钮应通过 AbortController 取消底层请求，并在 reader、TextDecoder 和异常收尾之间划清边界。306 收藏 -
用 View Transitions API 把列表卡片与详情页的关键元素连接起来，掌握 view-transition-name 的唯一性、路由更新封装、能力回退和减少动效处理。305 收藏 -
用 Fetch 读取 Response.body 的 ReadableStream，按块更新页面，并处理 UTF-8 中文跨块、HTTP 异常、空 body 和取消读取。304 收藏 -
fetch 收到 404 时，Promise 通常仍会 resolve，因为服务器已经返回了 HTTP 响应。本文用 Response.ok、Response.status 和主动抛错讲清 catch 的正确使用边界。299 收藏 -
React useMemo 依赖数组中的对象每次渲染都重新创建时，即使字段不变也会重复计算。本文用引用相等、原始依赖和 useEffect 场景说明正确处理方式。297 收藏 -
拖拽排序松手后顺序回跳，通常不是 CSS 问题，而是指针位置、占位元素和最终数组没有在同一个时序里更新。本文用 Pointer Events、占位节点和单一提交点拆解竞态，并给出可复核的实现与验收方法。296 收藏 -
CSS @function 可以把带参数的样式逻辑收进原生 CSS。本文用 result 覆盖规则、参数与局部变量作用域、类型约束和 @supports 降级，判断它是否适合进入前端项目。296 收藏 -
TypeScript satisfies 用于校验对象是否符合类型契约并保留精确推断，类型断言则表达调用者已掌握的额外事实，二者在配置对象、DOM 和外部数据边界上的用法不同。293 收藏 -
文章 · 前端 | 3星期前 | 前端 · javascript · css · 浏览器API · Element.checkVisibility visibilityProperty opacityProperty contentVisibilityAuto 前端可见性
Element.checkVisibility() 能判断元素是否有布局盒、是否被 display:none 或 content-visibility:hidden 跳过渲染；通过 opacityProperty、visibilityProperty 和 contentVisibilityAuto 可以收紧判断，但 true 仍不等于元素真的出现在视口中。292 收藏 -
用 TypeScript 区分联合建模请求状态，让 loading、success、error 的字段访问安全，并用 never 检查新增状态是否遗漏。292 收藏 -
CSS container query 不生效时，先确认父元素设置了 container-type，再检查查询命中的容器、宽度条件和浏览器支持；文中给出卡片布局的最小写法与降级方案。291 收藏 -
Fetch API 适合现代上传请求，但标准接口目前没有通用的上传进度事件。本文用一个可回退的前端上传流程，说明何时选择 XMLHttpRequest、如何显示进度，以及取消、失败和重复提交怎么验收。290 收藏 -
Web Animations API 适合控制可暂停、可反向和可取消的交互动画。本文用一个可复用的面板动画说明 currentTime、playbackRate、reverse() 与 cancel() 的边界，并给出状态核对和降级写法。290 收藏