前端技术文章
-
用一个可渐进落地的组件案例说明 CSS @scope 迁移：确定根节点与下边界、保留旧规则回退、处理层叠邻近度与继承，并按浏览器支持范围清理历史选择器。294 收藏 -
TypeScript satisfies 用于校验对象是否符合类型契约并保留精确推断，类型断言则表达调用者已掌握的额外事实，二者在配置对象、DOM 和外部数据边界上的用法不同。293 收藏 -
field-sizing: content 能让表单控件按内容收缩和增长，但旧浏览器不一定支持。本文用 @supports 做渐进增强，再比较固定尺寸、伪元素镜像和 JavaScript 测量三种降级方案，给出输入框不缩小、不溢出且便于维护的选择方法。293 收藏 -
文章 · 前端 | 2个月前 | 前端 · 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 收藏 -
区分 using、await using 与异步获取资源，使用 AsyncDisposable 适配器解释作用域释放、逆序清理、双重异常和 TypeScript 编译与运行时条件。292 收藏 -
SPA 同时处理链接点击、后退和表单跳转时，History API 很容易漏掉边界。用 Navigation API 统一接管导航事件，再配合失败恢复和兼容回退，可以把加载、滚动、焦点和错误状态收进一条可验收的流程。291 收藏 -
CSS container query 不生效时，先确认父元素设置了 container-type，再检查查询命中的容器、宽度条件和浏览器支持；文中给出卡片布局的最小写法与降级方案。291 收藏 -
讲清 Fetch keepalive 在页面隐藏、跳转或关闭前发送小请求的写法、64 KiB 限制、幂等设计，以及与 sendBeacon 的选择边界。291 收藏 -
Fetch API 适合现代上传请求，但标准接口目前没有通用的上传进度事件。本文用一个可回退的前端上传流程，说明何时选择 XMLHttpRequest、如何显示进度，以及取消、失败和重复提交怎么验收。290 收藏 -
Web Animations API 适合控制可暂停、可反向和可取消的交互动画。本文用一个可复用的面板动画说明 currentTime、playbackRate、reverse() 与 cancel() 的边界，并给出状态核对和降级写法。290 收藏 -
中文摘要不能只按字符串下标截断，否则容易把词和表情拆开。本文用 Intl.Segmenter 的 word 粒度处理中文边界，再用 isWordLike 和 supportedLocalesOf 设计多语言回退。290 收藏 -
文章 · 前端 | 1个月前 | 前端 · 性能 · javascript · 浏览器API · ArrayBuffer postMessage Web Worker structured clone transfer list
Web Worker 的 postMessage 默认使用 structured clone，接收端拿到的是独立副本。本文解释对象复制、ArrayBuffer 转移、transfer list 和生命周期边界，帮助前端开发者判断什么时候复制、什么时候交接所有权。290 收藏 -
document.fonts.check() 返回 true 只表示当前字体规格可以避免使用未加载字体完成渲染，不等于指定字体文件已经下载。本文用 document.fonts.load、FontFace.status 和真实字符样本拆解误判原因与排查方案。290 收藏 -
本文用一张可复用内容卡片讲清 CSS Container Query：声明具名容器、按容器宽度切换布局，并处理容器单位、可访问性与降级边界。289 收藏