css 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에
속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분해야 한다.
이를 벤더 프리픽스라고 한다.
표준 규약이 만들어졌더라도 이전 버전의 브라우저 사용자를 고려해 계속 브라우저 접두사를 붙여 사용하기도 한다.
대표적인 예로
transition/transform/border-radius/text-shadow/box-shadow/background:linear-gradient 등이 있다고 하는데..
caniuse로 확인해보면 대부분 표준으로 자리잡은거 같다.
주로 사용하는 브라우저 접두사
| 접두사 | 설명 |
| -webkit- | 사파리, 크롬 - 웹키트 방식 브라우저용 |
| -moz- | 모질라, 파이어폭스 - 게코 방식 브라우저용 |
| -o- | 오페라 브라우저 |
| ms- | 마이크로소프트 인터넷 익스플로러 |
사용 순서
각 브라우저 접두사를 붙인 속성을 먼저 쓰고 표준이 정해진 후 사용할 표준 속성을 맨 마지막에 사용한다.
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
그런데 스타일 속성을 사용할 때마다 일일이 브라우저 버전별료 사용가능한지 확인하는 것은 귀찮은 일이다.
그래서 아래와 같은 방법들로 좀 더 편리하게 사용할 수 있다.
브라우저 접두사 자동으로 붙이기
'prefix-free'라는 자바스크립트 파일을 이용하면 매번 브라우저 접두사를 붙이지 않고도 편리하게 css3 속성을 사용할 수 있다.
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Test drive Test the prefixing that -prefix-free would do for this browser, by w
projects.verou.me
'autoprefixer'은 벤더 프리픽스를 자동으로 추가해준다.
Autoprefixer CSS online
include comment with configuration to the result Select result You can also see which browsers you choose by filter string on browserl.ist Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules
autoprefixer.github.io
크로스 브라우징을 할 수 있는 방법 - SASS
옵션에서 벤더 프리픽스 사용을 사용해놓으면 저절도 벤더 프리픽스를 적용해 준다고 한다.
참고
두잇 html5, css3 웹표준의 정석
'Frontend > CSS' 카테고리의 다른 글
| [SASS] 변수 선언하고 사용하기 (0) | 2021.09.22 |
|---|---|
| [CSS] 웹폰트 변환 사이트 (0) | 2021.09.22 |
| [CSS] 캐스케이딩 스타일 시트 (0) | 2021.09.22 |
| [CSS] css 기본 , 인접형제 , 일반형제 , 자식 선택자 (0) | 2021.09.15 |
| [CSS] css 속성 선택자 (0) | 2021.09.15 |
