热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css兼容性有哪些处理方式

css兼容性处理方式有:1、对样式进行初始化;2、添加浏览器私有属性,如【-moz】代表firefox浏览器私有属性;3、使用自动化插件,如自动管理浏览器前缀的插件Autoprefixer。

css兼容性处理方式有:1、对样式进行初始化;2、添加浏览器私有属性,如【-moz】代表firefox浏览器私有属性;3、使用自动化插件,如自动管理浏览器前缀的插件Autoprefixer。

处理方法:

一、样式初始化

(学习视频推荐:css视频教程)

每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化

* { 
  margin: 0; 
  padding: 0; 
}

如果不知道该初始化什么,推荐一个初始化CSS样式库normalize.css,选取展示其中几个样式设置,如下:

html { 
  line-height: 1.15; /* Correct the line height in all browsers */
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
} 
  
body { 
  margin: 0; 
} 
  
a { 
  background-color: transparent; /* Remove the gray background on active links in IE 10. */
} 
  
img { 
  border-style: none; /* Remove the border on images inside links in IE 10. */
}

二、添加浏览器私有属性

-moz- 代表firefox浏览器私有属性

-ms- 代表IE浏览器私有属性

-webkit- 代表chrome、safari私有属性

-o-代表opera私有属性

对于私有属性的顺序要注意,把标准写法放到最后,兼容性写法放到前面

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

三、使用自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件,把Autoprefixer添加到资源构建工具(例如Grunt)后,可以完全忘记有关CSS前缀的东西,只需按照最新的W3C规范来正常书写CSS即可

//我们编写的代码 
div { 
 transform: rotate(30deg); 
} 
  
// 自动补全的代码,具体补全哪些由要兼容的浏览器版本决定,可以自行设置 
div { 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg); 
}

webpack 中配置 postcss-loader 和 postcss-preset-env 也可以处理兼容问题

module: {
  rules: [{
    test: /\.css$/,
    use: [
      // 这个 loader 取代 style-loader。作用:提取 js 中的 css 成单独文件 
      MiniCssExtractPlugin.loader,
      // 将 css 文件整合到 js 文件中 
      'css-loader',
      //修改 loader 配置
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            // postcss 的插件 
            require('postcss-preset-env')()
          ]
        }
      }
    ]
  }]
}

// package.json
"browserslist": { 
  //开发环境配置
  "development": [ 
    "last 1 chrome version", 
    "last 1 firefox version", 
    "last 1 safari version" 
  ],
  //生产环境配置
  "production": [ 
    ">0.2%", 
    "not dead", 
    "not op_mini all" 
  ] 
}


推荐阅读
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • 开发笔记:前端之前端初识
    开发笔记:前端之前端初识 ... [详细]
  • 本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片,以及如何通过 background-size 控制背景图片的尺寸。 ... [详细]
  • 阿里云 Aliplayer高级功能介绍(八):安全播放
    如何保障视频内容的安全,不被盗链、非法下载和传播,阿里云视频点播已经有一套完善的机 ... [详细]
  • 本文深入探讨了HTML5中十五个重要的新特性,为开发者提供了详细的指南。 ... [详细]
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 深入解析HTML5字符集属性:charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 在PHP中实现腾讯云接口签名,以完成人脸核身功能的对接与签名配置时,需要注意将文档中的POST请求改为GET请求。具体步骤包括:使用你的`secretKey`生成签名字符串`$srcStr`,格式为`GET faceid.tencentcloudapi.com?`,确保参数正确拼接,避免因请求方法错误导致的签名问题。此外,还需关注API的其他参数要求,确保请求的完整性和安全性。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ... [详细]
  • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
  • 本文介绍了如何使用Python爬取妙笔阁小说网仙侠系列中所有小说的信息,并将其保存为TXT和CSV格式。主要内容包括如何构造请求头以避免被网站封禁,以及如何利用XPath解析HTML并提取所需信息。 ... [详细]
author-avatar
娶位红太郎_442
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有