什么是 browserhacks
browserhacks 是一个可以解决浏览器兼容性问题的 npm 包，它包含了许多可用于解决浏览器兼容性问题的 hack 代码，如 CSS hack、JavaScript hack 等。具体来说，它可以帮助我们在不同的浏览器中正确地渲染出网页布局和效果。使用 browserhacks 可以让我们更快地解决浏览器兼容性问题，让我们能够更专注于其他的前端开发工作。
安装和使用
安装
你可以通过以下命令来安装 browserhacks：
npm install browserhacks --save-dev
使用
在需要使用浏览器 hack 的地方引入 browserhacks：
require('browserhacks');或者：
import 'browserhacks';
这里需要注意的是，你需要在需要使用浏览器 hack 的地方引入 browserhacks。如果你在网页中的某个地方引入了 browserhacks，则它将在整个页面生命周期中生效。
示例
CSS hack
比如，我们有一个 button 标签需要设置渐变色 background，但是在 IE6/7 中会无法工作。我们可以使用以下 CSS hack：
button {
background: #ff0000; /* fallback for non-supported browsers */
background: gradient(linear, left top, left bottom, from(#ff0000), to(#00ff00)); /* IE6/7 */
\background: #0000ff; /* IE8 */
+background: #0000ff; /* IE7 */
*background: #0000ff; /* IE6 */
}这里我们使用了 \, +, * 来代替传统的 CSS 选择器，这些的作用是让相应的样式仅在特定的浏览器中生效。
JavaScript hack
再比如，我们需要为不同版本的 IE 浏览器（IE6/7/8/9）提供适配的 JavaScript 代码。我们可以使用以下代码：
-- -------------------- ---- -------
--- ------- - ------------
--- --- ----------------------------------
-- - ------------
------ ------------- - ---
--
- - --------
- - ---------
- - ---------
- - --------
------ --------------- ------------------ ------------------ ------------------ ------------------- --------------------------------------- -- ------------------------------------ -- -------------------------------------------
-----这里我们使用了浏览器的 UserAgent 字符串来判断浏览器类型。根据不同的浏览器类型，在代码中针对性地解决问题。
总结
browserhacks 是一个非常有价值的 npm 包，它可以帮助我们解决浏览器兼容性问题，并减少我们在处理浏览器兼容性问题上所花费的时间。在实际的前端开发过程中，我们可以灵活运用这些浏览器 hack，让我们的网站更能够兼容不同的浏览器。同时我们也需要注意，这些 hack 代码在非常规情况下可能会不再奏效，因此不要过度依赖它们，而应该把它们作为应急手册而不是开发规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52ac