Фоновый .png и IE 6 — принуждаем к миру.

[TecHMeaT]

Неуж-то теперь я смогу победить ИЕ6!!! :)
*убежал тестить новый фикс…

[dreamhelg]

Перепробовала множество фиксеров, остановилась на плагине к jquery pngFix. Всем он хорош, и background-repeat умеет делать, но только как-то уж очень коряво. Да и если в фоне множится png-картинка, время загрузки страницы значительно увеличивает. Я думаю нужно просто отказаться от фонового png в ие6, все надеюсь что он сдохнет в ближайшее время

[Kudja]

Я бы даже сказал — Все надеются что он сдохнет в ближайшее время (ну или большая часть сообщества)

[nicothin]

а я бы сказал, что не надеются, а страстно желают ему зла!
(по кр. мере, я — желаю)

[bassdrum]

Для ie6, с некоторых пор и с молчаливого согласия заказчиков, обхожусь связками гифов и джпегов (насколько возможно, имитируя полупрозрачность), а для остальных браузеров использую полноценный пнг. В итоге, пользователи устаревшего и, немного ущербного браузера, получают картинку чуть хуже чем остальные. Эдакий намек на обновление, ненавязчиво — «ваше ПО устарело». Все довольны.

[danko]

Думаю, что пользователи «устаревшего и ущербного» никогда не увидят эти сайты в других браузерах, так что если они и подумают что-то плохое, то про саму графику, а уж никак не про браузер. Тут необходимы более кардинальные решения, например, на IE6 выдавать вместо сайта надпись «Смените браузер». Или намеренно верстать всё с использованием всех не поддерживаемых IE6 фич и приписывать: «Сайт оптимизирован для не-IE6» :)
Понятно, что для продакшена себе такого позволить нельзя, но на персональных проектах — почему бы и нет? :)

[frujo]

Для меня отличным примером того как подтолкнуть пользователя к размышлениям на тему смены устаревшего браузера был сайт www.stuffandnonsense.co.uk (откройте при помощи 6-го ИЕ и другим браузером). По-моему славно :)

[danko]

К сожалению, не могу заценить в полной мере, так как мой standalone IE6 не обрабатывает условные комментарии :( В коде мессадж почитал, да :)
Но имхо для дизайн-студии это очень смелый шаг.

[frujo]

Специально для вас (кликабельно)! :)

FF:


IE6:

[danko]

Спасибо!
Зачётно сделали ребята, молодцы :)

[frujo]

Есть еще такой способ сделать то, о чем пишите. У всех кроме ИЕ будет полупрозрачность, у пользователей ИЕ — аналог GIF. :)

[Richard_Ferlow]

Стараюсь обойти использование прозрачностей максимально, ибо, с background-position научили работать iepngfix, но размер подключений оставляет желать лучшего… но это не самое плохое — хуже то, что страница до конца начинает грузиться из-за увеличивающегося кол-ва обращений к серверу в разы дольше.

[johnbl4ck]

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

[Richard_Ferlow]

Не знаю — я проверял у себя — было 8мь изображений с прозрачностью. После того как страница казалось бы загрузилась, слева внизу еще остается — осталось 100 объектов или как там. Т.е. в разы больше.

Пользователи ИЕ, как правило, просто хотят получить тем, что у них есть информацию с того сайта, где эта информация есть — они как бы не при чем.

[tgm]

Мне кажется, что часть статей страдает одними недостатками…
В статье не описывается проблема.
Например:
1. Известный баг — то-то не работает с тем-то…
2. Из ленты получил такую-то информацию…
3. Вот мое решение данной проблемы…

Вот именно первый пункт и в данной статье отсутствует.
Я конечно понимаю — действует принцип «кто знает, тот поймет».
Но я, например, не сталкивался с этим, и хочу узнать новое. А по тексту статьи не понимаю сразу проблему — приходится догадываться.

