여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 크로스 브라우징 접두어
크로스 브라우징 접두어
7개월전 작성
8개월전 수정
웹 표준에 포함된 스타일 시트가 아닌경우
벤더 프리픽스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>
기본 예시
참고
Mingg`s Diary
밍구
공부 목적 블로그