postcss-normalize, 从browserslist中使用 normalize.css 所需的部分

分享于 

4分钟阅读

GitHub

  繁體 雙語
PostCSS plugin that automatically applies normalize.css
  • 源代码名称:postcss-normalize
  • 源代码网址:http://www.github.com/jonathantneal/postcss-normalize
  • postcss-normalize源代码文档
  • postcss-normalize源代码下载
  • Git URL:
    git://www.github.com/jonathantneal/postcss-normalize.git
    Git Clone代码到本地:
    git clone http://www.github.com/jonathantneal/postcss-normalize
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jonathantneal/postcss-normalize
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    PostCSS标准化 PostCSS

    NPM VersionBuild StatusSupport Chat

    使用 PostCSS规范,你可以使用normalize.css 组件的各个部分,你需要从browserslist

    使用 @import-normalize 确定 normalize.css 规则应包含的位置。 将删除重复的@import-normalize 规则。 查看所有的选项,了解更多信息。

    @import-normalize;

    结果 browserslistlast 3 versions 时:

    /** * Add the correct display in IE 9-.*/audio,video {
     display: inline-block;
    }/** * Remove the border on images inside links in IE 10-.*/img {
     border-style: none;
    }

    结果 browserslistlast 2 versions 时:

    /** * Remove the border on images inside links in IE 10-.*/img {
     border-style: none;
    }

    使用非固执版本的normalize.css。com。

    用法

    PostCSS正常化插件添加到项目中:

    npm install postcss-normalize --save-dev

    package.json 中添加 browserslist 项:

    {
     "browserslist": "last 2 versions"}

    使用 PostCSS正常化插件来处理你的CSS:

    importpostcssNormalizefrom'postcss-normalize';postcssNormalize.process(YOUR_CSS/*, processOptions, pluginOptions */);

    或者使用它作为一个 PostCSS插件插件:

    importpostcssfrom'postcss';importpostcssNormalizefrom'postcss-normalize';postcss([
     postcssNormalize(/* pluginOptions */)
    ]).process(YOUR_CSS/*, processOptions */);

    在所有环境中, PostCSS正常化运行,并提供了特殊的说明:

    node//Webpack/Gulp/Gulp

    命令行选项

    allowDuplicates

    允许你插入多个重复的,重复的 normalize.css 规则插入。 默认值为 false

    postcssNormalize({
     allowDuplicates:true});

    浏览器

    允许你重写项目的用于PostCSS正常化。 默认值为 false

    postcssNormalize({
     browsers:'last 2 versions'});

    forceImport

    允许在CSS文件的开头强制插入 normalize.css 规则,如果未指定插入点。 默认值为 false

    postcssNormalize({
     forceImport:true});

    PAR  USE  bro  浏览  browsers  nor  
    相关文章