如何检测浏览器是否支持@supports？能否用CSS Hack替代以减少JS？

嘿，欢迎回归Web开发！这个问题一点都不基础——毕竟兼容旧浏览器从来都是个绕不开的坎儿😉

首先得明确：CSS Hack确实能在特定场景下替代部分JS的兼容逻辑，但要说完全摒弃JS，还是得看你的项目需求。

一、CSS Hack能帮你省多少JS？ #

• 对于样式层面的兼容问题（比如旧IE的盒模型、flex支持、渐变效果），CSS Hack确实能直接搞定，不用写JS去检测浏览器再动态加样式。比如旧IE专属的*html前缀、_属性前缀，或者针对IE10+的@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)，这些都能精准给旧浏览器喂特定样式，完全不需要JS介入。
• 如果你的项目兼容需求只停留在样式兼容，那确实能砍掉大量用来做浏览器检测、动态注入样式的JS代码，小型项目里甚至可以做到样式全靠CSS Hack搞定。

二、什么时候还是离不开JS？ #

CSS Hack再好用，也有它的边界：

• 它只能处理样式相关的问题，要是涉及到交互逻辑（比如旧IE不支持addEventListener、ES6语法，或者需要根据浏览器特性加载不同资源），CSS Hack就无能为力了，还是得靠JS做降级处理。
• 很多现代CSS特性（比如CSS Grid、自定义属性）的Hack要么不存在，要么维护成本极高——毕竟Hack都是针对特定浏览器版本的，一旦浏览器版本迭代，Hack可能就失效或者产生新的兼容问题，后期维护起来比用JS检测更麻烦。

三、更稳妥的思路：Hack + @supports 组合 #

其实现在更推荐的是渐进增强的思路：

1. 先写基础样式，保证所有浏览器都能正常显示核心内容；
2. 用@supports给支持现代特性的浏览器加增强样式；
3. 针对实在不支持@supports的旧浏览器（比如IE8及以下），再用CSS Hack做兜底。

这样既不用写大量JS检测，又能兼顾兼容性，维护成本也比纯Hack低。

内容的提问来源于stack exchange，提问作者Tim Bilotta