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


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

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

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

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

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

CSS

1
2
3
4
5
6
7
8
.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

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

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

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

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

Итого

Это замечательный плагин! Несмотря на то, что еще есть немало недоработок. Однако учитывая, что он относительно свежий, надеюсь в дальнейшем он будем развиваться и поддерживать все больше CSS3 свойств. Скажем же «Спасибо!» Джейсону Джонстону :)

Пользуйтесь!

 
Возможна такая ситуация:

PIE.htc подключился и во всех браузерах скругления работают, кроме ie8. Причем, сам блок работает, но не отображает рамку и фон редактируемого объекта (даже дефолтные значения).

Причину нашла тут:
если у внешнего окаймляющего объекта задано описание:

.myclass:after {
content: » «;
}
.myborder {
описываем border
}
————————-

Тут пытаемся сделать рамку

PIE ругается на ‘content’

Дмитрий сказал:
При открытии страницы, рамка вообще пропадает. Можно успеть увидеть, когда она появляется без скругления, а потом, когда скрипт начинает работать, она пропадает.

Ошибок при этом никаких не показывается

 

Хотя сейчас проверил еще раз, скругление происходит: прямоугольная рамка пропадает, на ее месте появляется скругленная … а потом пропадает и она тоже …

Есть какие то требования к тому диву, который нужно обрисовать такой рамкой

Всё, понял … надо было

position: relative;

z-index: 2;

добавить к диву. Рамка просто пряталась вниз до этого