xandeadx.ru
Блог друпал девелопера

CSS → border-radius, box-shadow и linear-gradient в Internet Explorer 6+

01.10.2010

Нашёл костыль под IE 6-8, который позволяет использовать CSS3 правила border-radius, box-shadow и linear-gradient без написания лишней разметки и магии с javascript-ом. Называется чудо CSS3 PIE.

CSS3 PIE в действии

Использование:

  1. Скачиваем архив с последней версией CSS3 PIE.

  2. Распаковываем в папку на сервере.

  3. К селекторам, в которых используются правила border-radius, box-shadow или linear-gradient, добавляем новое: behavior:url(/path/to/PIE.htc);. Например:

    #myAwesomeElement
{
    border: 1px solid #999;
    border-radius: 10px;             /* общее правило */
    -webkit-border-radius: 10px;     /* для Safari и Chrome */
    -moz-border-radius: 10px;        /* для Firefox */
    behavior: url(/path/to/PIE.htc); /* для IE */
}

Демо рас, демо два.

Из замеченных проблем: не работает с правилами для отдельных углов — border-top-left-radius и т.д.

Написанное актуально для
IE6-8
Похожие записи

Комментарии

Петров Николай
02.10.2010, 12:26

Даже не скачивая архив я могу сказать что внутри .htc мы найдем все тот-же JavaScript.

Но меня как профессионального Front-end девелопера больше всего волнует вопрос: а может-ли эта шняга обработать динамически генерируемый попап? Все скирипты подобного толка которые я встречал ранее не могли этого делать.

Петров Николай
02.10.2010, 13:23

Работоспособность впечатляет. Попробовал с бордерами разной толщины и цветов - работает, но нужно указывать цвет через # - не все названия цветов понимает.
Опера огорчила отсутствием поддержки градиента.

Про обработку динамических элементов упоминание в доках нашел - в ПН буду тестировать на работе. Еще радует что проект базируется на GITe. Это вселяет уверенность.

Сергей
09.10.2010, 16:33

увы и ах, но Опера его не кушает. :(

Гость
11.10.2010, 19:27

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

EllECTRONC
10.10.2011, 16:47

Интересно, а как додумался найти этот "костыль"? http://drupalblog.ru/poll/127
И правильно говорит Vydrin_AP, модуль есть давно. )))

Fix
02.12.2011, 14:10

Разработчики блин херовы...
Радуйтесь что это хоть есть (лично меня этот скрипт от многих проблем избавил)...

HardHardy
05.05.2012, 09:41

На друпале градиент и радиус прекрасно работают, только нужно еще дописать строчку:
-pie-background: linear-gradient(color, color2);.
Жаль с тенью текста не вкатывает.

Дмитрий
27.11.2012, 09:30

Автор, с чего вы взяли, что данный "костыль" ни на js реализован?
Во вторых, не самый идеальный вариант. Не видно градиента в IE9, и в Опере.

xandeadx
27.11.2012, 14:46

Комментатор, во первых я не писал на чём и как он реализован. во вторых, предложите свой "идеальный" вариант. в третьих опера и ie9 нативно поддерживают border-radius и box-shadow

Гость
04.12.2012, 09:11

"Из замеченных проблем: не работает с правилами для отдельных углов — border-top-left-radius и т.д.!"

Чтобы работало надо писать в виде:
border-radius: 10px 5px 5px 10px;

Да и вообще такая запись выглядит приятней и более поддерживаемой, чем уродское border-top-left-radius

PazitiFF
21.02.2013, 11:02

Xandeadx, подскажи если сталкивался. Пробовал подключить данный скрипт в drupal 7 для IE в отдельный стиль, таким же способом, как описано у тебя в блоге http://xandeadx.ru/blog/drupal/432. Странность в том, что стиль для IE подключается, а скрипт в нём не работает. В ином случае всё в порядке. Не могу понять почему.

Колючка
24.04.2013, 04:23

Все работает, но только не в слоях со свойствами position absolute и relative. А если расположить два блока друг за другом 50% высоты, жестко закрепить их, дать каждому по скроллингу и применить к каждому эти эффекты, то вообще шоу получается такое))) Градиент из нижнего дива переезжает в верхний. в общем эту библиотеку еще дорабатывать и дорабатывать. С 2008 года пишу webOS и до сих пор в майкрософт не могуг сделать браузер, чтобы я наконец-то ее запустил. Билл Гейтс просто лох. Хотя если подумать, он это специально делает урод.

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