Angular CLI:集成Autoprefixer兼容多浏览器以及浏览器版本

Angular CLI使用Autoprefixer来兼容不同的浏览器以及多个浏览器版本,我们不需要做额外的工作来集成Autoprefixer。

Autoprefixer内部依赖于Browserslist,根据Browserslist的配置决定兼容哪些浏览器或浏览器版本。如果我们对浏览器的兼容范围有自己的需求,可以设置Browserslist的配置。

集成Browserslist配置到Angular CLI有两种方式。

  • 集成到package.json
  • 新增.browserslistrc配置文件

方式一:package.json添加browserslist属性

"browserslist": [
  "> 1%",
  "last 2 versions"
]

方式二:在项目的根目录添加.browserslistrc文件

### Supported Browsers

> 1%
last 2 versions

browserslist配置

配置规则示例

  • last 2 versions: 每个浏览器最新的两个版本
  • last 2 Chrome versions: Chrome最新的两个版本
  • last 2 major versions: 浏览器最近两个主版本下的所有次版本
  • last 2 iOS major versions: iOS Safari最近两个主版本的所有次版本
  • > 5% 或 >= 5%: 根据全球使用统计,选择使用超过5%的版本
  • > 5% in US: 美国地区统计超过5%的版本,国家代码
  • > 5% in alt-AS: 亚洲地区超过5%的版本,地区码caniuse-lite/data/regions.
  • > 5% in my stats: 使用自定义的统计,配置自定义统计方式
  • ie 6-8: ie 6到8版本.
  • Firefox > 20: 火狐大于20的版本
  • Firefox >= 20: 火狐大于等于20的版本
  • Firefox < 20: 火狐小于20的版本
  • Firefox <= 20: 火狐小于等于20的版本
  • Firefox ESR: 最靓的[Firefox ESR]版本.
  • iOS 7: iOS浏览器版本为7
  • unreleased versions:浏览器的alpha以及beta版本
  • unreleased Chrome versions: Chrome浏览器的alpha以及beta版本
  • not ie <= 8: 使用not排除支持的浏览器

支持浏览器范围

  • Android :Android WebView.
  • Baidu
  • BlackBerry 或 bb :黑莓浏览器
  • Chrome :Chrome.
  • ChromeAndroid or and_chr :Android的Chrome浏览器
  • Edge : Edge.
  • Electron : Electron 框架,它会转换为Chrome版本
  • Explorer 或 ie
  • ExplorerMobile or ie_mob :IE手机浏览器.
  • Firefox 或 ff : Mozilla Firefox.
  • FirefoxAndroid 或 and_ff :  Android Firefox.
  • iOS 或 ios_saf : iOS Safari.
  • Opera : Opera.
  • OperaMini 或 op_mini : Opera Mini.
  • OperaMobile 或 op_mob :Opera手机浏览器.
  • QQAndroid 或 and_qq :Androin版qq浏览器
  • Safari :桌面版Safari
  • Samsung:三星浏览器
  • UCAndroid 或and_uc Android的UC浏览器

更多配置参考Browserslist

版权声明:著作权归作者所有。

相关推荐

JavaScript检测浏览器支持的视频格式以及音频格式

不同的浏览器支持的视频/音频格式有所不同,为了在多个浏览器上兼容视频/音频的播放,需要使用JavaScript检测浏览器所支持的视频/音频格式。HTMLVideoElement和HTMLAudioElement继承于HTMLMediaElement,HTMLMediaElement的canPlayType()方法可以用来判断浏览器是否支持指定的多媒体格式。语法str = aud

页面调试禁用Chrome浏览器的缓存

在前端开发过程中,页面调试时常常需要清理浏览器的缓存,下面介绍两种禁用Chrome缓存的方法。方法一:1、F12打开开发这工具2、选中开发者工具的Network标签3、把Disable cache勾选上,如图注意:禁用Chrome的缓存只有在开发者工具打开时才起作用。方法二安装清理缓存的Chrome插件。可以试一下Cache Killer。