前端技术文章
-
CSS subgrid 让多张嵌套卡片共享父网格的标题、正文和操作区轨道，解决内容长度不同导致的按钮错位，并补充 gap、隐式轨道与 flex 降级写法。465 收藏 -
讲清 CSS contain-intrinsic-size 与 content-visibility 的配合方式，用合理的占位尺寸减少长列表内容进入视口时的布局跳动，并给出 CLS 与兼容降级的检查方法。136 收藏 -
content-visibility: auto 会让屏外内容使用尺寸占位，进入视口后真实高度变化就可能引起滚动跳动。本文说明 contain-intrinsic-size、auto 记忆尺寸、图片比例和三个排查观测值的用法。325 收藏 -
subtle.digest 不支持流式输入。本文说明如何用 Blob.slice 控制单块内存，并通过增量哈希器持续 update，正确计算大文件的 SHA-256。475 收藏 -
IndexedDB 的 readwrite 事务不是可以任意 await 的长连接。本文解释请求回调、事件任务与自动提交的关系，并给出连续写入、跨异步边界拆分事务和提交结果判断的实用写法。419 收藏 -
BroadcastChannel 单个对象不会收到自己的广播，多实例场景应通过每个页面独有的 senderId 在 message 入口过滤来源，避免重复更新状态。209 收藏 -
ReadableStream.tee() 的两个消费者速度不一致时，慢分支的未读数据会在内部队列中积累，快分支不会自动等待。本文用最小示例解释背压、内存风险、取消语义与分流方案选择。485 收藏 -
URLPattern 可以把可选语言前缀和资源 ID 放进同一个 pathname 规则：用 {/:lang}? 让语言段连同斜杠一起可选，再用 :id(\d+) 限制并捕获数字 ID。本文给出 test()、exec() 写法、边界检查和浏览器兼容建议。173 收藏 -
Popover API 的 auto 状态会在点击外部时自动关闭。本文用独立 draft 状态保存表单输入，在 toggle 打开时恢复，并把清理动作限定在提交成功或明确取消。220 收藏 -
讲清 HTML dialog 模态关闭后读取 returnValue 的正确时机，比较 close(value)、按钮 value 与 method=dialog，并处理 Esc 取消和旧值残留问题。339 收藏 -
CSS @layer 覆盖不了组件样式，通常不是 specificity 不够，而是层的首次创建顺序、未分层样式或 !important 改变了级联比较。本文用最小示例给出固定层顺序和排查清单。471 收藏 -
CSS color-mix 的默认混合空间会影响主题色的亮度、饱和度和色相。本文用原创示例说明如何选择 oklab、oklch 或 srgb，并处理比例、透明度与组件状态。451 收藏 -
CSS :has() 的难点在匹配范围而不是语法。本文用复杂列表说明锚点元素、直接子代、任意后代、相邻兄弟与 :not() 的组合，并给出 @supports 降级和性能边界。367 收藏