为了兼容各个浏览器之间的私有属性,前端开发人员在写css的时候需要给一些css属性添加多个私有前缀,非常麻烦。这里给大家分享一个简单的方法可以让你以后无需手动给CSS添加私有属性。

  • -moz代表firefox浏览器私有属性
  • -ms代表IE浏览器私有属性
  • -webkit代表chrome、safari私有属性
  • -o代表opera私有属性

安装

项目目录内终端下输入

yarn add postcss

项目根目录下新建postcss.config.js文件

postcss.config.js

const autoprefixer = require('autoprefixer')

module.exports = {
plugins: [
autoprefixer(),
]
}

打开webpack.config.js添加以下代码

module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}

保存即可。

摆脱CSS浏览器私有属性-moz, -ms, -webkit的更多相关文章

  1. CSS声明各个浏览器私有属性的命名前缀

    -moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome.safari私有属性-o代表opera私有属性

  2. 浏览器 私有属性&内核

    -moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome.safari私有属性 IE使用的是Trident内核,Firefox 使用的是Gecko内核.目 ...

  3. css3浏览器私有属性前缀使用详解

    什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -m ...

  4. CSS3浏览器私有属性

    CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性.我们在书写CSS3代 ...

  5. 4. CSS新特性之浏览器私有前缀

    1. 浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加 -moz-:代表firefox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:代表safar ...

  6. CSS3选择器、低版本解决方案及各浏览器私有前缀

    一.基本选择器 通配选择器:* 元素选择器:div.p… ID选择器:#id 类选择器:.className 群组选择器:选择器1,选择器2 主流浏览器全部支持 二.层次选择器 后代选择器: div ...

  7. CSS属性前的 -webkit, -moz,-ms,-o

    -moz-对应 Firefox, -webkit-对应 Safari and Chrome-o- for Opera-ms- for Internet Explorer(microsoft) 在CSS ...

  8. WebKit的CSS扩展(WebKit是私有属性)

    http://www.css88.com/webkit/-webkit-touch-callout/ -webkit-tap-highlight-color 是一个 不规范的属性(unsupporte ...

  9. 移动端使用的WebKit私有属性(转)

    <!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>无标 ...

随机推荐

  1. STL容器之优先队列

    STL容器之优先队列 优先级队列,以前刷题的时候用的比较熟,现在竟然我只能记得它的关键字是priority_queue(太伤了).在一些定义了权重的地方这个数据结构是很有用的. 先回顾队列的定义:队列 ...

  2. Hadoop Shell命令(基于linux操作系统上传下载文件到hdfs文件系统基本命令学习)

    Apache-->hadoop的官网文档命令学习:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html FS Shell 调用文件系统( ...

  3. CentOS6 安装gnutls

    所有用的的包:https://pan.baidu.com/s/1EQYf3gsK_xT6kCAjrVs2aQ wget http://download.savannah.gnu.org/release ...

  4. [转] UniCode编码表

    Unicode编码则是采用双字节16位来进行编号,可编65536字符,基本上包含了世界上所有的语言字符,它也就成为了全世界一种通用的编码,而且用十六进制4位表示一个编码,非常简结直观,为大多数开发者所 ...

  5. java流程控制语句总结

    1.选择结构 if 方式1: 格式: if(条件表达式) { 语句体; } 执行流程: 如果条件表达式值为true, 执行语句体 如果条件表达式值为false,不执行语句体 方式2: 格式: if(条 ...

  6. nginx 设置自签名证书以及设置网址http强制转https访问

    自签名证书可以在自己的内网环境或者非对外环境使用,保证通信安装 1.生产证书 直接使用脚本生产: 中途会提示书如1次域名和4次密码,把一下文件保存为sh文件,赋予x权限后 直接执行,根据提示输入. # ...

  7. 【Android】android:manageSpaceActivity让应用手动管理应用的数据目录

    今天在Android遇到一个需求,不允许用户完全清除应用私有目录(/data/data/包名/),但是Android默认情况下用户通过在应用信息里面点击清除数据按钮把所有的应用私有目录下的的数据文件完 ...

  8. HttpWatch入门使用教程

    HttpWatch V10.0.20.0 官方免费版 HttpWatch是强大的网页数据分析工具.集成... HttpWatch Professional V10.0.20.0 官方下载 HttpWa ...

  9. js写三级联动

    <!DOCTYPE HTML> <html> <head> <title>联动菜单</title> <meta charset=&qu ...

  10. 请使用千位分隔符(逗号)表示web网页中的大数字

    方法一:使用正则表达式 语法如下: String(Number).replace(/(\d)(?=(\d{3})+$)/g, "$1,"); 举例: String(12345678 ...