본문 바로가기

프로그래밍/HTML&CSS

벤더 프리픽스(vendor prefix)

벤더 프리픽스(vendor prefix)

  • 많은 스타일시트의 속성들이 표준으로 정의되면서 필요성이 줄어 들었지만 구형 브라우저(하위)를 맞춰주기 위함

[브라우저별 벤더 프리픽스 사용법]

브라우저 벤더 프리픽스
IE or Edge -ms-
Chrome -webkit-
Firefox -moz-
Safari -webkit-
Opera -o-
iOS Safari -webkit-
Android Browser -webkit-
Chrome for Android -webkit-

 

  • 사용할 css가 어느 브라우저까지 지원하는지 아래 사이트에서 확인 가능
 

Can I use... Support tables for HTML5, CSS3, etc

About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu

caniuse.com


Prefix Free 라이브러리

  • 라이브러리를 다운로드 하고, html에 include 하지만 하면 벤더프리픽스 없이 모든 css를 사용 가능
<script src="prefixfree.min.js"></script>
 

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

leaverou.github.io

 

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

text-shadow 속성  (0) 2020.05.19
float 속성  (0) 2020.05.19
위치 속성  (0) 2020.05.19
폰트 속성  (0) 2020.05.19
CSS 박스 & 이미지 속성  (0) 2020.05.18