Border-radius, box-shadow, css-gradient

[Great Rash]

Как полезно иногда читать хабр...

В одной теме увидел ссылку. Тестирую - пока просто офигенно! Написал тест на яваскрипте (клонирует по 10 подобных дивов на страницу) - с 30-ю блоками на ИЕ7,8 жить можно, ИЕ6 работает даже быстрее(!) чем 7 и 8. После 40 начинаются серьезные тормоза...

Теперь вопросы:

Кто про это уже знает?

Кто-то юзал на реальных проектах?

[klierik]

сегодня так же набрел на камент на хабре с ссылкой )))

вот удмаю попробывать его в текущем проекте )

[Great Rash]

Интересно будет почитать отзыв. Просто у самого нет пока проектов, где это можно было б применить...

[Scrum]

Увидел позавчера. вчера заюзал (не на реальном проекте), понравилось, помимо всего правит баг с пнг в 6 ослике.

[Great Rash]

А background-repeat не реализует для png24?

[Scrum]

А background-repeat не реализует для png24?

реализует и довольно таки быстро. (пробовал с картинкой 1х1)

Кому лень писать

test.rar

[Great Rash]

Круто! Странно что я об этом записи в доках не нашел... или плохо читал...

[Vlad]

Предлагаю тему перенести в "Полезные ресурсы".

[Great Rash]

Поддерживаю! Но все-таки отпишитесь кто заюзает на реальном ресурсе. Vlad, может вы? В новой то версии...

[klierik]

я так сказать уже заюзал. по крайней мере макет готов. ожидаю пока программер внесет это изменение

пока что повесил так сказать в тестовом режиме. если багов не будет существенных то наверно оставлю

кстати Влад +1. поддерживаю.

Great Rash,

у меня так же работает лучше всего в ИЕ6.

а в ИЕ8 чуток баговато из-за задержки рендеринга

[psywalker]

Вот и я наконец протестил. Scrum, спасибо за пример, только насчёт пнг и позиционирования фона не уверен. У меня не пашет.

[mishka]

ИЕ6 работает даже быстрее(!)

Я давно говорил что ие6 с работает шустрее ие7-8.

Это мое наблюдение.

Edited August 30, 2010 by mishka2

[Scrum]

прогонял ietesterom все было гуд.

[psywalker]

прогонял ietesterom все было гуд.

Странно, именно ietesterom я и обломался.

[Scrum]

Странно, скрин можешь приложить или описать ?

[psywalker]

Вот скрин ИЕ6. Работает позиционирование, но пнг не прозрачно

http://www.screencast.com/users/psywalker/...a5-c2d888929572

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

http://www.screencast.com/users/psywalker/...11-d72fef0f18ce

p.s. Если что, я имею ввиду квадратик справа.

[Scrum]

ммм. у меня с прозрачностью все ок, но нашлась другая проблема, при позиционирование, через бэкграунд, отображает картинку в пределах 50х50 может меньше но не больше, причем проблема наблюдается в 6 и 8 как ни странно в 7 все нормально.

[Great Rash]

psywalker, Scrum вы используете background или -pie-background?

[Great Rash]

Ага, вычитал на форуме, что там есть такая проблема:

если присутствует box-shadow, то у VML-блока, который отвечает за тень отображается серый бекграунд, который никак не получается убрать, для ИЕ box-shadow можно отключить выставив -pie-box-shadow: none;, тогда с прозрачностью png24 все становится нормально.

Еще выяснил, что не работает в ИЕ7 ширина блока в процентах. В ИЕ6,8 все в порядке...

Ага, это баг!

Ширина блока в процентах работает в ИЕ7, но только если задать margin-top отличный от нуля. Причем дробные значения не подходят: пробовал задавать margin-top: .5px; (не работает) вместо margin-top: 1px; (работает).

[Scrum]

psywalker, Scrum вы используете background или -pie-background?

пробовал и то и другое. Эффект тот же был. дома еще раз проверю.

[psywalker]

psywalker, Scrum вы используете background или -pie-background?

Я использую background

[mishka]

В очередной раз убеждаюсь:

если поддерживаешь ие6, то выкинь нафиг всякую фигню типа .htc, юзай обычные бекграунды, и фильтры для пнг, и джс для ховера.

Конечно ребята, которые пишут такие фичи - красавцы, но вот если бы они свои знания направили на чтонибудь полезное, а не на всякие извраты для умирающего браузера.

Както клиент просил юзать джкверивские скругления углов, типа так круто, так мало кода. Сайт не маленький, просто забит маленькими блочками, со скругленными углами.

После всей порезки стали подключать джс этот.

Что оказалось: при таком количестве скругляемых блоков - тормоза нереальные, пока отработает. Отрабатывает не везде, кроссбраузерность фтопку.

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

В итоге перерезали потом это все картинками, времени ушло больше чем если бы сразу картинками сделали.

Вывод: поддерживаеш ие6 полностью - юзай картинки и фильтры. Не полностью - сделай читаемым, но без красоты. А юзая всякую такую хрень - на стадии верстки усложнишь дальнейшую разработку.

Edited September 1, 2010 by mishka2

[psywalker]

Но ведь можно для углов например юзать .htc, а для пнг уже DD_belatedPNG.fix к примеру?

[klierik]

psywalker +1

я скорее согласен с Псай, пожержку углов можно повесить опционально, а для бекграунда лучше использовать готовое проверенное решение.

Хотя на данный момент в качестве фич аля css3/html5 склоняюсь в сторону Modernizr

[mishka]

Ваше "готовое", "проверенное" решение здорово себя ведет только когда делаешь чисто верстку.

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

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