vendor-prefix 개념 및 해결방안

vendor prefix

CSS3 표준안은 아직 확정되지 않았기 때문에 표준이 되지 않은 속성은 모든 브라우저에서 동일한 효과가 적용되지 않는다. 

이때 브라우저에 따라 다른 접두어를 붙이는 방식으로 속성을 적용하는데, 이를 'verdor prefix’라고 말한다.

-webkit-border-radius: 1px;       // 사파리, 크롬
-moz-border-radius: 1px;          // 파이어폭스
-o-border-radius: 1px;            // 오페라
-ms-border-radius: 1px;           // 익스플로러
border-radius: 1px;               // CSS3 표준속성

브라우저는 순서대로 해당 속성을 읽기 시작하므로 호환성을 위해서 접두어가 붙은 속성들을 먼저 작성해주고 표준 속성을 마지막에 작성해 준다.

여기서 문제가 되는게, 표준이 되지 않은 속성마다 prefix를 붙이게 되면 css파일이 복잡해지고 크기도 커지게 된다. 더욱이 추후 브라우저들이 표준속성을 지원하게 되면 prefix가 붙은 속성들은 무시하고 표준속성만 읽게 되므로, 해당 속성을 찾아 prefix를 삭제해줘야 하는 번거로움도 있다.

이런 문제를 해결할 수 있는 방법이 있다.

1. prefix free

'prefix free’라는 자바스크립트 파일을 연결하여 스크립트가 자동으로 prefix를 붙여주도록 하는 방식이다.

css3 표준안이 완전해지면 스크립트 파일만 삭제해줌으로써 일일이 찾아서 삭제하는 것보다 쉽게 삭제 가능한 장점이 있다.

여기에서 다운받아 사용하면 된다.

스크립트 파일을 적용해본 결과 인스펙터(Inspector)에서 prefix가 적용된 것을 확인할 수 없었다. 

2. autoprefixer

'autoprefixer'는 vendor prefix를 작성하지 않아도 'Can I Use'의 css에 규칙에 따라 prefix를 추가해주는 플러그인이다. 트위터에서 사용하고 있고 구글에서 추천한다고 한다.

autoprefix를 사용하기 전에 postCSS를 추가해줘야 한다.

'postCSS'는 css를 분석해주는 툴이다.

사용법

$ npm install --save-dev postcss-loader
$ npm install -g autoprefix

// webpack.config.js
module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

// postcss.config.js 파일 없이 webpack.config.js에 autoprefixer 모듈 같이 설정
module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loaders: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader"
                ]
            }
        ]
    },
    postcss: () => {
        return [
            // require('precss'),
            require('autoprefixer')
        ];
    }
}

위와 같이 적용 후 번들링해주면 pure css로 작성된 내용에 prefix가 붙은 것을 확인할 수 있다.

위 사이트에서는 pure css에 대해서 autoprefix를 적용하면 어떻게 변하는지 autoprefixer demo에서 테스트도 가능하다.

autoprefixer Doc와 postCSS Doc에서 더 자세한 내용을 확인할 수 있다.

webpack 설정파일에 적용해 번들링 해주기 때문에 웹페이지 인스펙터에서 적용된 prefix도 확인 가능하다.

참고자료

Autoprefixer Doc

PostCSS Doc

postcss-loader Doc

HTML5 Cross Browser Polyfills - HTML5 크로스 브라우징을 위한 polyfills

http://webdir.tistory.com/328