→ При разработке сайта лендинг в подарок! ЖМИ! ←
Янв
25

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

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

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

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

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

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

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

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);
}

Обнаруженные проблемы 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-объект, в котором рисуется необходимый графический эффект. Затем полученный объект подставляется на место целевого элемента абсолютным позиционированием.
Многое почерпнуто отсюда.

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

Прокомментировать

Рубрики

Наши услуги

В прямом эфире