Aug 27 2012 at 12:05

Немного о CSS3PIE

Invite pending

Здравствуйте!

Недавно столкнувшись с необходимостью применить в одном проекте свойства CSS3 (а именно border-radius) к основным элементам дизайна веб-страницы, я столкнулся с тем, что Internet Explorer не воспринимает это свойство должным образом. Немного поиска, и я узнал о CSS3 PIE.

Теория

CSS3 PIE (сокращение от CSS3 Progressive Internet Explorer) – удобный модуль, позволяющий использовать свойства «border-radius», «box-shadow» и «linear-gradient» в браузере Internet Explorer 6-9 версии. На отображение страниц в других браузерах CSS3 PIE не влияет.

Модуль выполнен в виде небольшого файла с расширением «.htc», который подключается к CSS через свойство «behavior».

На веб-сайте проекта ( css3pie.com ) находится пример использования модуля. Там же можно просмотреть CSS этого примера:

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: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);

Отбросив все ненужное, я получил:

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);

Практика

Казалось бы, что тут сложного? Залей файл на сервер, напиши одну строчку и получи результат.

Но на деле получилось вот что:
Добавив нужное свойство к CSS блока (div-а), я получил следующий результат:

div#test
{
    background-color: #006699;
    moz-border-radius: 10px 10px 0 0;
    webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    behavior: url(CSS3PIE);
}

Открыв в IE тестовую страничку и предусмотрительно нажав «Ctrl+F5», я не увидел на ней главного: div-а. Вышло так, что с «background-color: #006699;» блок не выделялся на фоне белой страницы.

Как оказалось, проблема заключалась в следующем: блок, с которым используется CSS3 PIE, должен обладать свойством «position: relative;».
На сайте модуля (в разделе «About») об этом ни сказано ни слова.

Итог

Зачем я написал все это?

1. Я хотел рассказать о порой необходимом модуле CSS3 PIE, так как не все с ним знакомы.
2. Я также хотел пояснить о необходимости свойства «position: relative;», так как на сайте проекта об этом не сказано.

Так как в веб-дизайне я новенький, то и свой пост я хотел бы ориентировать в первую очередь на новичков.

Hubs:

Lumber room