zoukankan      html  css  js  c++  java
  • 关于CSS3样式中的前缀问题

    作为新手,有的时候在写css时分不清什么属性需要用到前缀,或者用什么前缀,下面是我平时学习的一些总结。

    在了解这些前缀之前,先介绍一下各大主流浏览器的内核: 

    • IE——trident(国内很多双核浏览器的其中一核就是trident)
    • Opera——Blink(presto已废弃)
    • chrome——Blink(之前是webkit)
    • Firefox——Gecko
    • Safari——webkit(Android手机使用频率最高的也是webkit内核)

    而每个内核都有自己的前缀:

    •     Trident内核:前缀为-ms-
    •     Gecko内核:前缀为-moz-
    •     Presto内核:前缀为-o-
    •     Webkit内核:前缀为-webkit-

    所以:

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

    CSS属性需要带各浏览器的前缀,下面介绍一些常用的需要加上前缀的属性(新增属性):(具体的属性请参考链接:http://css.doyoe.com/   里面所有橙色显示的属性都需要加前缀)

      box-shadow,border-radius,background-origin,background-clip,text-shadow,zoom,transform,transition,animation.....

    其实这些属性前缀的问题现在不是太大的问题了,因为会有一些工具替我们去解决,比如下面这款插件:

          Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。

          把Autoprefixe添加到资源构建工具(例如Grunt)后,可以完全忘记有关CSS前缀的东西,只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器,可修改browsers参数设置。

          Autoprefixer不仅会为你的属性加上前缀,还会修复语法差异,清理过期的前缀。具体使用方法请参考文章:http://www.bcty365.com/content-146-5024-1.html

  • 相关阅读:
    免费获取pptv会员
    LNMP环境包安装IonCube教程
    linux系统lnmp环境包搬家教程
    进入网站自动加自己为QQ好友代码
    vip视频解析接口
    CF使用TGP下载后,分卷文件损坏的解决方法
    体育赛事
    浅谈thinkphp中将字符串转换成json数组的方法
    android ANR问题
    android 单例模式
  • 原文地址:https://www.cnblogs.com/baikaizhuliangshui/p/11348628.html
Copyright © 2011-2022 走看看