웹 표준에 포함된 스타일 시트가 아닌경우
벤더 프리픽스Vendor Prefix
를 추가하여 사용할 수 있다.
벤더 프리픽스Vendor Prefix
가 자동으로 추가되는 라이브러리를 -prefix-free Break free from CSS prefix hell!에서 보고 이용할 수 있다.
그렇지 않다면 사용할 CSS 입력하면
벤더 프리픽스Vendor Prefix
를 자동으로 추가하여 CSS 코드 만들어주는 Autoprefixer CSS online도 이용할 수 있다.
크로스 브라우징
웹 사이트 또는 웹 응용 프로그램이 서로 다른 브라우저에서 작동하고 브라우저 기능이 없거나 부족할 때 성능이 저하되지 않게 크로스 브라우징 접두어를 이용하여 의도한대로 나오게 한다.
크로스 브라우징 접두어
Chrome
:
-webkit-
Microsoft Edge
:
-webkit-
Naver Whale
:
-webkit-
Safari
:
-webkit-
Opera
:
-o-, -webkit-
Firefox
:
-moz-
IE
:
-ms-
가장 마지막에 접두어 없는 CSS 코드를 입력한다.
코드
기본 CSS
.example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
크로스 브라우징 접두어 추가한 CSS
.example {
display: -ms-grid;
display: grid;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: -o-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}
HTML
<div class="example"></div>
기본 예시
참고
Html5 & CSS3 - 브라우저 접두사
CSS 크로스브라우징이란? CSS 접두어 사용법
-prefix-free Break free from CSS prefix hell!
Autoprefixer CSS online
공부 목적 블로그