PIE - Расширение для Internet Explorer 6, 7, 8 версий частично реализующее поддержку некоторых свойств стандарта CSS3. В список свойств реализованных в PIE входят:

  • скругление углов элементов (border-radius)
  • тень блоков (box-shadow)
  • фоновые изображения для границ элементов (border-image)
  • множестенные фоновые изображения
  • линейный градиент в качестве фонового изображения

Все возможности, поддерживаемые PIE относятся к графике и для их эмуляции PIE использует VML (англ. Vector Markup Language - язык векторной разметки для описания векторной графики). В необходимое место подставляется VML-объект, в котором отображен необходимый графический эффект.

Библиотека PIE распространяется как в качестве .htc файла, который использует возможность Internet Explorer обрабатывать поведения для стилей, используя свйоство behaviour, так и в качестве JavaScript бибилотеки. Обе версии имеют своим достоинства и недостатки, хотя разоработчики рекомендуют использовать .htc версию.

  PIE.htc PIE.js
Домен где находится html страница любой
MIME-заголовок необходим корректный MIME-заголовок
text/x-component		 неважно, браузер понимает JavaScript файлы и с неправильным mime типом
Подключение дополнительное css свойство JavaScript код
Загрузка и обработка Асинхронная Последовательная (отрабатывается после загрузки всей страницы)
Применение Автоматическое для всех элементов, удволетворяющих css правилам Невозможность автоматического применения для динамически добавленных DOM элементов
Использование

.css 

#element {
  background: #aaaaaal
  padding: 10px;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

  behavior: url(PIE.htc);
}

.css 

#element {
  background: #aaaaaal
  padding: 10px;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

  
}

.html 

<script type="text/javascript" src="PIE.js">
</script>
<script>
$(function() {
  $('.rounded').each(function() {
    PIE.attach(this);
  });
});
</script>

 

border-radius, -pea-border-radius

PIE полностью поддерживает реализацию свойства border-radius из спецификации CSS3 Backgrounds and Borders. Правда обрабатывается только ссокращенный синтаксис - border-radius (свойства отдельных углов border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius не обрабатываются). Так же библиотека понимают свойство -pie-border-radius и если присутствуют обе записи, то предпочтение будет отдаваться свойству -pea-border-radius.

box-shadow, -pie-box-shadow

border-image

background, -pie-background

-pie-watch-ancestors

-pie-png-fix

Данное свойство позволяет автоматически решить проблему IE6 с отображение полупрозрачных PNG файлов.

-pie-lazy-init

Данное свойство, позволяет отложить обработку все элементов на странице при загрузке, а ограничиться только видимой областью. Таким образом возможно сократить время первичного отображения. Остальные элементы буду инициализироанны только после того, как попадут в видимоу область.

-pie-poll

 

 

Домашняя страница: http://css3pie.com/

Бибилотека: http://css3pie.com/download-latest

Репозитрий: https://github.com/lojjic/PIE

Twitter: http://twitter.com/css3pie