CSS3 PIE – делаем Internet Explorer современным

K_E_V_in    Верстка     CSS, htacces, html, IE, php, библиотека, бот, проект, сервер, файл, фон, эффект

HTML5 и CSS3 плотно ворвались в жизнь разработчиков. Эти технологии позволяют очень многое реализовывать без использования дополнительной графики. Но у них есть одна неприятная особенность: до сих пор IE отказываются понимать эти технологии. Но благо, есть решение: простенькая библиотека CSS3 PIE!

CSS3 PIE позволяет IE корректно отрабатывать некоторые возможности CSS3:

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

Использование CSS3 PIE

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

Обнаруженные проблемы CSS3 PIE и их решения:

• Возможны проблемы при применении 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 файл. Примерно так:

  1 2 3

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

Технология работы

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

Многие организации пишут новости компаний с целью привлечения новых партнеров и даже клиентов, так что и Вы пишите.

Понравилась заметка? Поделись!