CSS3 PIE или «современный» IE

Это статья для тех кто хочет заставить IE6,7,8 и т.д. понимать border-radius, box-shodow и так далее, но всякие корявые методы не работали. В том числе и не получалось запустить всем известный "PIE"!!!

Если вы еще не слышали что такое HTML5 и CSS3, то вы многое потеряли. Просто посмотрите на презентацию и почувствуйте всю их силу и мощь. Благодаря третьему css можно без особых затруднений реализовать такие дизайнерские задумки, которые раньше казались наказанием.
Только тема совсем не о том, а о печальной стороне ситуации: у нас есть IE, которые не поддерживает ни CSS3, ни HTML5. Однако в нашей печали есть лучик света: CSS3 PIE.

CSS3 PIE или Progressive Internet Explorer это дополнительный движок (модернизация) для ИЕ, разработанный Джейсоном Джонстоном. Он позволяет IE понять некоторые возможности CSS3, а именно:

CSS3 PIE или Progressive Internet Explorer это дополнительный движок (модернизация) для ИЕ, разработанный Джейсоном Джонстоном. Он позволяет IE понять некоторые возможности CSS3, а именно:

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

Как использовать PIE

Для начала нужно скачать его. Например здесь. Затем добавляем PIE.htc к себе в проект. Теперь элементам, для которых необходимо использовать одно из вышеописанных свойств, прописываем behavior: url(path-to/PIE.htc). Вот так это будет выглядеть для закругления:

CSS

.rounded {
    border: 1px solid #000;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    behavior: url(PIE.htc);
}

Готово! Смотрим и радуемся. Не поленитесь посмотреть в IE

Известные проблемы

• Возможны баги если применять PIE к элементу с position:static
• Если используется относительный путь к pie.htc, то он должен быть указан относительно html файла, а не файла стилей
• Работают только сокращенные варианты атрибутов. То есть border-radius cработает, а border-top-right-radius уже нет.
• PIE меняет свойство hasLayout в IE
• Работает не для всех элементов. Если есть проблемный элемент, оберните его в div и примените PIE к div.
• PIE.htc требуется правильный content-type заголовок. Файл .htc должен передаться с заголовком text/x-component. Как правило достаточно поправить настройки сервера. Если же не получается, то в файле .htaccess необходимо добавить (или раскомментировать) строку AddType text/x-component .htc.
  Если же нет возможности менять конфигурацию сервера, то воспользуйтесь файлом PIE.php, который прилагается в том же дистрибутиве. Его необходимо положить в тот же каталог где и PIE.htc но подключать уже .php файл:

  CSS

  .rounded {
      behavior: url(PIE.php);
  }
  

Подробнее о возможных проблемах

Как PIE справляется

Все возможности, поддерживаемые PIE относятся к графике. Для их эмуляции PIE использует VML. Создается VML-объект, в котором рисуется необходимый графический эффект. Затем полученный объект подставляется на место целевого элемента абсолютным позиционированием.