实用的CSS技巧与技术
内容提要
本文介绍了现代CSS的一些实用技巧，包括自我修改的CSS变量、悬挂标点、CSS的级联和特异性等。强调了CSS的新特性，如容器查询和网格布局，提高了开发效率。此外，探讨了CSS在流体环境中的应用及如何用CSS测试HTML。最后，CSS工作组正在讨论砖石布局的实现，欢迎开发者提供意见。
延伸解读
CSS 测试 HTML 的实用场景
文章提到，使用 CSS 选择器测试 HTML 可以检查可访问性、发现冗余代码和验证可用性。这种方法特别适合在浏览器中工作的开发者，因为可以直接利用开发者工具查看视觉回归和检查器信息，而无需依赖命令行日志。此外，当无法直接访问客户的技术栈时，只需提供一个测试样式表，客户就能自行定位不良模式，无需开发者介入。
自我修改 CSS 变量的实验性方案
CSS 自定义属性规范不允许变量引用自身，但 Lea Verou 提出的 inherit() 函数已被 CSSWG 纳入规范（尚未实现）。Roman Komarov 利用容器样式查询模拟了访问属性先前状态的行为，可用于动态循环色相、匹配边框圆角或嵌套菜单列表等场景。不过该方案仍处于实验阶段，不应在生产环境中使用。由于样式查询可能比 inherit() 更早获得广泛支持，这一变通方法具有较大潜力。
悬挂标点的渐进增强与注意事项
hanging-punctuation 属性可将开引号等标点延伸到文本块外，改善排版效果。目前仅 Safari 支持，但作为渐进增强的示例，在不支持的浏览器中不会产生负面影响。需要注意的是，Jeremy Keith 发现全局应用该属性时，表单字段中的标点也会被推出并隐藏。解决方法是为 input 和 textarea 添加 hanging-punctuation: none; 以避免引号消失。
aspect-ratio 失效的常见原因
aspect-ratio 属性在流体环境中表现良好，但某些设置可能导致其失效。Chris Coyier 指出三个原因：同时设置宽高（可能因意外来源的尺寸设置而混淆）、拉伸以及内容强制高度。了解这些情况有助于在布局中避免意外结果，确保 aspect-ratio 按预期工作。
Q&A
现代CSS有哪些新特性可以提高开发效率？
现代CSS引入了自我修改的CSS变量、悬挂标点、级联和特异性等新特性，这些都能显著提升开发效率。
如何使用CSS选择器测试HTML？
可以使用CSS选择器测试HTML，以检查可访问性、发现HTML冗余或评估一般可用性，这种方法在浏览器中非常有效。
悬挂标点在CSS中的作用是什么？
悬挂标点属性可以改善文本排版，虽然目前仅在Safari中支持，但它是渐进增强的一个好例子。
aspect-ratio属性在流体环境中如何表现？
aspect-ratio属性在流体环境中表现良好，可以处理各种形状的元素，但某些设置可能导致其失效。
CSS工作组正在讨论什么新布局？
CSS工作组正在讨论砖石布局的实现，欢迎开发者提供意见以改进CSS布局能力。
自我修改的CSS变量有什么潜在用途？
自我修改的CSS变量可以用于动态调整样式，如循环不同的色调或匹配视觉边框半径，尽管目前仍处于实验阶段。
