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

时间：2022-06-01 20:07:43

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

标签：

相关文章