PIE - делаем IE прогрессивным браузером

CSS3 предлагает много отличных и удобных нововведений в области использования стилей. Скругленные углы, мягкие тени, градиентная заливка и так далее. Такие свойства особенно востребованы, так как они помогают создавать привлекательные сайты без трудоемких операций (например, подготовки спрайтов) и без дополнительной разметки, библиотек JavaScript и других трюков.

Но из-за отсутствия поддержки таких свойств в Internet Explorer мы должны набраться терпения и воздерживаться от их использования. При этом нужно продолжать использовать устаревшие методы.

 

Или есть выход?

PIE (Progressive Internet Explorer - прогрессивный Internet Explorer) позволяет IE распознать и корректно вывести некоторые свойства CSS3. Например, если вы используете следующие правила CSS:

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

То в результате вы получите прекрасные скругленные углы в любом современном браузере, за исключением IE 6, 7, или 8, которые будут выводить простые прямоугольники. Но стоит добавить следующее правило к коду CSS, и ситуация поменяется в лучшую сторону:

#myElement {
    ...
    behavior: url(PIE.htc);
}

В настоящий момент PIE полностью или частично поддерживает следующие свойства CSS3:

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

На нашем сайте сохранена версия PIE 1.0 beta 3. На сайте проекта можно скачать текущую версию посмотреть демонстрацию работы скрипта (конечно же в IE).

Для использования нужно:

1. Загрузить файл PIE.htc в папку своего проекта.

2. В тех наборах правил, где используется CSS3 добавить:

behavior: url(путь_к_файлу/PIE.htc);

3. Проверить работу проекта в IE.

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^