IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기

 

 

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기

 

지난 시간엔, ie6-8에서 html5 요소 적용하는 방법과, ie6-8을 ie9처럼 행동하게 만들기를 배웠습니다.

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

 

오늘 역시 여기에 이어지는 글입니다.

 

css3 속성들 중 박스를 꾸미는 속성 일부를 ie6-8에서 적용하는 방법입니다.

 

여러 가지 방법이 있겠지만, 가장 잘 알려진 것으로 CSS3 Pie가 있습니다..

 

http://css3pie.com

 

 

CSS3 PIE란?

 

PIE란  Progressive Internet Explorer(진보적 인터넷 익스프롤러)의 약자입니다.

 

PIE는 구 ie가 css3 속성을 표시하게 하는  IE 에 결부된 behavior 입니다.(크로스 브라우징이 아님)

 

현재 IE6부터 8까지 다음 CSS3 특징들을  일부 또는 전부 지원 합니다.

 

border-radius (축약 속성만 지원. border-top-left-radius 등은 지원하지 않음.)

box-shadow(현재 inset 키워드를 지원하지 않음)

border-image(IE6-8에서 'streth' 만 지원/ie9에서는 'repeat'와  'round' 또한 지원함)                  

 

multiple background images (여러 개의 배경 이미지 넣기)

linear-gradient as background image (배경 이미지에서 linear-gradient 적용)

 

 

IE7.js  VS  CSS3 Pie

 

IE7.js 파일(IE8/IE9.js 포함)은 IE 레이아웃 버그를 교정하고, 몇 가지 CSS3 선택자를 실행할 수 있도록 합니다.

 

하지만 CSS3 박스를 꾸미는 속성에 관한 부분은 포함돼 있지 않습니다. 

 

CSS3 PIE는 CSS3 선택자에 관한 부분은 없고, css3 속성 중 박스를 꾸미는 속성 지원이 핵심입니다.

 

그러니까 두 파일은 서로 겹치지 않게 다른 부분을 지원합니다.

 

CSS3 PIE 사용법

 

1. 아래 사이트로 이동 후 가장 최신 버전인 Download PIE 2.0 beta 1 파일을 다운받습니다.

 

http://css3pie.com/download/

 

 

 

 

2. 압축 풀기

 

압축을 풀면, pie의 세 파일이 있고(htc, php. js)

 

uncompressed가 있는데 uncompressed는  압축되지 않은 버전으로 용량이 조금 큽니다. 

 

htc 파일 vs javascrip 파일

 

*htc 파일 : IE5이상 버전을 위해 HTML 구성요소가(HTCs)는 동적인 html(DHTML) behavior처럼

               스크립트로 구성요소들을 실행하기 위한 메커니즘을 제공한다.
               HTC는 HTML 구성요소들(HTCs)를 규정하는 htc 구체적 요소들의 세트와 스크립을을 포함하는

               HTML 파일임.( 어렵죠;; ㅎㅎ)
*javascrip 파일 : css3 pie 사이트에선 현재 js 파일도 배포하고 있는데,

                        js 파일을 불러오려면 일부 자바스크립트를 쓰는 것이 필요하고,

                        파일이 로딩되는 동안 아주 짧은 시간이지만 스타일이 적용되지 않을 수 있어

                        사용을 권하지 않습니다. htc 파일은 비동기 로드 방식임.
                        js 파일을 이용하려는 분은 http://css3pie.com/documentation/pie-js/ 참조해주세요 

 

*php 파일: 사이트에 이에 대한 별도의 설명이 없네요.

 

 

 

우리가 사용할 파일은 2kb로 된 pie.htc 파일입니다.

 

 

3. pie.htc 파일을  본인 사이트에서 원하는 폴더에  업로드 합니다.

 

 

4. 적용방법 

 

우선 다음과 같은 css가 있다고 했을 때

 

div {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
     border-radius: 1em;
}

 

아래 빨간 색 코드를 추가합니다. 

div {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
     border-radius: 1em;

     behavior: url(PIE.htc);
}

 

*url() 안에 PIE.htc 파일이 있는 경로를 적습니다.

경로는 html 파일에 상대적인 주소여야 함(css 파일이 아니라)

 

 

 

 

5. css3 pie가 적용되지 않을 때

 

아래 링크  Known Issues(알려진 문제들)을 참조해 주세요.

 

http://css3pie.com/documentation/known-issues/