PIE.js (Progressive Internet Explorer)

해당사이트 - css3pie.com

PIE 란?

Progressive Internet Explorer의 약자로 CSS3가 적용되지 않는 경우에, 그 적용을 위해서 사용하는 javascript 라이브러리 입니다.

PIE 사용하기

PIE 다운로드 받기


css3pie.com 사이트에 가서 오른쪽 메뉴 download를 클릭하면 바로 다운로드 받을 수 있습니다.
압축을 풀면 아래의 이미지와 같이 압축 파일 안에 5개의 파일이 있습니다.


사이트의 document 항목이나 Demos and Examples Sites를 살펴보면 htc, js 형식으로 PIE를 적용할 수 있습니다.



htc 형식으로 PIE 적용하기

css 파일 내에서 PIE를 적용하는 방법입니다.
behavior property를 사용해서 그 값으로 PIE.htc를 불러옵니다.
아래의 예제의 경우 border-radius에 PIE를 적용하는 경우입니다.
잠깐 공식사이트의 설명을 보면 다음과 같습니다.

" PIE 는 현재 아래의 CSS3 특성을 IE6-9까지 전체 혹은 부분적으로 지원하고 있습니다.
    border-radius
    box-shadow
    border-image
    multiple background images
    linear-gradient as background image "
"추가로 IE9에는 border-image 와 linear-gradient를 지원합니다. IE9의 경우 다른 CSS3 특성은 이미 자체적으로 지원하고 있습니다."

							#myElement {
								background: #EEE;
								padding: 2em;
								-moz-border-radius: 1em;
								-webkit-border-radius: 1em;
								border-radius: 1em;
								behavior: url(PIE.htc); /* */
							}
						

IE9의 경우 background-image의 gradient 특성을 지원하는 예제를 보겠습니다.
아래의 예제를 보세요.

							#myElement {
								background: #CCC; /*fallback for non-CSS3 browsers*/
								background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
								background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
								background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
								background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
								background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
								background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
								-pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
								behavior: url(PIE.htc);
							}
						

상기 예제에서도 behavior 속성을 이용해서 그 값으로 PIE.htc를 호출합니다.
하지만 중요하게 봐야할 부분이 있습니다. 바로 "-pie-background" 입니다. PIE를 적용하기 위해서 "-pie-" prefix를 사용하고 있습니다.
또 한가지 background-image 단독 속성명을 사용하지 않고 background를 사용한다는 점도 기억해야 합니다.
아래의 설명 페이지를 참고합니다.
http://css3pie.com/documentation/supported-css3-features/



javascript로 PIE 적용하기

javascriipt로 PIE를 적용하는 방법을 알아봅니다. 참고 페이지는 아래와 같습니다.
http://css3pie.com/documentation/pie-js/
참고 페이지는 PIE 공식 사이트의 PIE javaScript edition이라는 페이지입니다.
페이지를 열어보면 javascript로 PIE를 적용하는 장단점에 대해서 나와 있습니다. 여기서는 그 부분은 그냥 넘어 갑니다.

우선 PIE를 적절한 폴더에 위치시켜 HTML 페이지에서 불러올 준비를 합니다.
PIE 압축 파일에 PIE.js라는 파일을 사용합니다.
그리고 아래와 같이 IE 조건 주석을 이용해서 script를 불러들입니다.

							<!--[if lt IE 10]>
								<script type="text/javascript" src="path/to/PIE.js"></script>
							<![endif]-->
						

상기의 조건 주석에 따르면 IE10버전 보다 아래의 버전에서 스크립트를 불러들이는 것으로 처리됩니다.
그리고 PIE를 원하는 element 요소에 attach() 메서드를 이용해 붙여 넣습니다.
아래의 소스는 모두 jQuery를 이용해서 작업합니다. 한번 볼까요?

							$(function() {
								if (window.PIE) {
									$('.rounded').each(function() {
										PIE.attach(this);
									});
								}
							});
						

상기의 소스는 window의 PIE 객체가 있는 지 검사를 하고 있으면 if 문의 실행 코드 블럭을 실행시키도록 합니다.
PIE 객체의 attach() 메서드를 이용해서 PIE를 적용하고자 원하는 곳에 attach 시킵니다.
jQuery 객체는 rounded라는 클래스 배열을 반환하고 그 반환된 객체의 각각에 대해서(each) PIE를 붙여넣습니다.

참고로 PIE 객체가 있는지 확인을 해봅시다.
head에 PIE.js가 불려 들려진 상태이므로 IE9의 개발자 도구 콘솔에서 !!window.PIE를 입력하여 객체가 있는지 확인을 해봅니다.
아래의 이미지와 같이 PIE 객체가 있음을 확인할 수 있습니다. 대문자 PIE를 입력해야 함에 주의하세요.



$.getScript()를 이용하여 PIE.js를 불러들이기

스크립트 태그의 소스 어트리뷰트를 이용해서 PIE.js를 불러들이는 것 말고 다른 방법으로 PIE.js를 적용하는 방법에 대해서 알아봅니다.
바로 jQuery의 $.getScript() 유틸리티 함수를 이용하는 방법입니다.
소스는 아래와 같습니다.

							if($.browser.msie && $.browser.version < 10) {
								$.getScript('js/PIE.js', function() {
									$('li.lava', '#navigation').add('#page-wrap').each(function() {
										PIE.attach(this);
									});	
								});
							};
						

첫번재 if 조건문을 보시면 jQuery 유틸리티 함수 중에 $.browser.msie 와 $.browser.version을 이용해서 브라우저가 IE이고 IE10 이하 버전일 경우에만 if문 실행 코드를 실행하도록 처리하고 있습니다.
조건이 true 일때, $.getScript()의 첫 번째 인자로 PIE.js의 호출 경로를 입력하고, 두번째 인자로 callback 함수를 작성하여 PIE를 attach 시킵니다.
처음 jQuery 확장집합에 더해서 또 다른 element에 적용하기 위해서 jQuery의 .add() 메서드를 이용해서 적용대상 확장집합의 범위를 확장합니다.