Autoprefixer配置详解

头像
anchovy
    阅读 8 分钟
    7
    说是Autoprefixer介绍，其实是Browserslist介绍，因为Autoprefixer使用的是Browserslist

    一、Browserslist

    适用于以下前端工具:

    package.json配置示例:

    "browserslist": [
    "defaults",
    "not IE 11",
    "not IE_Mob 11",
    "maintained node versions"
]

    或者在.browserslistrc文件配置示例:

    # Browsers that we support

defaults
not IE 11
not IE_Mob 11
maintained node versions

    开发者可以指定最近2个版本如：last 2 versions，让Browserslist针对指定工具，如：caniuse-lite 去查询数据匹配相应浏览器版本。

    二、工具列表

    在项目目录中运行npx browserslist以查看项目的目标浏览器。这个CLI工具是内置的，并且可以在带有Autoprefixer的任何项目中使用。

    三、最佳实践

    以下是一个默认查询，为大多数用户提供一个合理的配置:

    "browserslist": [
    "defaults"
]

    如果你想改变浏览器的默认设置，我们建议结合最近的两个版本，如>0.2%。这是因为过去的n个版本本身并没有添加流行的旧版本，而仅使用超过0.2%的百分比就会使流行的浏览器在长期运行中更加流行。我们可能会陷入垄断和停滞状态，就像我们在使用Internet Explorer 6时一样。请小心使用此设置。

    不仅限于chrome浏览器，请尊重浏览器多样性，不要因为不认识浏览器就删除它们。像Opera Mini在非洲拥有1亿用户，在全球市场上比微软Edge更受欢迎。中国QQ浏览器的市场份额超过了Firefox和桌面Safari浏览器的总和。

    四、查询

    Browserslist会使用浏览器和Node.js版本查询这些来源:

    • .browserslistrc 配置文件在当前或父目录
    • browserslist 配置文件在当前或父目录
    • BROWSERSLIST 环境变量
    • 如果上面的方法没有产生有效的结果，浏览器会使用默认值：> 0.5%, last 2 versions, Firefox ESR, not dead

    五、查询组合

    or方式支持or或,，如：last 1 version or > 1% 等于 last 1 version, > 1%

    查询组合也支持执行交叉所有以前的查询: last 1 version or chrome > 75 and > 1% 的人会选择(browser last version 或 Chrome since 76)和超过1%的市场份额。

    有三种不同的方式组合查询，如下所示。首先从单个查询开始，然后将查询组合起来得到最终的列表。

    查询组合器类型插图示例
    并集image.png> .5% or last 2 versions<br/>> .5%, last 2 versions
    交集image.png> .5% and last 2 versions
    排除image.png以下三个相等<br/>> .5% and not last 2 versions<br/>> .5% or not last 2 versions<br/>> .5%, not last 2 versions

    测试查询的一种快速方法是：npx browserslist '> 0.5%, not IE 11'

    六、完整列表

    你可以通过查询来指定浏览器和Node.js版本(不区分大小写):

    • defaults：Browserslist的默认浏览器（> 0.5%, last 2 versions, Firefox ESR, not dead）

    • > 5%：根据全局使用统计数据选择浏览器版本，>=、<和<=处理

      • > 5% in US：使用美国的使用统计。它接受两个字母的国家代码
      • > 5% in alt-AS：使用亚洲地区的使用统计数据。所有地区代码的列表可以在caniuse-lite/data/regions找到
      • > 5% in my stats：使用自定义使用数据
      • > 5% in browserslist-config-mycompany stats：使用来自browserslist-config-mycompany/browserslist-stats.json的自定义使用数据
      • cover 99.5%：覆盖最流行的浏览器
      • cover 99.5% in US：同上，不过限制了两个字母的国家代码
      • cover 99.5% in my stats：覆盖最流行自定义使用数据的浏览器
    • dead：24个月内没有官方支持或更新的浏览器，目前有：IE 10、IE_Mob 11、BlackBerry 10、BlackBerry 7、Samsung 4和OperaMobile 12.1

    • last 2 versions：每个浏览器的最后两个版本

      • last 2 Chrome versions：最后两个版本的Chrome浏览器
      • last 2 major versions或last 2 iOS major versions：前两个主要版本的所有次要/补丁版本

    • node 10和node 10.4选择最新的node.js10.x.x或10.4.x版本

      • current node：现在Browserslist使用的Node.js版本
      • maintained node versions：所有Node.js版本，仍然由Node.js Foundation维护

    • iOS 7直接使用iOS浏览器7版

      • Firefox > 20：Firefox的更新版本超过20个，>=、<和<=处理，也可以使用node.js
      • ie 6-8：选择包含的版本范围
      • Firefox ESR：最新的[Firefox ESR]版本
      • PhantomJS 2.1和PhantomJS 1.9：选择类似于PhantomJS运行时的Safari版本
    • extends browserslist-config-mycompany：从browserslist-config-mycompany npm包中获取查询
    • supports es6-module：支持特定功能的浏览器。es6-module下面是可以使用页面的URL feat参数。所有可用特性的列表可以在caniuse-lite/data/features中找到
    • since 2015或last 2 years：所有版本均于2015年发布(since 2015-03和since 2015-03-10)。未发布的版本或未发布的Chrome版本:alpha和beta版本
    • unreleased versions或unreleased Chrome versions：alpha和beta版本
    • not ie <= 8：排除先前查询所选择的浏览器

    您可以将not添加到任何查询中。

    七、调试

    在项目目录中运行npx browserslist，查看您的查询选择了哪些浏览器

    $ npx browserslist
