Xiper

CSS3 PIE

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

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

Как 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.
  • свежий плагин — много еще недоработок, поэтому может не всегда подойти.

Подытожим

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

Материалы

  • Сайт плагина

По теме