anchor()函数可原生替代popper.js，通过top: anchor(--trigger bottom) + 8px等声明式写法参与布局计算，无需js监听scroll/resize或调用getboundingclientrect()，但要求锚点可见且定位元素设position: absolute/fixed。
用 anchor() 替代 Popper.js 类定位逻辑
浏览器原生锚点定位已经稳定支持，anchor() 函数能直接参与布局计算，不再需要监听 scroll、resize 或手动调用 getBoundingClientRect()。你只要定义锚点、写好偏移，其余交给浏览器。
-
anchor-name: --trigger;必须带--前缀，否则被忽略；命名只允许字母、数字、连字符，大小写敏感 - 锚定元素必须设
position: absolute或fixed，否则anchor()不生效 - 推荐写法：
top: anchor(--trigger bottom) + 8px;—— 混合锚点边缘和像素偏移，比旧版position-anchor更灵活 - 如果锚点元素
display: none或不可见，anchor()返回0，导致错位；可用visibility: hidden保位置但不占流
用 :has() 实现表单联动与状态反馈
过去要监听 input:invalid 然后给父容器加 class，现在一行 CSS 就能完成。它让 CSS 第一次真正具备“向上选择”的能力，适用于校验提示、条件显隐、交互反馈等高频场景。
- 常见错误：在不支持的浏览器里（如旧版 Edge）直接使用会静默失效，建议配合
@supports selector(:has(*))做降级 - 性能影响极小，现代浏览器已对
:has()做了优化，但嵌套过深（如:has(:has(:has(...)))）仍可能触发重排 - 典型用法：
.form-item:has(input:invalid) { border-color: #e74c3c; }，无需 JS 监听input或blur事件
用 scroll-snap-type 和 scroll-snap-align 实现键盘导航
滚动捕捉不是“视觉效果”，而是原生可访问的导航机制。左右/上下方向键默认就能控制滚动位置，不需要任何 keydown 监听或 scrollTo() 调用。
-
scroll-snap-type: x mandatory;表示水平滚动必须停在每个捕捉点上；若想允许中途停留，改用proximity -
scroll-snap-align: center;最常用，但要注意容器尺寸是否固定——如果父容器宽高由内容撑开，捕捉可能失效 - 滚动容器必须有明确的溢出行为，即
overflow-x: auto（水平）或overflow-y: auto（垂直），否则属性被忽略 - 移动端 Safari 对
mandatory的支持略保守，部分场景需加-webkit-overflow-scrolling: touch兼容
用 @layer 管理样式优先级，避免 JS 强制覆盖
当 JS 频繁通过 element.style.setProperty() 或 classList.toggle() 干预样式时，本质是在对抗 CSS 层叠规则。而 @layer 让你提前声明层级权重，把“谁该赢”变成可预测的配置，而不是运行时抢夺。
- 必须按顺序声明层：
@layer base, components, utilities;，后续同名层会合并而非覆盖 -
@layer utilities { .hidden { display: none; } }的优先级低于@layer components，但高于未声明层的普通规则 - JS 设置的
style属性依然最高，但你可以用@layer把关键状态样式（如.is-open）提权，减少 inline style 使用 - 目前 Chrome/Firefox/Safari 均已稳定支持，但构建工具（如 PostCSS）需升级到 v8.4+ 才能正确解析
:has() 的降级路径——它们不像 flex 那样“用了就见效”，而是在特定 DOM 状态或浏览器环境下才真正接管逻辑。写的时候多在隐身模式、低配设备和旧版 Safari 里点几下 tab 键，比看文档更能暴露问题。Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
