Automatic vendor prefixing(자동 벤더 프리픽싱) 이란?

벤더 프리픽싱 

웹 브라우저의 종류는 다양하다. 인터넷 익스플로러, 크롬, 파이어 폭스, 사파리 등.. 
벤더 프리픽스란 이런 웹 브라우저들이 css 속성이나 기능을 실험적으로 지원할 때 사용하는 접두사이다. 

구글, 크롬, 사파리에서는 접두사로 -webkit을 사용하고, 인터넷 익스플로러는 -ms를 사용하고 그런 식이다.

(예시)

-webkit-border-radius: 10px; /* 크롬, 사파리 */
-moz-border-radius: 10px;    /* 파이어폭스 */
-ms-border-radius: 10px;     /* 인터넷 익스플로러 */
-o-border-radius: 10px;      /* 오페라 */
border-radius: 10px;         /* 표준 */

이렇게 하면 브라우저 간의 호환성을 보장하고, 새로운 기능이 표준화되기 전에 미리 사용할 수 있게 해준다는 장점이 있다. 

 

 

 

 

자동 벤더 프리픽싱 (styled-components)

 

styled-components는 자동으로 벤더 프리픽스를 추가해주는 기능을 내장하고 있다. 이를 통해 개발자는 추가 작업 없이도 다양한 브라우저에서 CSS가 제대로 동작하도록 할 수 있다. 

( styled-components의 라이브러리인 "autoprefixer"를 사용 )

예를 들어서, styled-components를 사용해서 이런 스타일 박스를 만들었다면, 

import styled from 'styled-components';

const Box = styled.div`
  display: flex;
  user-select: none;
  transition: transform 0.3s ease-in-out;
`;

자동으로 각 브라우저에는 vendor prefix가 추가된다. 

.Box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: -moz-transform 0.3s ease-in-out;
  transition: -ms-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}