Добавление поддержки свойств CCS3 в браузер Internet Explorer

10.11.2014 в 18:53, joey

Все долго ждали стандарта css3, где появились свойства, которые позволяли одной строкой решать многие трудозатратные задачи. Раньше чтобы сделать такие красивые вещи, как например, закругленные углы или тени, необходимо было использовать графику. Теперь все это будет работать лишь на css.

Одна досада, IE 6-9 как не видел закругленных углов, теней, градиентов, так и не видит.
Однако, есть решение, например подключить PIE.

Что такое PIE?

PIE (Progressive Internet Explorer – прогрессивный Internet Explorer) позволяет IE распознавать и корректно применять некоторые свойства CSS3.

Например, мы хотим добавить элементу свойство border-radius. Для современных браузеров это выглядит так:

.class {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

Чтобы этот код адекватно воспринялся IE добавляем:

.class {
   ...
   behavior: url(/pie/PIE.htc);
}

На данный момент поддерживаются следующие свойства:

  • border-radius;
  • box-shadow;
  • несколько фоновых изображений;
  • linear-gradient (линейные градиенты).

Чтобы все работало:

  1. Загружаем папку PIE (отсюда: http://css3pie.com/) к себе на сервер.
  2. Прописываем behavior: url(/pie/PIE.htc); (где вместо /pie/PIE.htc - правильный путь к файлу) во всех правилах, где используются css3 свойства.
  3. Проверяем.

Метки  —  CSS3 IE

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

Имя*
Комментарий*