CSS 也能实现 if 判断？实现动态高度下的不同样式展现 - ChokCoco
内容提要
本文探讨了如何仅用CSS实现容器高度变化时箭头图标的显示与隐藏。介绍了使用@container语法和clamp与calc函数的两种方法，前者在容器高度超过260px时显示图标，后者通过动态计算实现图标的瞬间出现，提升用户体验。
延伸解读
容器查询：简洁但兼容性有限
使用 @container 语法，当容器高度超过 260px 时显示箭头图标，代码简洁直观。但截至 2023 年 11 月，该特性的浏览器兼容性较差，可能无法在所有用户环境中生效。因此，若项目需要支持旧版浏览器，需谨慎选择此方案。
clamp 与 calc 的兼容性优势
通过 clamp 和 calc 函数动态计算 bottom 值，实现了类似 if/else 的逻辑。这种方法兼容性更好，因为 clamp 和 calc 已被广泛支持。但需注意，计算值需乘以一个大倍数（如 100000）来避免图标渐现，确保图标瞬间出现。
实现细节与注意事项
在 clamp 方案中，bottom 值被限制在 -9999px 到 10px 之间，并通过乘以大倍数放大计算值，使图标在容器高度超过阈值时瞬间出现。但需注意，阈值（如 200px）和倍数需根据实际场景调整，且大倍数可能导致计算溢出，需测试验证。
Q&A
如何使用CSS实现容器高度变化时箭头图标的显示与隐藏？
可以使用@container语法，当容器高度超过260px时显示箭头图标，或者使用clamp和calc函数实现动态计算。
@container语法的兼容性如何？
@container语法的兼容性较差，可能在某些浏览器中无法正常使用。
clamp和calc函数在实现箭头图标显示中有什么作用？
clamp函数限制动态值在某个范围内，calc函数用于动态计算容器高度，从而控制箭头图标的显示位置。
如何解决箭头图标渐现的问题？
通过将计算值乘以一个大倍数，可以使箭头图标瞬间出现，避免渐现效果。
使用clamp函数时，如何确保箭头图标在容器底部？
可以使用clamp(-99999px, calc(100% - 200px), 10px)来限制箭头图标的底部位置，确保其在容器底部。
本文中提到的CSS实现方案有哪些？
本文提到的方案包括使用@container语法和clamp与calc函数的组合方法。