and_chr 61
and_ff 56
and_qq 1.2
and_uc 11.4
android 56
baidu 7.12
bb 10
chrome 62
edge 16
firefox 56
ios_saf 11
opera 48
safari 11
samsung 5

    八、浏览器

    • Android： Android WebView
    • Baidu：百度浏览器
    • BlackBerry or bb：黑莓浏览器
    • Chrome：谷歌浏览器
    • ChromeAndroid or and_chr：谷歌android浏览器
    • Edge：IE Edge.
    • Electron for Electron framework：将被转换为Chrome版本
    • Explorer or ie：IE浏览器.
    • ExplorerMobile or ie_mob：IE手机浏览器
    • Firefox or ff：火狐浏览器
    • FirefoxAndroid or and_ff：火狐android浏览器
    • iOS or ios_saf：IOS safari浏览器
    • Node
    • Opera：Opera浏览器
    • OperaMini or op_mini：Opera Mini浏览器
    • OperaMobile or op_mob：Opera 手机浏览器
    • QQAndroid or and_qq：QQ android浏览器
    • Safari：桌面safari浏览器
    • Samsung：三星浏览器
    • UCAndroid or and_uc：UC浏览器或UC android浏览器
    • kaios：KaiOS浏览器

    九、配置文件

    1、package.json

    {
  "private": true,
  "dependencies": {
    "autoprefixer": "^6.5.4"
  },
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ]
}

    2、.browserslistrc

    # Browsers that we support

last 1 version
> 1%
IE 10 # sorry

    Browserslist会检查path中每个目录中的配置。你可以把配置放到根目录，app/或app/styles，如：app/styles/main.css

    可以在BROWSERSLIST_CONFIG环境变量中指定直接路径

    十、共享配置

    你可以使用下面的查询来引用从另一个包中导出的浏览器列表配置:

    "browserslist": [
    "extends browserslist-config-mycompany"
]

    出于安全原因，外部配置只支持带有browserslist-config-前缀的包。通过使用@scope/browserslist-config作为模块的命名或前缀，例如@scope/browserslist-config或@scope/browserslist-config-mycompany，也支持npm作用域包。

    如果你不接受用户的Browserslist查询，也可以使用BROWSERSLIST_DANGEROUS_EXTEND环境变量或dangerousExtend选项来禁用验证。

    BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack

    也可以在包中引用特定的文件:

    "browserslist": [
    "extends browserslist-config-mycompany/desktop",
    "extends browserslist-config-mycompany/mobile"
]

    当编写共享的Browserslist包时，只需导出一个数组browserslist-config-mycompany/index.js:

    module.exports = [
  'last 1 version',
  '> 1%',
  'ie 10'
]

    还可以包含browserslist-stats.json文件作为你的共享配置的一部分在根和查询使用> 5% in browserslist-config-mycompany stats。它使用相同的格式extends和dangerousExtend属性如上。

    您可以为不同的环境导出配置，并通过BROWSERSLIST_ENV或在工具中的env选项来选择环境:

    module.exports = {
  development: [
    'last 1 version'
  ],
  production: [
    'last 1 version',
    '> 1%',
    'ie 10'
  ]
}

    十一、针对不同环境进行配置

    您还可以为各种环境指定不同的浏览器查询。BROWSERSLIST_ENV或NODE_ENV变量将选择查询。如果没有一个被声明，Browserslist会首先查找产品查询，然后使用默认值。

    package.json：

    "browserslist": {
    "production": [
        "> 1%",
        "ie 10"
    ],
    "modern": [
        "last 1 chrome version",
        "last 1 firefox version"
    ],
    "ssr": [
        "node 12"
    ]
}

    .browserslistrc：

    [production]
