CSS 접두사 (CSS Prefix, webkit, moz, ms, o) 가 의미하는 것은?

CSS 접두어 (CSS prefix)

• CSS 접두어에는 -webkit-, -moz-, -ms-, -o- 등이 존재한다.
• CSS 속성이 여러 브라우저에서 작동하도록 하는데 이용된다.
• 각 브라우저에는 CSS 를 해석하고 웹페이지를 렌더링하는 엔진이 있다.
• 모든 엔진이 CSS 를 같은 방식으로 해석하지는 않는다.
• 특히 실험적인 기능이나 새로 등장하는 기능들에 대해서는 더 그렇지 않은데, CSS 접두어는 이러한 경우에 중요한 역할을 한다.

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

• -webkit-: 크롬, 사파리, 새 버전의 오페라 브라우저에 대한 접두어이다. iOS 환경에서의 거의 모든 브라우저에 대해서도 해당한다.
• -moz-: 파이어폭스에 쓰이는 접두어이다.
• -ms-: 마이크로소프트의 브라우저에 쓰이는 접두어이다. 인터넷 익스플로러나 오래된 버전의 엣지 브라우저에 해당한다.
• -o-: 오래된 버전의 오페라 브라우저에 해당한다.

-webkit-

• WebKit 혹은 Blink 렌더링 엔진에서 사용되는 접두어이다.
  • 크롬, 사파리, 새 버전의 오페라 브라우저에 적용된다.
• 아직 확정되지 않은 CSS 스펙을 사용하고 싶은 개발자들이 사용한다.

-webkit-border-radius: 10px;

-moz-

• Gecko 렌더링 엔진에서 사용되는 접두어이다.
• 용도는 동일하게 아직 확정되지 않은 CSS 스펙을 사용하고 싶은 개발자들이 사용한다.

-moz-border-radius: 10px;

-ms-

• Trident 혹은 EdgeHTML 렌더링 엔진에서 사용되는 접두어이다.
• IE 혹은 옛버전의 Edge 브라우저에 적용된다.

-ms-border-radius: 10px;

-o-

• Presto 렌더링 엔진에서 사용된다.
• 오래된 버전의 오페라 브라우저에 적용된다.

-o-border-radius: 10px;

현대 시대에 CSS 접두어가 갖는 의미

• CSS 사양 표준화가 점점 더 잘 이루어지며 접두어의 필요성이 점점 줄어들고 있다.
• 그러나 특정 상황, 구형 브라우저와의 호환성을 보장하는데는 여전히 중요하다.
• 한가지 주의할 점은 항상 접두사가 없는 버전의 속성도 포함해야 한다는 것이다.
  • 이렇게 대비해두면 프로퍼티가 표준이 되어 접두사가 더이상 필요하지 않은 때가 되어도 CSS 가 잘 적용된다.
  • 접두사가 없는 프로퍼티는 맨 마지막에 나열되어야 해당 프로퍼티를 이해하는 브라우저에서 접두사가 있는 버전을 재정의할 수 있다.
• 보통은 이러한 접두사를 모두 챙기기는 귀찮으므로 Autoprefixer 와 같은 도구를 사용한다.

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