Учим Internet Explorer понимать CSS3

22 июля 2010 года, Размещено в категории: HTML / CSS

Internet Explorer CSS3

Наверное для всех не будет секретом, что Internet Explorer не поддерживает CSS3, и это очень хре.ово для веб-мастеров.

Сейчас для того, чтобы работали функции CSS3 в IE 6-8, веб-мастера используют различные фильтры, но это сильно геморройной способ, и получаем много лишнего кода в файле style.css.

Я предлагаю гораздо более простой способ использовать, вместо фильтров, для того, чтобы Internet Explorer поддерживал CSS3 нам нужно просто подключить один файл в style.css, и наш Internet Explorer изучит CSS3, а теперь подробнее.

PIE (Progressive Internet Explorer) - по этой ссылке вам нужно будет скачать файл (PIE.htc), его и нужно будет подключить к нашему файлу style.css чтобы Internet Explorer стал понимать CSS3.

Чтобы подключить файл, нужно его переместить в корневую папку сайта, и прописать код в нужном месте в  файле style.css:  behavior: url (PIE.htc.)
Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(PIE.htc);

Если вы все правильно сделаете, тогда ваш Internet Explorer 6-8 станет понимать такие CSS3 функции как:
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient
- background image

Проект PIE (Progressive Internet Explorer) пока находится на стадии разработке, поэтому ожидать большее количество доступных  функции CSS3 нужно в скором времени.




Интересно будет почитать:



39 комментариев

    • Webchester

      9 лет назад Ответить

      фывфыв:
      Что именно не работает и не получается у Вас, опишите.
      Возможно мы не правильно подключили файл??
      Файл PIE.htc должен быть в той папке, где и ваш style.css

  • Тимур

    9 лет назад Ответить

    behavior прописывается один раз в файле стилей в конце? Так?
    Или каждый раз при использовании новых атрибутов?

    • Webchester

      9 лет назад Ответить

      Тимур:
      Подключаем к тому «#» или классу в котором используем функции CSS3, то есть несколько раз приходится подключать.

  • f0rmat1k

    9 лет назад Ответить

    Используйте position:relative и z-index:0 и все заработает

  • Егор

    9 лет назад Ответить

    У меня локально всё отлично работает, а вот при выгрузке на сервер — 0 реакции, проверял пути, регистры и т.д. — ничего не помогло. Не подскажете в чём дело? 🙂

  • Леша

    9 лет назад Ответить

    такое дело, хотел поставит PIE на вордпресс, как только его подключаю сразу выдает ошибки у не хочет заходить вообще ни на какую страницу, пишет: «Когда на веб-узле возникает сбой, Internet Explorer пытается восстановить узел. После двух попыток действия по восстановлению прекращаются, чтобы предотвратить бесконечный цикл.» Наверное какая-то несовместимотсь с движком, даже не пойму что случилось…

  • Леша

    9 лет назад Ответить

    пишет что ошибка при востановлении веб-узла

    Подскажиме может нельзя использовать PIE на разного рода движках???

  • Webchester

    9 лет назад Ответить

    Леша:
    Я только что пробовал на WP3, все работает, вы где-то не правильно что-то подключили. Файлы с PIE должны быть в одной папке с файлом style.css

  • Леша

    9 лет назад Ответить

    ну все правильно WP у меня Версия 3.0.1, файлы я правильно подключаю, просто когда пути неправильные указываю, то все работает нормально, а как только прописываю как надо сразу же какая-то несовместимость, ну в общем я для ИЕ сделал фильтрами, и кстати довольно таки неплохо смотрится.

  • Леша

    9 лет назад Ответить

    может быть проблема с самой темой WP, тема у меня «my-white-theme», вроде очень простая.

  • Scr1pt1k

    9 лет назад Ответить

    behavior: url(/PIE.htc); — слеш лишний. Осел не воспринимает.

    Надо behavior: url(PIE.htc); если рядом со стилями лежит.

  • hellga

    9 лет назад Ответить

    Может кому пригодится. У меня PIE.htc не заработал, пока я не добавила в .htaccess строку AddType text/x-component .htc

  • Webchester

    9 лет назад Ответить

    Я с тобой полностью согласен Джобс 🙂 но как это донести до простых пользователей, что IE это говно??

  • Shepeleva

    9 лет назад Ответить

    Помогите некачает фаил PIE.htc искала в нете но нигде почемуто некачает если есть у кого скиньте на мыло плиз archi_ukr@mail.ru

    • Webchester

      9 лет назад Ответить

      Shepeleva:
      В статье есть ссылка на официальный сайт, там и скачайте PIE.

  • Крис

    9 лет назад Ответить

    Все заработало, только в ие не отображалась верхняя часть бокса. Добавила position:relative и все ок 🙂

  • Андрей

    9 лет назад Ответить

    Всё заработало только после того, как я прописал в style.css абсолютный путь к файлу PIE (http://www и тд). Почему — не знаю.

  • ipnch

    9 лет назад Ответить

    Спасибо за подготовленный материал. Все работает.

  • Сергей

    9 лет назад Ответить

    пытаюсь подключить к Joomla, куда я только этот файл не закидывал, прописывал все возможные пути — работать не желает.

    • Webchester

      9 лет назад Ответить

      Сергей:
      Добавите в .htaccess строку AddType text/x-component .htc должно помочь.

  • Андрей

    9 лет назад Ответить

    хм.. возможно я позновато, но проблему подключения в WP3 решил так

    behavior: url(wp-content/themes/pochemu/PIE.htc);

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы:

Метки: , ,