CSS 접두사 (CSS Prefix, webkit, moz, ms, o)

CSS 접두사란?

• CSS 접두어에는 -webkit-, -moz-, -ms-, -o- 등이 존재하며, 이들 은 각 브라우저에서 css 속성이 적용되도록 하는데 이용됨

• 각 브라우저에는 CSS 를 해석하고 웹페이지를 렌더링하는 엔진이 있으며, 모든 엔진이 CSS 를 같은 방식으로 해석하지는 않는다

• 따라서 각 브라우저 환경에 맞게 접두어를 사용해서 해당 브라우저의 엔진에 맞게 CSS를 해석하도록 하는 것

각 접두어에 매칭되는 브라우저

• -webkit- = 크롬, 사파리, 새 버전의 오페라 브라우저에 대한 접두어 iOS 환경에서의 거의 모든 브라우저도 해당

• -moz- = 파이어폭스에 쓰이는 접두어

• -ms- = 마이크로소프트의 브라우저에 쓰이는 접두어, 인터넷 익스플로러나 오래된 버전의 엣지 브라우저에 해당

• -o- = 오래된 버전의 오페라 브라우저

접두어 사용 예시

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;

• 위와 같이 속성앞에 붙여서 사용

• CSS 사양 표준화가 점점 더 잘 이루어지며 접두어의 필요성이 점점 줄어들고 있지만, 특정 상황이나 옛 브라우저와의 호환성을 보장하기 위해 접두어를 사용하는 것은 중요

• Autoprefixer 라는 라이브러리를 활용해서 이 접두어 수동 설정을 자동으로 변환해 줄 수 있다고 하는데 현재 내가 사용하는 styled-Component 방식은 이 자동변환 기능이 내장되어 있어 따로 설치할 필요는 없는 듯 함