Не люблю я разные фичи и примочки АКА *.htc для IE разных поколений. В своё время не раз обжогся на разном поведении фич в ИЕ6 под разными сервис паками винды. И разным поведением stand-alone версии ИЕ7 и обычной. А, поскольку мои заказчики верят, что ИЕ6 и ИЕ7 ещё живы, то в ЦСС3 вникать я не тороплюсь — смысл?
Но сейчас делаю проект, который будет эксплуатироваться исключительно под хромом. И в нём очень много скруглённых углов.
Когда попробовал, насколько просто делать скруглённые углы с помощью border-radius (вне зависимости от цветов, заливок, цветов бордеров для боксов), решил, что фанатизм излишен.
Осваивать CSS3 решил начать с малого — скруглённые углы. Что я нашёл:
Универсальные свойства — годятся для всех нормальных браузеров
.curved { -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / }
Как обычно, IE6-7-8 отличились, для них скачиваем border-radius.htc и подключаем
.curved { behavior:url(border-radius.htc); border-radius: 20px; }
Чтобы ИЕ6-7 нормально отображали скруглённые углы, рекомендуют следующее:
- каждый элемент должен иметь позиционирование — либо absolute, либо relative
- элементы, имеющие по умолчанию display:inline, ведут себя загадочно (но не всегда), даже если им задано display:block
- обязательно, чтобы было задано свойство hasLayout (читаем)
- у всех углов элемента радиус скругления может быть только одинаковым
- есть глюк при попытке скруглить углы у полупрозрачного блока — появляется серая полоса
- не стоит пытаться комбинировать эту фичу с другими
Сразу скажу — ещё не пробовал, как всё это работает. По мере испробования постараюсь что-то дополнить.
Дополняю
Всё вышесказаное мной — полная чушь.
Глючная и требовательная чушь.
Нарыл такую штуку — PIE называется. Реально, безглючная примочка.
Полнофункциональная реализация border-radius, box-shadow и background: linear-gradient.
Просто добавь воды:
.rounded, .top_nav, .top_nav li, .top_nav ul ul, **** И ЕЩЁ КАКИЕ-ЛИБО СЕЛЕКТОРЫ **** {behavior:url(js/PIE.htc);}
Прикладываю пример (он же в комментах ниже).
В ходе работы обнаружилась пара глючков:
- сложности при скруглении углов для элементов, которые по умолчанию инлайновые
- если задана наружная тень для элемента с незаданным цветом бекграунда — весь элемент заливается самым тёмным цветом из тени. Лечится заданием цвета бекграунда
- тень съезжает и располагается намного ниже её владельца. Лечится заданием position:relative
- В IE8 некорректно залился бокс с background-color: transparent; background-image: url(../images/***.png);
Да CSS3 приятная штука. Облегчает жизнь заметно, если не надо поддерживать ИЕ.
К стати говоря правильные заказчики и правильные компании считают: если ИЕ не поддерживает CSS3 это проблемы ИЕ и тех кто им пользуется.
Всегда стараюсь при общении с не очень продвинутыми заказчиками озвучить это тезис :)
Вот яркий пример откровенного забивания на ИЕ Twitter.
Думаю эти люди(разработчики) знают толк в вебе и знают, что делают.
Ну, в общем, я уже закинул себе PIE в стандартный шаблон для будущих проектов
может для полноты картины выложи архивчик с рабочим примером?
можно и с примером
233_PIE_samplezip.zip
прикрепи к топику :)
не все комменты читают
а совместим ли PIE с jquery?
поскольку, PIE цепляется в цсс, то уживаются. пробовал я делать анимацию для блоков, отрисованных с участием PIE — вполне пристойно
Дополню ссылочкой на сайт PIE
Спасибо, воспользовалась PIE, действительно классная штука, очень упростила работу.
все здорово, но писать о PIE в конце 2011 года несколько..ммм.. запоздало, не? ;-)
использую, но она не 100% безглючна. например в box-shadow не впихнуть rgba и некоторые проблемы бывают с JQ. но, конечно, это лучшее решение на данный момент и до конца всех этих ие…
ну… вы тоже можете что-нибудь написать.
тем более, если можете что-то дельное предложить;)