随着前端技术的发展，CSS 样式处理已经不仅仅是简单的选择器和属性值的组合，更多的是在考虑浏览器兼容性、主题定制等综合因素。而针对不同的浏览器，可能需要编写不同的 CSS 样式，这就需要使用一些工具来提高效率，避免出现各种浏览器之间的兼容性问题。在这里，我们介绍一款很好用的 npm 包——get-prefixed-style，它可以生成不同浏览器下的 CSS 样式，使你不再需要手动一遍遍地添加浏览器前缀了。
什么是 get-prefixed-style
get-prefixed-style 是一个用于生成 CSS 样式的 npm 包，能够自动添加浏览器前缀，提供非常方便的方法给前端开发者生成需要的 CSS 样式，让开发者不再担心浏览器兼容性问题。
安装 get-prefixed-style
可以通过以下命令来安装 get-prefixed-style：
npm install --save get-prefixed-style
使用 get-prefixed-style
在使用过程中，我们先要导入 get-prefixed-style 包：
import getPrefixedStyle from 'get-prefixed-style';
接着，我们需要定义需要生成 CSS 样式的名称、属性和属性值，然后调用该方法：
const prefixedStyle = getPrefixedStyle('border-radius', '5px');这样就可以得到包含有生成样式信息的 JavaScript 对象，该对象包含了 CSS 样式名称和带前缀的样式名称、单值属性和双值属性的样式值，例如：
{
borderRadius: '5px',
WebkitBorderRadius: '5px',
MozBorderRadius: '5px',
msBorderRadius: '5px',
OBorderRadius: '5px',
}接着，我们就可以直接对该对象进行 CSS 样式的设置，例如：
const prefixedStyle = getPrefixedStyle('border-radius', '5px');
element.style[prefixedStyle.borderRadius] = '5px';使用示例
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------------------------- ------ ---------------- ------ --------------- ---------------------------- ------------------- -------- ------ - --------- ------ ---------- ------ -------------------- ------- ---------- ---- ----- -------------- ------- --------------- ------ ---------- --- ----- ----- ------- ------ --- --- --------- ------- ------ ----- -------------- ------------ --------- -------- ---------------- ---- --------------------- ------- ------------- - --------------------------------- ------- ------- ------- - ------------------------------- ------------------------------------------- - ------ ---------- ------- -------
在上述示例中，我们在样式中没有添加元素圆角效果，但是我们希望添加圆角效果，可以使用 get-prefixed-style 包来生成并设置带有浏览器前缀的样式名称。上述代码结果如下图所示：
总结
get-prefixed-style 是一款极其实用的 npm 包，可以为前端开发者贡献巨大的力量帮助开发者生成带有浏览器前缀的样式名称，消除浏览器之间的兼容性问题。在实际开发过程中，建议多加利用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2981e8991b448d9c72