xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в

Нашёл костыль под 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
Похожие записи

Комментарии RSS

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

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

сможет

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

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

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

Для border-radius есть еще http://code.google.com/p/curved-corner/downloads/list (размер файла всего 4,8 кб)

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

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

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

С :hover не работает.

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

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

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

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

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

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

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

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

Подробно о border-radius css

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании