CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.
CSS3 promises to do away with all that! But as we all know, due to Internet Explorer's lack of support for any of these features, we must be patient and refrain from using them, and make do with the same old tedious techniques for the foreseeable future.
Or must we?
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. Consider, if you will, the following CSS:
#myElement { background: #EEE; padding: 2em; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } This results in a box with nicely rounded corners in any of today's modern browsers, except of course for IE 6, 7, or 8, which all display a square box. However, add the following single rule to that CSS:
#myElement { ... behavior: url(PIE.htc); } Now the exact same rounded corners appear in IE! That's all there is to it. No, really, I mean it.
PIE currently has full or partial support for the following CSS3 features:
•border-radius •box-shadow •border-image •multiple background images •linear-gradient as background image Other features are under active development.
이것은 모두 사각형 상자를 표시하는 IE6, 7, 8을 제외한 오늘날의 현대적인 브라우저들에서 둥근 모서리의 상자를 보여줍니다.그러나 다음과 같은 하나의 규칙을 css에 추가해야 합니다.#myElement { ... behavior: url(PIE.htc); } ie에서 이제 똑같은 둥근 모서리가 나타납니다. 파이는 현재 다음 CSS3 기능에 대해 전체 또는 일부를 지원합니다. * border-radius* box-shadow* border-image* multiple background images* linear-gradient as background image 다른 기능들은 활성화 개발 중에 있습니다.
