webpack之自动补全css前缀

最新推荐文章于 2025-12-07 03:10:19 发布

原创最新推荐文章于 2025-12-07 03:10:19 发布 · 941 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了CSS3属性为何需要前缀的问题，解析了不同浏览器（如谷歌、火狐、IE、欧朋）对CSS3特性的支持差异及前缀的使用。并通过示例展示了display属性在各浏览器中的兼容写法，最后介绍了如何使用webpack插件autoprefixer自动为CSS3属性添加前缀，以确保跨浏览器的兼容性。

css3的属性为什么需要前缀

浏览器的兼容性问题（浏览器的标准尚未统一）

谷歌：-webkit

火狐：-moz

IE：-ms

欧朋：-o

举个例子：

display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers.*/
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

webpack插件

autoprefixer自动补全css3前缀

1.安装：(配合postcss-loader一起使用)

cnpm i postcss-loader autoprefixer -D

2.配置：

{
    test:/\.css/,
    use:[
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options:{
                plugins:()=>[
                    require('autoprefixer')({
                        overrideBrowserslist: ['last 2 version']  //兼容信息设置
                    })
                ]
            }
        }
    ]
}