CSS3 PIE

Автор: Евгений Рыжков Дата публикации:

CSS3 дает мощные возможности разработчику такие как скругленные углы, тени, градиенты и т.д. Но так как не все популярные браузеры (IE6-8) в курсе о новых свойствах, реализация подобных дизайнерских задумок иногда превращается в кошмар. PIE помогает Internet Explorer понять некоторые вещи из CSS3. А если точнее, то вот эти:

border-radius;
box-shadow;
border-image;
множественные background'ы (-pie-background);
градиенты (linear-gradient);
rgba цвета.

Как PIE это делает

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

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

Качаем дистрибутив PIE, добавляем файл PIE.htc в свой проект. Указываем элементу, который должен понять одно из вышеуказанных свойств CSS правило behavior: url(path-to/PIE.htc):

.roundedEl {
	border: 1px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	behavior: url(PIE.htc);
}

Заметка

Нужно указывать правильный относительный или абсолютный путь к PIE.htc.

Демо пример.

Особенности

Все эти особенности касаются только IE.

изменение поведения элемента — применение PIE к элементу влияет на layout, что может вызвать баги. В основном исправляется добавлением свойств position: relative и/или zoom: 1. Иногда так же помогают такие же свойства прописанные родителю элемента.

не всегда работает для элементов-не контейнеров — таких как textarea, input, img. В некоторых случаях спасают некоторые фокусы: img можно заменить такой конструкцией

<div id="wrapImg" style="background-image: url(path-to/pic.png); width: 334px; height: 223px;"></div>

#wrapImg {
	border: 2px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	behavior: url(PIE.htc);
}

для input:

<div class="input">
	<input type="text" value="" />
</div>

.input {
	border: 2px solid #000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	behavior: url(PIE.htc);
	zoom: 1;
	float: left;
}
input {
	border: none;
	background: #fff;
}

проблемы с z-index могу возникнуть, если применять PIE к элементам с position: static. Решение — сделать элемент position: relative или же сделать родителя с position: relative и указать ему z-index. Оба способа могут привести к проблемам, но тут ничего не поделать.
относительный путь к PIE.htc нужно указывать относительно текущего html документа.
требуется правильный content-type заголовок: чтобы IE начал понимать behavior, .htc файл должен передаться с заголовком text/x-component. Больщинство серверов по умолчанию имеют такую настройку. Если же нет, тогда находим файл .htaccess и добавляем (раскомментируем) строку AddType text/x-component .htc.
Если по каким-то причинам нет возможности менять конфигурацию сервера (например, если сайт расположен на виртуальном хостинге), тогда можно воспользоваться PIE.php, который находится в дистрибутиве. Кладем его в тот же каталог, что и PIE.htc. Вызов PIE измениться на
```
behavior: url(PIE.php);
```
Данный скрипт просто отдает PIE.htc с правильным заголовком.
update by Егор Скорняков PIE не совместим с эмуляцией data:url через mhtml-включения.
update Не срабатывает для псевдоэлементов в IE8.
свежий плагин — много еще недоработок, поэтому может не всегда подойти.

Подытожим

Плагин замечательный несмотря на свою свежесть. Надеемся, что он поможет во многом развязать руки веб разработчику. А на скольок он реально хорош, покажет применение в «боевых» условиях.

Материалы

Сайт плагина

Xiper