-
CSS grid lanes 怎样实现不等高卡片的紧凑布局?本文用 display:grid-lanes 和 grid-template-columns 说明原生紧凑排列的工作边界,再用 @supports 保留普通 Grid 回退,补充 DOM 顺序、跨度和实验能力的取舍。
-
围绕锚定面板靠近边缘后溢出的场景,讲解 CSS position-try-fallbacks、@position-try、翻转组合及候选顺序,并提供尺寸约束与普通文档流降级配置。
-
CSS font-size-adjust 可以按 x-height、cap-height 或 CJK 字符度量调整字体使用字号,让首选字体不可用时的后备字体保持相近字高。本文说明固定比例、from-font、继承、size-adjust 与旧浏览器降级边界。
-
CSS zoom 会让缩放后的组件参与布局,适合整体比例调整;transform: scale() 只做视觉变换,适合不希望推动兄弟元素的预览或悬浮效果。
-
URLPattern 可以把带参数的 pathname 写成可复用模式,再用 test() 判断路由是否命中、用 exec() 读取 pathname.groups 中的参数。本文拆解模式声明、参数提取、baseURL、查询字符串和兼容边界。
-
WebSocket 客户端不应看到 close 事件就立即重连。本文结合 CloseEvent 的 code、reason、wasClean,把关闭原因分成停止重连、退避重连和先修复协议或权限三类,并给出带抖动退避的 JavaScript 分类器。
-
CSS scroll-state() 可以把可滚动、最近滚动方向、滚动吸附和 sticky 卡住状态交给容器查询判断。本文说明从 JavaScript 滚动监听迁移到 container-type: scroll-state 与 @container 的最小写法、四类描述符、结构前提和渐进增强边界。
-
CSS @starting-style 用来为首次显示或从 display:none 变为可见的元素提供过渡起始值。本文以原生 dialog 为例,拆解默认态、进入态、display 离散过渡和兼容降级,让弹窗既能淡入也能完整淡出。
-
CSS sibling-index() 可以读取元素在同一父节点兄弟元素中的位置,并直接参与 calc() 生成递增的 animation-delay。本文从 DOM 顺序、动画步长、prefers-reduced-motion、@supports 和 nth-child() 降级几个环节说明如何在动态列表中减少手写编号,同时保留旧环境的基础样式。
-
Promise.allSettled 会按输入顺序返回每个任务的 settled 结果。本文用任务描述数组和同索引合并方式保留 key、label、status、value 或 reason,并说明它与 Promise.all 的边界。
-
CSS field-sizing: content 可以让文本输入框按当前内容调整首选宽度,再配合 min-width、max-width 和 maxlength 控制伸缩边界。本文从固定宽度表单的症状出发,说明触发条件、最小写法、placeholder 与兼容性边界。
-
Vite 依赖预构建出现重复,常见原因不是简单的缓存脏了,而是同一个包的条件导出被解析成多个入口。本文从 exports 条件、源码入口、optimizeDeps 配置和 node_modules/.vite 缓存四处排查,并给出适合开发环境的最小修复方式。
-
content-visibility: auto 能跳过屏外内容,但占位尺寸估计不当会让滚动时页面跳动。本文用 contain-intrinsic-size 给卡片提供接近真实高度的布局尺寸,并说明 auto 记忆值、网格场景和降级边界。
-
用 CSS anchor positioning 将提示框绑定到按钮,说明 anchor-name、position-anchor、position-area 的组合方式,以及浏览器回退、边界翻转和重复组件的处理方法。
-
用 border-radius 先建立圆角区域,再通过 CSS corner-shape 绘制 notch、bevel、scoop 等卡片边角,并用 @supports 保留旧浏览器的圆角降级。