CSS3 PIE Beta 5

CSS3 PIE Beta 5

PIE – скрипт (.htc-файл либо JavaScript-файл), позволяющий браузерам Internet Explorer 6-9 отрисовывать наиболее полезные CSS3 красивости: градиенты, тени, скругленные уголки.

Вышла PIE 1.0 beta 5, в которой исправлено большое количество ошибок и недочетов, а также добавлены некоторые вкусности.

Что изменилось?

  • Линейные градиенты в ИЕ9. Используется svg, поэтому стало возможным использовать rgba в градиентах. Также можно использовать в сочетании с градиентами background-size/position/repeat
  • Поддержка border-image в ИЕ9 (используется svg), а также улучшенная поддержка этого свойства в старых ИЕ — теперь корректно скрывается настоящая граница, и border-width будет работать, если не задан border-style
  • Исправлена ошибка при указании непиксельных значений элементу, в результате чего он не мог иметь дочерние элементы
  • background-origin и -clip корретно парсятся внутри -pie-background
  • Теперь padding у img-элементов рендерится корректно
  • Изменения стиля при срабатывании псевдо-классов :focus и :active теперь правильно обнаруживаются
  • Теперь можно использовать transparent как цвет
  • В ИЕ с отключенным VML-движком не появятся ошибки, и будут использоваться не-ксс-стили
  • Исправлены другие ошибки.

Возможные проблемы

Не забудьте правильно настроить сервер, чтобы он отдавал верный Content-Type для .htc

В .htaccess или httpd.conf пропишите:

AddType text/x-component .htc

Если у вас нет доступа к .htaccess (например бесплатный хостинг не дает его создать), вызываем .htc файл через PHP скрипт, отдавая правильный заголовок.

В CSS укажем путь до нашего скрипта:

.curved {
    border-radius: 5px;
    behavior: url("PIE.php");
}

А в файле PIE.php пишем примерно так:

<?php
header("Content-type: text/x-component; charset=utf-8");
include_once "PIE.htc";
?>

Теперь все должно работать как часы.

Если вы попытаетесь загрузить PIE с домена отличного от текущего — вылезет ошибка о том, что доступ запрещен. На локальной машине (без виртуального сервера) в IE без шаманства с бубном и настройками «браузера» работать не будет

Ссылки

Теги:

  • http://fotomemory.com.ua/ Сергей Навроцкий фотограф

    Огромное тебе спасибо! Работает лучше чем прописывать
    behavior: url("PIE.htc");