Уважаемому автору — это не наезд, а просто совет или дельное замечание.
Если не прав — уж простите :)

[dreamhelg]

А хотите расскажу вместо автора?) Известный баг — это то, что картинки в формате .png, содержащие прозрачные участки, в браузере ie6, отображаются неправильно. А именно, область прозрачных участков заливается серым цветом. А статья рассматривает очередное решение этой проблемы на яваскрпте.

[tgm]

Спасибо, теперь ясно.
Это было бы отличное предисловие к статье.
Теперь гораздо интереснее :)

[dreamhelg]

то есть можно имитировать прозрачность, задав нужный фон картинки?

[dreamhelg]

спасибо за совет, этого я не знала

[frujo]

Есть еще более интересный способ. Ознакомтесь на сайте cssing.org.ua

[frujo]

Простите, не туда отправил. Хотел ответить сюда, а получилось вам. Вы абсолютно правы!

[bezz]

Вы немного не правы, с прозрачностью png в ИЕ 6 все нормально, а вот с полу-прозрачностью…

[johnbl4ck]

проблемы у ие с альфа-каналом, то бишь с пнг-24, не с пнг-8 да.

[bezz]

вообщето полупрозрачность и подразумевает 24-битный пнг

[johnbl4ck]

это не я вам минус поставил, я согласен что с пнг-8 никаких проблем нет! а полупрозрачность = альфа-канал

[frujo]

Я немного торопился «подарить шарик первым». Кроме того опасался накликать нашествие Капитана Очевидность :) Так или иначе, добавил кратенькое описание проблемы в начале топика.
Спасибо, благодаря вам буду писать лучше.

[johnbl4ck]

данная проблема уже была решена около полугода.
www.twinhelix.com/test/iepngfix.zip

www.twinhelix.com/css/iepngfix/

[frujo]

К сожелению, данный фикc не позволяет работать со свойствами background-repeat и background-position.

[johnbl4ck]

А вы скачайте зип и сами проверьте )

v2.0 Alpha 3: Alternatively, download the latest development code (updated 26 August 2008) at the Test Area, this includes support for background position and repeat.

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

[frujo]

Я когда-то писал об этом способе на Хабре и у читателей возникло немало нареканий. С тех пор я более скептично к нему отношусь. Там не все столь гладко. Да и метод описываемый здесь использует абсолютно иной подход. Все решается не при помощи фильтра Explorerа, а при помощи VML. Это абсолютно новый взгляд на решение проблемы.

[johnbl4ck]

ну а преимущества перед фильтром какие? больше скорость обработки или что?

[frujo]

В первую очередь это то, что используя фильтр не выйдет задать фон элементам формы. После его действия нарушится порядок слоев и обработанный фон «накроет» то, к чему он относится сверху, вместо того, чтобы оказаться внизу.

[Umkus]

Ну, на счёт абсолютно никаких это вы зря. У меня возникали серьезные проблемы с производительностью при тайлинге небольших изображений. В моём проекте была горизонтальная тень — 1 x 20 пикселей. Страница грузилась за 30 секунд в «Not responding» браузере. Автор советует использовать *очень* длинные картинки. Исправил на 800 x 20 всё стало намного легче.

[dip]

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

[Bygaga]

У гифа совсем другое качество :(
Лучше уже фикс :)

[dip]

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

[johnbl4ck]

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

[Cosss]

Кажется, это что надо, ушел тестить…

[Cosss]

Скажите, как-нить через expression его можно включать?

[frujo]

А зачем, простите? Включайте через conditional comments.

[Cosss]

не очень удобно отдельно в хтмл стили перечислять

[Delka]

во внешний js для IE6 на onload можно повесить.

[Cosss]

на все селекторы?

[frujo]

А зачем их много делать? Можно сделать один класс .png и всюду его внедрить :)

[Cosss]

вообще ступил, конечно, можно все нужные селекторы в одном месте перечислить… да это подходит…

