Не люблю я разные фичи и примочки АКА *.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);
Оценить:|2
  
Комментировать
Раздел: CSS    
Просмотров: 5108
Комментариев (11)
  1. Greg
    Григорий Кочнев [Greg]
    01.09.2011 в 18:08

    Да CSS3 приятная штука. Облегчает жизнь заметно, если не надо поддерживать ИЕ.
    К стати говоря правильные заказчики и правильные компании считают: если ИЕ не поддерживает CSS3 это проблемы ИЕ и тех кто им пользуется.

    Всегда стараюсь при общении с не очень продвинутыми заказчиками озвучить это тезис :)

    Вот яркий пример откровенного забивания на ИЕ Twitter.
    Думаю эти люди(разработчики) знают толк в вебе и знают, что делают.

  2. Deff
    Андрей Данилов [Deff]
    05.09.2011 в 23:18

    Ну, в общем, я уже закинул себе PIE в стандартный шаблон для будущих проектов

  3. Greg
    Григорий Кочнев [Greg]
    06.09.2011 в 09:12

    может для полноты картины выложи архивчик с рабочим примером?

  4. Ольга [Olga]
    06.09.2011 в 18:23

    а совместим ли PIE с jquery?

  5. Greg
    Григорий Кочнев [Greg]
    08.09.2011 в 21:11

    Дополню ссылочкой на сайт PIE

  6. Ольга [Olga]
    17.09.2011 в 14:17

    Спасибо, воспользовалась PIE, действительно классная штука, очень упростила работу.

  7. cssfish
    20.09.2011 в 19:11

    все здорово, но писать о PIE в конце 2011 года несколько..ммм.. запоздало, не? ;-)
    использую, но она не 100% безглючна. например в box-shadow не впихнуть rgba и некоторые проблемы бывают с JQ. но, конечно, это лучшее решение на данный момент и до конца всех этих ие…

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