브라우저별 지원하는 CSS스타일의 범위가 다르므로, 퍼블리싱 작업을 할 때 이를 고려해야한다.
따라서 브라우저별 접두사를 사용하여 통일감있게 적용한 CSS가 보이게 한다.
하지만 매번 스타일을 정의 할 때마다 벤더 프리픽스(vendor prefix : 이전 버전의 웹 브라우저에도 적용 가능하게 하는 접두사)를 설정하면, 코드가 지나치게 길어진다. 또한 작업자가 일일히 생각하여 코드를 작성해야하기 때문에 일의 능률또한 늘어지기 마련이다.
해서 프리픽스를 지원하는 -prefix-free 플러그인을 연결해주기만 하면 ie9+, opera 10+, firefox3.5+, safari 4+, chrome, mobile safari, android browser 등 이상의 버전에서 지원이 가능하다.
해당 홈페이지
https://projects.verou.me/prefixfree/
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
해당 깃허브
https://github.com/LeaVerou/prefixfree
LeaVerou/prefixfree
Break free from CSS prefix hell! Contribute to LeaVerou/prefixfree development by creating an account on GitHub.
github.com
[적용 방법]
1. 홈페이지 방문 후, 왼쪽 버튼 클릭하여 해당 min.js 소스를 복붙한다.
2. 적용하고자하는 프로젝트에 js 파일을 추가(prefixfree.min.js)후, html head 태그 안에 link태그로 추가.
<script src="/js/prefixfree.min.js"></script>
3. transform(예시 스타일)을 해당 박스에 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="진뚜르">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js/prefixfree.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<title>grid</title>
</head>
<body>
<div class="test-box"></div>
</body>
</html>.test-box {
width: 150px;
height: 150px;
background-color: bisque;
transform : rotate(30deg) ;
}
[적용 확인]
1. ie9와 ie8로 에뮬레이션에서 버전을 변경했을 때 보이는 것으로 프리픽스 프리 플러그인 적용 유무를 확인해 볼 수 있다.
ie8
ie9
2. html 태그에 class '-ms-' 추가 유무로 적용을 확인해 볼 수 있다.
적용 전 : html 태그에 class '-ms-' 추가 안됨
적용 후 : html 태그에 class '-ms-' 추가 됨
'DEVELOP' 카테고리의 다른 글
| [plugin] Swiper.js 포커스 맞추기 (0) | 2021.06.18 |
|---|---|
| [HTML] table 속성 colspan, rowspan 정리 (0) | 2021.06.15 |
| [Javascript] 오늘 하루 팝업 닫기 (0) | 2021.05.21 |
| [css] 모바일 가로, 세로 모드 미디어 쿼리로 해결 (0) | 2021.05.10 |
| [css] display: table;로 정중앙 스타일 구현 (0) | 2021.04.27 |
