Учим IE свойствам CSS3 (border-radius, box-shadow, linear-gradient)

Сейчас современный дизайн сайта нельзя представить без скругленных углов, теней и градиентов. В достижении этих эффектов вебмастерам помогают CSS3 свойства: border-radiusbox-shadow, linear-gradient.

Но при таком методе верстки остро встает вопрос кросбраузерности. Ведь существуют разные браузеры и у каждого есть свои версии, новые и не очень. При добавлении вышеуказанных свойств свойств в CSS файл нужно дублировать их с приставками:

  • -webkit (для браузеров Chrome, Safari)
  • -moz (Firefox)
  • -o (Opera)
  • -ms (IE 10)
.br10 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px; 
}

А чтобы это работало в ранних версиях IE (с 6й), можно воспользоваться сервисом CSS3Pie

Скачиваем архив с сайта http://css3pie.com. Копируем файл pie.htc на сервер. В архиве файл назван заглавными буквами, не забываем, что на unix серверах регистр имеет большое значение, так что лучше перевести название в нижний регистр.

Затем в CSS файле у тех элементов, в которых используем CSS3 свойства дописываем в конец behavior: url(/css/pie.htc); где в скобках путь до файла pie.htc от корня сервера.

.br10 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px; 
  behavior: url(/css/pie.htc);
}

Для градиента в CSS файле используется такая запись

.box {
  -pie-background: linear-gradient(#61C4E3, #008BC4);
  behavior: url(/css/pie.htc);
}

Также нужно добавить тег meta режима совместимости IE

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Похожие статьи

Статья оказалась полезной? Вырази благодарность - поделись в соцсетях

Комментирование отключено