[Cosss]

Есть один неприятный баг

thecosss.kanet.ru/stuff/pngbug.gif

Используется пнг 100х100 и 2 дива один за другим, во втором диве черный фон. Никаких бордеров быть не должно… :(

[FB3]

Я думаю, это будет интереснее автору фикса, а не создателю топика :)

[Cosss]

Багрепорт я уже отправил…

[frujo]

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

[frujo]

На сайте автора появилась новая версия скрипта. В ней внесены изменения исправляющие указанные вами функциональные оплошности. Попробуйте еще разик.

[G_Z]

Не заработало.
В одном из трех применений показало, что-то похожее на ожидаемый результат, но всё съехало.
Жаль, надежды были.

[leshaogonkov]

Очень интересная тема, спасибо за наводку!

Держите нас в курсе, я думаю это многим будет интересно, к сожалению не нашел на сайте автора фидов(

Кстати, с закругленными уголками, автор этого метода тоже пытается экспериментировать :)

[frujo]

На здоровье. :)
Интересно, что существуя всего около 4-х дней скрипт стал достаточно популярным и даже очень авторитетные разработчики (как например Джонатан Снук) пророчат ему большое будущее.
Также добавлю, что фид уже есть.

[leshaogonkov]

везде посмотрел есть ли фид, кроме страницы, которую хотел отслеживать)

[Delka]

да, перспективная вещь.

впервые про этот способ узнал в блоге Bolk'a: bolknote.ru/2008/08/11/~1808, кстати он с blog.ad.by одновлеменно написали, у них прям соревнование по vml))

[woto]

Вот неплохой jQuery плагин с хорошей совместимостью — iFixPng2. Меня полностью устраивает.

[Lenochka]

плагин хороший, но у меня почему-то png-24 картинками не хорошо показываются — с крестиком внутри, а png-8 фоном вообще исчезают со страницы

[johnbl4ck]

неправильно путь на прозрачный гиф прописали

[Lenochka]

точно ) спасибо!
все работает )))
*как я рад, как я рад!*

[homm]

> А именно — область этих участков заливается серым цветом (спасибо dreamhelg ).
Дак вот кто в этом виноват!

[frujo]

Да, забавно вышло. Испралюсь немедленно :)

[woto]

Вот ещё один вариант борьбы с IE — PNG Behavior. :)

[frujo]

Он работает на основе фильтра ИЕ, поэтому несколько не из этой оперы, к сожеленинию.

[popotam2]

Мы используем целый набор, примерно вот такой

<script type="text/javascript" src="/lib/fancybox/jquery.pngFix.js"></script>
...
<!--[if lt IE 7]>
<![if gte IE 6]>
<script type="text/javascript" src="/lib/fixpng.js"></script>

<![endif]>
<![endif]-->
...
<!--[if lt IE 7]>
<script defer type="text/javascript" src="/img/js/jwupf/ultimatepngfix_inline.js"></script>
<script type="text/javascript" src="/img/js/jwupf/ultimatepngfix_bg.js"></script>
<script type="text/javascript" src="/lib/jquery-1.2.3.min.js"></script>
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript" src="/img/js/pngfix/supersleight-min.js"></script>
<![endif]-->



Именно в таком сочетании — получается максимальный эффект. Пример реализации

[frujo]

Ого! Очень много всего.

[woto]

У вас в примере зеленая полоска сверху в Safari рвется по краям. Не гуд.

[semav]

У меня в IE6 страница тормозит просто жуть. При перелистывании «тарифные планы» или проекты — то изображение, которое должно спрятаться не прячется полностью. остается пикселей 5

[crazzyDemon]

так на всякий случай =)
в опере 9,62 в верхней зеленой полоске закругленный углы не прижаты к краям

[ProstoDesign]

Спасибо, два дня мучался с проблемой, Ваш пост очень мне помог.

[mixus]

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