> 1%
ie 10

[modern]
last 1 chrome version
last 1 firefox version

[ssr]
node 12

    十二、自定义使用数据

    如果你有一个网站，你可以查询网站的使用统计数据。browserslist-ga会询问访问谷歌分析，然后生成browserslist-stats.json:

    npx browserslist-ga

    或者使用browserslist-ga-export来转换谷歌分析数据，而无需提供谷歌帐户的密码。

    您可以通过任何其他方法生成使用统计信息文件。文件格式应如下:

    {
  "ie": {
    "6": 0.01,
    "7": 0.4,
    "8": 1.5
  },
  "chrome": {
    …
  },
  …
}

    注意，您可以查询自定义使用数据，同时还可以查询全局或区域数据。例如，查询> 1% in my stats, > 5% in US, 10%是允许的。

    十三、JS API

    const browserslist = require('browserslist')

// Your CSS/JS build tool code
function process (source, opts) {
  const browsers = browserslist(opts.overrideBrowserslist, {
    stats: opts.stats,
    path:  opts.file,
    env:   opts.env
  })
  // Your code to add features for selected browsers
}

    查询可以是一个字符串"> 1%, IE 10"或一个数组['> 1%', 'IE 10']

    如果查询丢失，Browserslist会查找配置文件。您可以提供一个路径选项(可以是一个文件)来查找与配置文件相对的配置文件。

    参数项：

    • path：文件或目录路径，以查找配置文件。默认是：./
    • env：从配置中使用什么环境。默认生产
    • stats：自定义使用统计数据
    • config：配置文件路径
    • ignoreUnknownVersions：忽略未知版本。默认false
    • dangerousExtend：禁用扩展查询的安全检查。默认false
    • mobileToDesktop：没有手机端使用桌面端。默认false

    对于non-JS环境和调试目的，你可以使用CLI工具:

    > browserslist "> 1%, IE 10"

    您可以通过JS API获得所选浏览器的用户覆盖率:

    browserslist.coverage(browserslist('> 1%'))
//=> 81.4
    browserslist.coverage(browserslist('> 1% in US'), 'US')
//=> 83.1
    browserslist.coverage(browserslist('> 1% in my stats'), 'my stats')
//=> 83.1
    browserslist.coverage(browserslist('> 1% in my stats', { stats }), stats)
//=> 82.2

    通过命令行CLI:

    $ browserslist --coverage "> 1%"
These browsers account for 81.4% of all users globally
    $ browserslist --coverage=US "> 1% in US"
These browsers account for 83.1% of all users in the US
    $ browserslist --coverage "> 1% in my stats"
These browsers account for 83.1% of all users in custom statistics
    $ browserslist --coverage "> 1% in my stats" --stats=./stats.json
These browsers account for 83.1% of all users in custom statistics

    十四、环境变量

    可以用环境变量来改变浏览器列表的设置

    BROWSERSLIST

    BROWSERSLIST="> 5%" npx webpack

    BROWSERSLIST_CONFIG 配置文件

    BROWSERSLIST_CONFIG=./config/browserslist npx webpack

    BROWSERSLIST_ENV 环境变量

    BROWSERSLIST_ENV="development" npx webpack

    BROWSERSLIST_STATS 自定义使用数据

    BROWSERSLIST_STATS=./config/usage_data.json npx webpack

    BROWSERSLIST_DISABLE_CACHE 禁用缓存

    BROWSERSLIST_DISABLE_CACHE=1 npx webpack

    BROWSERSLIST_DANGEROUS_EXTEND 禁用安全性可共享配置名检查

    BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack

    十五、缓存

    Browserslist从package.json和browserslist文件中读取缓存配置

    也可以清楚缓存，示例：

    browserslist.clearCaches()

    要完全禁用缓存，请设置BROWSERSLIST_DISABLE_CACHE环境变量。

    欢迎关注：技术开发分享录

    前端autoprefixer
    anchovy
    1.9k 声望89 粉丝
    « 上一篇
    nginx location匹配规则
    下一篇 »
    typescript接口使用总结

    引用和评论

    推荐阅读
    头像
    react useRef的两层用法，开眼界了

    anchovy阅读 1.8k

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 1.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新