autoprefixer 기본

개요

대상 브라우저를 설정하면 필요/불필요한 벤더 접두사를 추가/삭제합니다.

CSS 처리. Sass를 사용하는 경우 변환 후 사용

PostCSS의 기능으로 작동

소개

gulp에서 Sass와 함께 사용되는 샘플

설치

npm install gulp gulp-sass gulp-postcss autoprefixer --save-dev

gulp

gulpfile.babel.js

import gulp from 'gulp';
import sass from 'gulp-sass';
import postcss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
// import cssMqpacker from 'css-mqpacker'; // Post-css の他パッケージを使う場合

const paths = {
  css: {
    src: '/src/style.scss', // ソースファイル
    dest: '../' // 出力ファイル
  }
};

export function css() {
  return gulp.src(paths.css.src)
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(postcss([
      autoprefixer({ grid: true }), // CSS-Grid を使うなら
      // cssMqpacker() // PostCSS の他の処理があれば追記
    ]))
    .pipe(gulp.dest(paths.css.dest));
}
css.description = '変換：SCSS → CSS'; // npx gulp --tasks で注釈を表示

대상 브라우저 설정

.browserslistrc, 또는 package.json 에 기술한다.
(대상 브라우저 추출은 Browserslist에서 구현 됨)

gulpfile.babel.js와 같은 위치에 .browserslistrc를 만들고 대상 브라우저를 작성합니다.
쓰는 방법은 browserslist/browserslist을 참조.

> 0.5% in JP
Firefox ESR

b 길 w 등 rl. 이 st 에서 테스트 할 수 있으며 설명에 해당하는 프라우저 목록을 확인할 수 있습니다.
.browserslistrc 편집. 없으면 창조한다. autoprefixer 등을 사용하고 있으면, 이미 있을 것. b 길 w 등 rl. 이 st

> 0.5% in JP
Firefox ESR

덧붙여서 위의 설정이라면 다음 브라우저를 지원합니다.
일본에서 94.43%를 커버하고 있다.

Chrome6725.38%

Chrome6613.68%

Chrome490.41%

Edge170.55%

Edge160.27%

Firefox602.62%

IE110.63%

Safari11.10.77%

Safari10.10.11%

Firefox603.24%

Firefox52

Chrome for Android6737.51% (이하 모바일)

Android Browser4.40.75%

iOS Safari11.3-11.43.92%

iOS Safari11.0-11.20.93%

iOS Safari10.30.41%

iOS Safari10.0-10.20.18%

iOS Safari9.3

Tips

점검

npx autoprefixer --info현재 설정에서 대상 브라우저, 속성 등을 표시합니다.

IE가 CSS-Grid와 호환되도록하려면

기본적으로 꺼져 있으므로 활성화autoprefixer({ grid: true })
grid-gap도 대응해 주고, 위치 설정도 적절하게 변환해 주는 grid-template-areas로 쓰는 것이 좋다.
참고 : CSS Grid Layout Module(IE 대응) | CodeCode

특정 장소에 autoprefixer 를 통하고 싶지 않은 경우

/* autoprefixer: off */ 에서 다음 블록이 무시됨
Sass와 함께 사용할 때 Sass가 'compressed'로 설정하면 코멘트를 지우지 않도록 /*! autoprefixer: off */

/* autoprefixer: ignore next */에서 다음 행은 무시됩니다.

참고 기사

autoprefixer - npm

browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

CSS Grid Layout Module(IE 대응) | CodeCode