前端技术文章
-
用 container-type: inline-size 建立卡片查询容器，再通过 @container 和 container-name 按组件自身宽度切换单列与并排布局，覆盖嵌套容器、回退样式和验收边界。367 收藏 -
Alpine.js 修改响应式数据后如何等 DOM 更新？本文用回调式和 Promise 式 $nextTick 说明读取文本、测量尺寸、聚焦元素的正确时机，并划清请求完成与浏览器布局的边界。367 收藏 -
WebSocket 断线后，如果每个页面都立即重连，网络抖动会迅速变成重连风暴。本文从连接状态、指数退避、随机抖动和页面可见性恢复入手，给出一套可观察、可停止、能回滚的前端重连方案。366 收藏 -
用 CSS @scope 给卡片组件划定样式边界，讲清嵌套 scope、to() 限制、scoping proximity 与不支持浏览器的降级检查。366 收藏 -
content-visibility:auto 可以跳过屏幕外内容的绘制，但尺寸估计不准时会让滚动条和滚动位置抖动。本文用 contain-intrinsic-size、auto 记忆尺寸和渐进校验拆开性能收益与布局稳定性的取舍。366 收藏 -
用 CSS color-mix() 从一个主题色生成按钮悬停、禁用和浅背景色，解释混合空间、比例、透明度与 @supports 回退，并给出可读性检查边界。366 收藏 -
说明 Vite 8 的 Baseline 固定日期、build.target 特殊值与显式浏览器数组的选择，区分语法转换、运行时 API、组件降级和 CSS 目标，整理升级时的兼容性决策。366 收藏 -
display 从 none 切换到可见值时通常会瞬间出现，transition-behavior: allow-discrete 可以让 display 参与离散过渡，再配合 opacity、@starting-style 和渐进增强规则完成可控的显示与隐藏效果。366 收藏 -
用 CSSStyleSheet 构造共享样式，通过 adoptedStyleSheets 挂载到多个 ShadowRoot，并验证 replaceSync 更新、文档归属与兼容边界。365 收藏 -
Web Worker 通过 postMessage 传输 ArrayBuffer 时，加入 transfer list 会转移底层内存所有权，使发送端 buffer 进入 detached 状态。本文对比复制与转移，说明消息体、transfer list 和 Uint8Array 视图的正确边界。364 收藏 -
前端显示业务时间时，应保留后端时间点并显式传入用户IANA时区。本文给出Intl.DateTimeFormat复用写法、resolvedOptions检查和无偏移字符串处理边界。363 收藏 -
HTMLDialogElement 的 requestClose() 用于发起可拦截的关闭请求，close() 用于直接关闭。本文用事件顺序、returnValue 和兼容性代码说明两者的选择边界。363 收藏 -
TransformStream 会把下游的消费压力沿管道传回上游。本文用 pipeThrough、desiredSize 和 writer.ready 说明如何配置、判断并验证 Web Streams 背压。361 收藏 -
View Transitions API 保留共享元素的关键，是让切换前后的同一逻辑元素使用唯一的 view-transition-name。本文分别说明 SPA 与同源 MPA 的写法、动画伪元素、降级和重名边界。361 收藏 -
TransformStream 可以把 fetch 返回的流式响应接入一条可读、可写的转换管道。本文用文本响应示例说明 pipeThrough、transform、flush、背压、错误和取消的实际边界。361 收藏