웹 호환성 css 속성(벤더 프리픽스)

css속성을 쓰다보면 -webkit-, -moz- 이렇게 생긴애들이 있다.

'-' 기호를 쓰는 이유는

벤더 프리픽스라고 검색해보면 다음과 같다.

주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때

이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.

 

특정 브라우저에서만 지원되는 css 속성을 사용하기 위해 쓴다고 보면 된다.

 

결국 호환성 문제인데

scss를 쓰면 컴파일 되면서 css 파일에 자동으로 생기는데

css 파일을 쓰고 있다면 웹 호환성(크로스 브라우징)을 위해서 써주는게 좋다.

 

파이어폭스를 제외한 신형 데스크탑, 모바일 브라우저는 모두 -webkit-을 사용한다고 생각하면 되고,

webkit 기반의 엔진을 공통으로 사용하기 때문에 벤더프리픽스를 따로 붙일 필요는 없다.

각각 지원하는 브라우저는 아래와 같다.

 

-webkit- : 크롬, 크롬 for Android, 사파리, 사파리 for IOS, 오페라 신버전, 파이어폭스 for IOS, 안드로이드 내장 브라우저

-moz- : 파이어폭스

-o- : 오페라 구버전

-ms- : 인터넷 익스플로러, 구형 엣지

 

벤더 프리픽스가 주로 사용되는 속성은 transform, transition, animation, gradient 정도가 있다.

 

표준 속성의 적용을 우선해야 하기 때문에 표준 속성을 제일 하단에 명시한다.

ex)

 -webkit-transform: rotateX(360deg);
          transform: rotateX(360deg);

 

 

** vsc 확장팩 

Autoprefixer

 

 커맨드창을 열고(ctrl + shift + p  또는 F1키)

Autoprefixer: Run을 쳐서 실행하면 자동으로 입력된다.

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer

Autoprefixer - Visual Studio Marketplace