Кроссбраузерность сайта. Два модуля для поддержки некоторых свойств CSS3 в Internet Explorer

2013-04-07 | CSS

Всем веб-дизайнерам и верстальщикам хорошо известна проблема, возникающая с кроссбраузерностью шаблона сайта в браузере Internet Explorer. Обычно не работают некоторые свойства CSS3: border-radius, box-shadow и linear-gradient.

Напомню значения данных свойств CSS3:

border-radius – радиус скругления углов объекта.
box-shadow – тень от объекта. Можно задать степень размытия и размеры тени по горизонтали и по вертикали.
linear-gradient – заливка фона объекта в виде градиента (плавный переход от одного цвета к другому). Задаются два цвета: Top color и Bottom color.
Для некоторых браузеров, чтобы в них работали свойства CSS3, можно просто прописать в файле стилей style.css несколько строк, например:

1
2
3

border-radius: 8px;
-webkit-border-radius: 8px; // для Webkit
-moz-border-radius: 8px; // для Mozilla Firefox

Чтобы данные свойства CSS3 работали в Internet Explorer, нам понадобится скачать дополнительный файл. Скачать можно на двух сайтах:

1. Css3pie.com

2. Fetchak.com

На сайте Css3pie.com можно протестировать в действии данный модуль онлайн. Выглядит это так:

css3pie

Можете изменить цвета градиента, радиус скругления углов, размеры тени.

Скачать модуль можно на этой странице.

После чего закидываем в папку с шаблоном сайта и в файле style.css прописываем директорию, где лежит файл PIE.htc.
Пример для box-shadow:

box-shadow: #666 6px 13px 7px;
-webkit-box-shadow: #666 6px 13px 7px;
-moz-box-shadow: #666 6px 13px 7px;
behavior: url(/pie/PIE.htc); // Путь, где лежит модуль

На Fetchak.com также имеется неплохой модуль IE-CSS3 для поддержки CSS3 в Internet Explorer.

fetchak

Скачать IE-CSS3 можно по ссылке

Использовать модуль нужно так же как и в первом случае, прописав директорию, где лежит файл ie-css3.htc:

box-shadow: #666 6px 13px 7px;
-webkit-box-shadow: #666 6px 13px 7px;
-moz-box-shadow: #666 6px 13px 7px;
behavior: url(ie-css3.htc); // Путь, где лежит модуль

Стоит отметить, что тень (box-shadow) в Internet Explorer будет отображаться немного по-другому, чем в Mozilla Firefox, Safari, Chrome, и нельзя установить другой радиус для отдельного угла.

Подключайте данные модули к свойствам border-radius, box-shadow и linear-gradient в style.css и обеспечьте кроссбраузерное отображение сайта в Internet Explorer!

И еще. Варианты использования свойств CSS3 border-radius, box-shadow и linear-gradient Вы можете посмотреть тут

Поделиться: