摆脱CSS浏览器私有属性-moz, -ms, -webkit

时间:2022-12-13 09:50:19

为了兼容各个浏览器之间的私有属性,前端开发人员在写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. Linux学习一:安装&sol;配置vi,熟悉gcc&sol;vi

    1.安装的ubuntu14,进入桌面,ctrl+alt+t进入终端. 获得root权限: $sudo passwd root 输入密码 (注意:输入的和windows下不一样不会显示的,尽管输入就行. ...

  2. itextpdf JAVA 输出PDF文档

    使用JAVA生成PDF的时候,还是有些注意事项需要处理的. 第一.中文问题,默认的itext是不支持中文的,想要支持,需要做些处理. 1.直接引用操作系统的中文字体库支持,由于此方案限制性强,又绑定了 ...

  3. C&num; richTextBox封装的一个打印的类

    附件 http://files.cnblogs.com/xe2011/CSharpWinForm_richTextBoxPrintClass.rar 在窗体上一个Richtextbox 控件 和3个按 ...

  4. js日历,使用datepicker&period;js,ui&period;core&period;js,jquery-1&period;7&period;1&period;js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. REPLACE&period;&period;&period;IN&period;&period;&period;&period;&period;WITH&period;&period;&period;&period; 的使用

    REPLACE...IN.....WITH....   的使用,例子用于改变alv的gt_fieldcat_alv LOOP AT gt_fieldcat_alv ASSIGNING <fs_f ...

  6. Asp &period;Net Core 读取appsettings&period;json配置文件

         Asp .Net Core 如何读取appsettings.json配置文件?最近也有学习到如何读取配置文件的,主要是通过 IConfiguration,以及在Program中初始化完成的. ...

  7. jQuery图片灯箱和视频灯箱

    在一些前端页面中经常需要文件上传,为了美观,我们经常做一个灯箱来显示我们选择的文件, 而不是简单的input标签. html 代码:这个是多图片上传 <div class="layui ...

  8. 构建工具(build tool)简述

    一.什么是构建工具 构建工具是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk).构建包括编译.连接跟把代码打包成可用的或可执行的形式. 基本上构建的自动化是编写 ...

  9. &lpar;转&rpar;获取安卓iOS上的微信聊天记录、通过Metasploit控制安卓

    在这篇文章中我们将讨论如何获取安卓.苹果设备中的微信聊天记录,并演示如何利用后门通过Metasploit对安卓设备进行控制.文章比较基础.可动手性强,有设备的童鞋不妨边阅读文章边操作,希望能激发大家对 ...

  10. Maven&plus;Spring&plus;MySql 登陆实例

    近来无事,复习复习Spring相关知识,从<Spring企业应用开发实战>这本书开始. 本文为学习<Spring企业应用开发实战>总结,著作权归原作者. 一.用Maven建立w ...