Rev. 2.73

css3pie.png

PIE(Progressive Internet Explorer)는 인터넷 익스플로러 6-7-8에서 CSS3의 몇몇 속성들을 인식하고 출력하는 첨부파일(.htc)형식의 라이브러리입니다. 얼마 전에 소개했던 IE-CSS3와 마찬가지로 VML을 이용하며, behavior: url(PIE.htc);를 해당 속성에 작성하는 사용방법 역시 비슷합니다. 두드러진 차이점은 보다 많은 CSS3속성들을 지원하고 자바스크립트로 핸들할 수 있다는 것입니다.

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

그리고 추가적인 CSS3 속성들을 표현하기 위해 개발중이라고 합니다. IE-CSS3 프로젝트를 포크한 냄새가 강하게 풍깁니다만 언급은 없군요. 아무튼 멋진 프로젝트입니다. 그럴싸한 도메인으로 서비스 되는 것으로 보아 뭔가 공식화 되는 느낌이 드네요.

Mmmmm, pie.
CSS3 features
border-radius
box-shadow
linear-gradient
Options

Comments

이 고양이 사진은 모서리가 둥글지 않습니다.

IE-CSS3border-radius, box-shadow, text-shadow 속성을 그대로 이어 받아 htc 스크립트를 이용하여 표현해 줍니다. IE의 VML API를 이용하여 CSS3의 비주얼 효과를 표현하는 방법을 사용하기 때문에 CSS3와 동등한 수준의 결과물을 표현합니다. 특히, 속성들을 재작성 할 필요가 없다는 것이 아주 매력적이네요. CSS3를 지원하지 않는 IE(인터넷 익스플로러)에서 트릭을 이용하여 표현하는 방법이 여러가지 있습니다만 그중에서도 가장 괜찮은 솔루션으로 생각됩니다.

.box {
  /* Firefox */
  -moz-border-radius: 15px;
  /* Safari and Chrome */
  -webkit-border-radius: 15px;
  /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
  border-radius: 15px;

  /* Firefox */
  -moz-box-shadow: 10px 10px 20px #000;
  /* Safari and Chrome */
  -webkit-box-shadow: 10px 10px 20px #000;
  /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
  box-shadow: 10px 10px 20px #000;

  /* This lets IE know to call the script on all elements which get the 'box' class */
  behavior: url(ie-css3.htc);
}

filter 속성을 어줍잖게 사용하는 것 보다 낫군요. 다른 CSS3 속성들도 표현 가능해 지기를 기대합니다.

Comments